@iamproperty/components 7.8.2--beta6 → 7.8.2--beta7

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

@@ -14,6 +14,7 @@ window.dataLayer.push({
   element: 'Address Lookup',
 });
 
+
 class iamAddressLookup extends HTMLElement {
   constructor() {
     super();
@@ -56,7 +57,7 @@ class iamAddressLookup extends HTMLElement {
 
           <div class="datalist__wrapper dropdown ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
             <slot name="beforeList"></slot>
-            
+
             <datalist id="address-lookup__addressess" class=""></datalist>
             <div id="paginationWrapper"></div>
             <slot name="afterList"></slot>

package/assets/ts/components/branch-selector/branch-selector.component.ts

@@ -0,0 +1,93 @@
+
+class iamBranchSelector 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/branch-selector.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = /* HTML */ `
+    <style>
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="wrapper">
+
+      <button id="menuButton" class="btn btn-action" popovertarget="branches" aria-haspopup="true" aria-controls="branches" style="anchor-name: --branches;">
+        <i class="fa-regular fa-building-circle-check"></i>
+        <span class="indicator"></span>
+        <span class="selected">Branch</span>
+      </button>
+      <div class="dropdown" part="dropdown" id="branches" style="position-anchor: --branches;" role="menu" popover="auto">
+        <slot></slot>
+      </div>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+
+  connectedCallback(): void {
+
+
+    const menuButton = this.shadowRoot?.querySelector('#menuButton');
+
+    let selected = this.querySelector('input:checked') ? this.querySelector('input:checked') : this.querySelector('input'); // By default the first input is checked if an input hasn't been checked on load
+    selected.checked = true;
+
+
+    menuButton?.querySelector('span.selected').textContent = selected?.closest('label').textContent;
+    menuButton?.setAttribute('data-checked-count',this.querySelectorAll('input:checked').length - 1);
+
+    if(this.hasAttribute('data-indicator'))
+      menuButton?.querySelector('span.indicator').setAttribute('data-indicator',this.getAttribute('data-indicator'));
+
+
+
+    // Make sure the correct classes and attributes are set on each item
+    Array.from(this.querySelectorAll(':scope > label:has(input)')).forEach(item => {
+      item.classList.add('dropdown__option');
+      item.setAttribute('title',item.textContent);// Set a title on all labels
+    });
+
+
+
+    // If all of the inputs are disabled then disable the button
+    if(this.querySelectorAll('input:disabled').length && !this.querySelectorAll('input:not(:disabled)').length)
+      menuButton?.setAttribute('disabled', 'disabled');
+
+    this.addEventListener('change', ():void => {
+
+      selected = this.querySelector('input:checked') ? this.querySelector('input:checked') : this.querySelector('input');
+      selected.checked = true;
+
+      menuButton?.querySelector('span.selected').innerHTML = selected?.closest('label').textContent;
+      menuButton?.setAttribute('data-checked-count',this.querySelectorAll('input:checked').length - 1);
+
+
+      if(this.querySelectorAll('input[type="checkbox"]:checked').length == 1){
+        selected?.closest('label').classList.add('pe-none');
+      }
+      else if(this.querySelectorAll('input[type="checkbox"]:checked').length > 1){
+        this.querySelector('label.pe-none')?.classList.remove('pe-none');
+      }
+
+    });
+
+    // Desktop menu button
+    menuButton?.addEventListener('click', (e) => {
+
+
+      if(this.hasAttribute('slot') && this.getAttribute('slot') == "account"){
+        e.preventDefault();
+        this.classList.toggle('branch-selector-inline');
+      }
+    });
+  }
+}
+
+export default iamBranchSelector;

package/assets/ts/components/modal/modal.component.ts

@@ -106,6 +106,9 @@ class iamModal extends HTMLElement {
 
     // Move the submit button so that the slot functionality works
     if(originalDialog) {
+      if(originalDialog.hasAttribute('open'))
+        dialog?.showModal();
+
       Array.from(originalDialog?.querySelectorAll('[slot]')).forEach((element) => {
         this.moveBefore(element, originalDialog);
       });

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -1,12 +1,5 @@
 import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown';
 
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'mutliselect',
-});
-
 class iamMultiselect extends HTMLElement {
   constructor() {
     super();
@@ -15,28 +8,28 @@ class iamMultiselect extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-      
+
     const loadCSS = `@import "${assetLocation}/css/components/multiselect.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    
+
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <label for="search" class="mb-0"><span class="inner-label label"></span> <slot name="feedback"></slot>
     <div class="outer">
-    <div class="wrapper">
-      
-      <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required part="search-input"/>
-      <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown" part="dropdown">
-        <slot></slot>
+      <div class="wrapper">
+
+        <slot name="checked"></slot>
+        <input name="search" id="search" autocomplete="off" required part="search-input"/>
+        <span class="admin-panel feedback">This field is required</span>
+        <div class="admin-panel dropdown" part="dropdown">
+          <slot></slot>
+        </div>
+        <button id="clear" class="btn btn-action "><span class="visually-hidden">Clear</span></button>
       </div>
-      <button id="clear" class="btn btn-action "><span class="visually-hidden">Clear</span></button>
-    </div>
     </div>
     </label>
     `;
@@ -49,7 +42,7 @@ class iamMultiselect extends HTMLElement {
     const form = this.closest('form');
     const wrapper = this.shadowRoot.querySelector('.wrapper');
     const search = multiselect.shadowRoot.querySelector('#search');
-    const button = multiselect.shadowRoot.querySelector('#clear');
+    const clearButton = multiselect.shadowRoot.querySelector('#clear');
     let order = 0;
     const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');
     const ajaxURL = this.getAttribute('data-url');
@@ -139,10 +132,10 @@ class iamMultiselect extends HTMLElement {
     search.addEventListener('input', () => {
 
       if (multiselect.hasAttribute('data-url') && search.value.length == minLength) {
-      
+
         searchAjax(multiselect, search, filterList);
       } else {
-          
+
         filterList(multiselect, search);
       }
     });
@@ -218,7 +211,7 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Clear all
-    button.addEventListener('click', function () {
+    clearButton.addEventListener('click', () => {
       Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
         checkbox.checked = false;
 
@@ -226,6 +219,10 @@ class iamMultiselect extends HTMLElement {
       });
 
       search.focus();
+
+      const clearEvent = new CustomEvent('clear');
+
+      this.dispatchEvent(clearEvent);
     });
 
     // Add some keyboard features to keep it accessible
@@ -295,7 +292,7 @@ class iamMultiselect extends HTMLElement {
             });
           }
           else {
-            
+
             setItem(activeElement);
           }
 

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

@@ -1,9 +1,4 @@
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'nav',
-});
+import { navTemplate, branchSelector, menuEvents, megaMenuTitles, megaMenusEvents, accountMenuEvents, backdropEvents } from '../../modules/nav';
 
 class iamNav extends HTMLElement {
   constructor() {
@@ -13,42 +8,17 @@ class iamNav extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
+    const navCSS = `@import "${assetLocation}/css/components/nav.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
+    template.innerHTML = /* HTML */`
     <style class="styles">
-
-    ${loadCSS}
-    </style>
-    <style class="doc-styles">
+    ${navCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="container">
-      <slot name="logo"></slot>
-      <div class="buttons-holder"></div>
-      <button class="btn-menu" part="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 bg-light">
-            <div class="container">
-            <slot name="secondary"></slot>
-            </div>
-          </div>
-        </div>
-        <slot name="menus"></slot>
-      </div>
-    </div>
-    <div class="backdrop" part="backdrop"></div>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    ${navTemplate}
     `;
 
     shadowRoot.appendChild(template.content.cloneNode(true));
@@ -59,255 +29,45 @@ class iamNav extends HTMLElement {
   }
 
   connectedCallback(): void {
-    // Load external CSS if needed
-    if (this.hasAttribute('data-css'))
-      this.shadowRoot
-        .querySelector('.doc-styles')
-        .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
 
-    const menuButton = this.shadowRoot.querySelector('.btn-menu');
-    const menu = this.shadowRoot.querySelector('.menu');
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const iamNav = this;
     const backdrop = this.shadowRoot.querySelector('.backdrop');
-    const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
-
-    // Check the content
-    const createNavMenu = (component) => {
-
-      buttonsHolder.innerHTML = '';
-      component.querySelectorAll(':scope > *').forEach(function (element) {
-        const tagname = element.tagName;
-
-        switch (tagname) {
-          case 'BUTTON':
-            if (!element.hasAttribute('slot')) {
-              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.setAttribute('part', '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.setAttribute('aria-expanded', true);
-            mdButton.classList.toggle('active');
-            component.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.toggleAttribute('aria-expanded');
-
-              console.log(element);
-              element.classList.toggle('open');
-              mdButton.classList.toggle('active');
-
-              // Close desktop menus
-              const openMenu = component.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.removeAttribute('aria-expanded');
-                setTimeout(function () {
-                  menu.classList.add('closed');
-                }, 1000); // Delay until its close so the animation is broken
-                component.classList.add('open');
-                backdrop.classList.add('show');
-                element.classList.remove('closed');
-              } else {
-                component.classList.remove('open');
-                backdrop.classList.remove('show');
-                setTimeout(function () {
-                  element.classList.add('closed');
-                }, 1000);
-              }
-
-              // Close any open menus
-              component.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
-                if (openmenu != element) {
-                  openmenu.classList.remove('open');
-                }
-              });
-
-              component.shadowRoot
-                .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')
-                .forEach(function (selectedButton) {
-                  if (selectedButton != button) {
-                    selectedButton.removeAttribute('aria-expanded');
-                    const innerBtn = selectedButton.querySelector('.btn-primary');
-                    innerBtn.classList.remove('active');
-                  }
-                });
-            },
-            false
-          );
-        }
-      });
-
-      component.querySelectorAll('details').forEach(function (element) {
-        element.classList.add('details--revert');
-      });
-    }
-    createNavMenu(this);
-
-    this.addEventListener('rebuilt', () => {
-      console.log('rebuilt nav');
-      createNavMenu(this);
-    });
+    const menuButton = this.shadowRoot.querySelector('#btn-menu');
+    const menu = this.shadowRoot.querySelector('.menu');
+    const accountMenuButton = this.shadowRoot.querySelector('#btn-menu-account');
+    const accountMenu = this.shadowRoot.querySelector('.nav--menu');
+    const accountBtnTitle = this.shadowRoot?.querySelector('#account-btn-title');
 
+    // #region Add Helper classes
     // Has secondary link
     if (this.querySelector('[slot="secondary"]')) {
-      menu.classList.add('has-secondary');
+      this.classList.add('has-secondary');
     }
+    // #endregion
 
-    // Open and close the menu
-    menuButton.addEventListener(
-      'click',
-      function (e) {
-        e.preventDefault();
-        //menuButton.toggleAttribute('aria-expanded');
-        menu.classList.toggle('open');
+    accountBtnTitle.innerHTML = this.hasAttribute('data-account-btn-title') ? this.getAttribute('data-account-btn-title') : 'My account';
 
-        // 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[aria-expanded]').forEach(function (element) {
-          element.removeAttribute('aria-expanded');
-          const 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
-    );
+    if(!this.querySelector('[slot="account"]')){
+      accountMenuButton?.remove();
+      accountMenu?.remove();
+      accountBtnTitle?.remove();
+    }
 
     // Allow outside JS to close the menu
     this.addEventListener('request-close', () => {
       menuButton.removeAttribute('aria-expanded');
       menu.classList.remove('open');
-      iamNav.classList.remove('open');
-    });
-
-    // Close the menu on the click of the backdrop on desktop
-    backdrop.addEventListener('click', () => {
-      const openMenu = this.querySelector('details[open] summary');
-
-      if (openMenu) openMenu.click();
-
-      iamNav.classList.toggle('open');
-      iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
-        element.classList.remove('open');
-      });
-      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
-        element.removeAttribute('aria-expanded');
-        const innerBtn = element.querySelector('.btn-primary');
-        innerBtn.classList.remove('active');
-      });
-
-      backdrop.classList.remove('show');
+      this.classList.remove('open');
     });
 
-    // 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 && !event.target.closest('.nav--menu')) {
-          const summary = event.target.closest('summary');
-          const details = summary.closest('details');
-          const wrapper = details.parentNode;
-
-          if (details.hasAttribute('open')) details.removeAttribute('open');
-          else details.setAttribute('open', 'true');
+    menuEvents(this,menu,menuButton,accountMenu,accountMenuButton);
+    megaMenuTitles(this);
+    megaMenusEvents(this,menu,menuButton,accountMenu,accountMenuButton,backdrop);
+    accountMenuEvents(this,menu,menuButton,accountMenu,accountMenuButton,backdrop);
+    backdropEvents(this,menu,menuButton,accountMenu,accountMenuButton,backdrop);
+    branchSelector(this);
 
-          // 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[aria-expanded]').forEach(function (element) {
-            element.removeAttribute('aria-expanded');
-            const 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) => {
-            if (detailsArrayElement != details) detailsArrayElement.removeAttribute('open');
-          });
-
-          if (this.querySelectorAll(':scope > details[open]').length) {
-            backdrop.classList.add('show');
-            iamNav.classList.add('open');
-
-            if(this.querySelectorAll(':scope > details[open][slot="secondary"]').length)
-              iamNav.classList.add('open-secondary');
-          } else {
-            backdrop.classList.remove('show');
-            iamNav.classList.remove('open');
-            iamNav.classList.remove('open-secondary');
-          }
-
-          event.preventDefault();
-        }
-      }
-    });
-
-    // Mega menu title
-    this.querySelectorAll('details').forEach((detailsElement) => {
-      const summary = detailsElement.querySelector('summary');
-      const containerDiv = detailsElement.querySelector(':Scope > div');
-
-      containerDiv.setAttribute('data-title', summary.textContent);
-    });
-
-    // Search
+    // #region Search
     if (this.querySelector('[slot="search"]')) {
       menu.classList.add('has-search');
       const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
@@ -355,25 +115,10 @@ class iamNav extends HTMLElement {
         searchButton.removeAttribute('aria-expanded');
       });
     }
+    // #endregion
 
-    if (this.classList.contains('nav--sticky')) {
-      let oldScrollY = window.scrollY;
-      window.onscroll = function (e): void {
-        if (oldScrollY < window.scrollY) {
-          document.body.setAttribute('data-direction', 'down');
-        } else {
-          document.body.setAttribute('data-direction', 'up');
-        }
-
-        if (window.scrollY > 100) {
-          document.body.classList.add('past100');
-        } else {
-          document.body.classList.remove('past100');
-        }
-        oldScrollY = window.scrollY;
-      };
-    }
   }
 }
 
+
 export default iamNav;

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

@@ -0,0 +1,69 @@
+import iamNav from "../nav/nav.component";
+
+class iamNavStandalone 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 loadCSS = `@import "${assetLocation}/css/components/nav-standalone.component.css";`;
+    //const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = /* HTML */`
+    <style class="styles">
+    ${loadCSS}
+    </style>
+
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="wrapper">
+      <iam-nav class="iam-nav">
+        <slot></slot>
+        <slot name="account"></slot>
+        <slot name="secondary"></slot>
+      </iam-nav>
+    </div>
+    `;
+
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    // insert extra CSS
+    if (!document.getElementById('navGlobal'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="navGlobal">${loadExtraCSS}</style>`);
+  }
+
+  connectedCallback(): void {
+
+    if (!window.customElements.get(`iam-nav`))
+      window.customElements.define(`iam-nav`, iamNav);
+
+
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+
+    wrapper?.innerHTML = `<iam-nav class="iam-nav">${this.innerHTML}</iam-nav>`;
+
+    const iamNavElement = wrapper?.querySelector(':scope > iam-nav');
+
+    if (iamNavElement.querySelector('[slot="secondary"]')) {
+      iamNavElement.classList.add('has-secondary');
+    }
+
+    wrapper?.addEventListener('change', (e) => {
+
+      const event = new CustomEvent("change", e);
+      this.dispatchEvent(event)
+    });
+
+    wrapper?.addEventListener('click', (e) => {
+
+      console.log(e);
+      const event = new CustomEvent("click", e);
+      this.dispatchEvent(event)
+    });
+  }
+}
+
+
+export default iamNavStandalone;