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

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

@@ -1,91 +1,34 @@
-import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
 import {populateNav,loadNavData,loadUserData,setEnabledLinks} from '../../modules/nav';
-import iamNav from '../nav/nav.component';
-
-// Data layer Web component created
-declare global {
-  interface Window {
-    dataLayer: Array<object>;
-  }
-}
 
 class iamSTDNav extends HTMLElement {
   constructor() {
     super();
   }
 
-  defaultToNav = ():void => {
-
-    const defaultContent = this.innerHTML;
-    this.innerHTML = `<iam-nav ${(this.hasAttribute('class') ? `class="${this.getAttribute('class')}"`:'')}>
-    ${defaultContent}
-    </iam-nav>`;
-  }
-
-  transformToNav = (data):void => {
-
-    const navElement = this.querySelector('iam-nav') ?? this;
-
-    // Remove current links
-    navElement.querySelectorAll(`:scope > *`).forEach((element) => {
-
-      if(!element.hasAttribute('slot'))
-        element.remove();
-    });
-
-    const defaultContent = navElement.innerHTML;
-
-    navElement.innerHTML = `${defaultContent}${populateNav(data)}`;
-
-    const customEvent = new CustomEvent('rebuilt');
-    navElement.dispatchEvent(customEvent);
-  }
-
-  defaultToSecondary = (): void => {
-
-    // Set links and details to secondary slot
-    Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
-
-      element.setAttribute('slot','secondary');
-    });
-
-    const defaultContent = this.innerHTML;
-    this.outerHTML = `${defaultContent}`;
-  }
-
-  transformToSecondary = (data):void => {
+  async connectedCallback(): void {
 
-    this.innerHTML = populateNav(data);
 
-    // Set links and details to secondary slot
-    Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
+    const nav = this.closest('iam-nav');
+    const mode = this.hasAttribute('data-mode') ? this.getAttribute('data-mode') : 'dev';
 
-      element.setAttribute('slot','secondary');
-    });
+    // if not an sso use load default from component
 
-    const defaultContent = this.innerHTML;
-    this.outerHTML = `${defaultContent}`;
-  }
+    if(!this.hasAttribute('data-sso-subject') || this.getAttribute('data-sso-subject') == 'false' || this.getAttribute('data-sso-subject') == false || this.getAttribute('data-sso-subject') == null){
 
-  async connectedCallback(): void {
+      if(this.hasAttribute('slot') && this.getAttribute('slot') == "secondary"){
 
-    const component = this;
-    this.wrapper = this.shadowRoot?.querySelector('.wrapper');
+        this.outerHTML = `<a href="https://my.iamproperty.com" slot="secondary">iamproperty</a>
+<a href="https://crm.iamproperty.com/MyDay" slot="secondary">CRM</a>
+<a href="https://my.iamproperty.com/ic/dashboard" slot="secondary">movebutler</a>
+<a href="https://my.iamproperty.com/auction" slot="secondary">iamsold</a>`;
 
-    if (!window.customElements.get(`iam-nav`))
-        window.customElements.define(`iam-nav`, iamNav);
-
-    if(this.hasAttribute('data-hub')){
-      this.defaultToNav();
-
-      this.querySelector('.nav--menu.js-show')?.classList.remove('js-show');
-    }
-    else {
-      //this.defaultToSecondary(); TODO: change this to show default content but still be able to update
+        document.querySelector(`a[href*='${window.location.hostname}'][slot="secondary"]`)?.classList.add('selected');
+      }
+      return;
     }
 
+    const data = await loadNavData(mode).then(
 
-    const data = await loadNavData(Cookies).then(
       (data) => {
 
         if(typeof data == 'string'){
@@ -93,26 +36,41 @@ class iamSTDNav extends HTMLElement {
           return data;
         }
 
-        //console.log(data);
-        if(this.hasAttribute('data-hub')){
+        if(!this.hasAttribute('slot')){ // This is the nav on the hub page
 
-          const filteredData = data.filter(section => section.attributes.title != "Learning and support");
+          const filteredData = data.filter(section => section.attributes.title != "Learning and support"); // Not needed for the hub page
+          this.closest('iam-nav').querySelectorAll(`:scope > *:not([slot]):not(iam-std-nav)`).forEach((element) => {
+            element.remove(); // Remove the default links
+          });
 
-          this.transformToNav(filteredData);
+          this.outerHTML = populateNav(filteredData);
         }
         else {
-          this.transformToSecondary(data);
+
+          this.closest('iam-nav').querySelectorAll(`:scope > *[slot="secondary"]:not(iam-std-nav):not(iam-branch-selector)`).forEach((element) => {
+            element.remove(); // Remove the default links
+          });
+
+          this.outerHTML = populateNav(data, 'secondary');
         }
 
         return true;
       }
     );
 
+    if(!this.hasAttribute('data-sso-subject') && !this.hasAttribute('data-product'))
+      return;
 
-    const userData = await loadUserData(Cookies).then(
+    const subject = this.getAttribute('data-sso-subject');
+    const product = this.getAttribute('data-product');
+
+    const userData = await loadUserData(mode, subject, product).then(
       (data) => {
 
-        setEnabledLinks(component,data);
+        if(!data.attributes)
+          return false;
+
+        setEnabledLinks(nav,data);
 
         Array.from(document.querySelectorAll('[data-variable]')).forEach((element) => {
 
@@ -122,7 +80,6 @@ class iamSTDNav extends HTMLElement {
 
         Array.from(document.querySelectorAll('[data-save-variable]')).forEach((element) => {
 
-          //console.log(element);
           if(data.attributes[element.getAttribute('data-save-variable')])
             element.setAttribute('data-variable-value', data.attributes[element.getAttribute('data-save-variable')]);
         });
@@ -131,9 +88,9 @@ class iamSTDNav extends HTMLElement {
       }
     );
 
-
   }
-
 }
 
+
+
 export default iamSTDNav;

package/assets/ts/modules/advanced-select.ts

@@ -26,7 +26,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   if(displayInputField.hasAttribute('placeholder'))
     displayInputField.setAttribute('data-original-placeholder', displayInputField.getAttribute('placeholder'));
 
-  
+
 
   const checkIfEmpty = (): void => {
 
@@ -40,13 +40,13 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     }
 
   };
-  
+
   checkIfEmpty();
 
   displayInputField.addEventListener('focus', function () {
-    
+
     if(displayInputField.value != ""){
-        
+
       displayInputField.setAttribute('placeholder', displayInputField.value);
       displayInputField.setAttribute('data-value', displayInputField.value);
     }
@@ -91,7 +91,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       }
 
       option.classList.add('active');
-      
+
       checkIfEmpty();
       setTimeout(() => {
         advancedSelect.dispatchEvent(new CustomEvent('update-value', {
@@ -108,7 +108,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   displayInputField.addEventListener('input', function () {
     displayInputField.removeAttribute('data-value');
     currentFocus = -1;
-    
+
     checkIfEmpty();
 
     if (advancedSelect.tagName != "IAM-ADDRESS-LOOKUP") {
@@ -129,7 +129,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   });
 
   advancedSelect.addEventListener('keydown', function (e) {
-    
+
     if (e.keyCode == 40) {
       currentFocus++;
       addActive(datalist.options);
@@ -161,6 +161,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   }
 
   // Add the empty button
+  /*
   if(displayInputField.closest('.input__wrapper')){
     displayInputField.closest('.input__wrapper').insertAdjacentHTML(
       'beforeend',
@@ -174,7 +175,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       '<button class="clear-search btn btn-action" type="button"><i class="fa-light fa-times me-0"></i></button>'
     );
   }
-
+  */
   const emptyField = (): void => {
     const originalInput = advancedSelect.querySelector('input[type="hidden"]') as HTMLInputElement | null;
 
@@ -187,8 +188,8 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
     if(displayInputField.hasAttribute('data-original-placeholder'))
       displayInputField.setAttribute('placeholder', displayInputField.getAttribute('data-original-placeholder'));
-    
-    
+
+
     displayInputField.removeAttribute('data-value');
     displayInputField.value = '';
     displayInputField.classList.add('empty');
@@ -210,7 +211,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       },
     }));
 
-    
+
     checkIfEmpty();
   }
 

package/assets/ts/modules/nav.test.ts

@@ -26,16 +26,19 @@ describe('Navigation module', () => {
       dataFeature: 'dashboard',
       dataEnabled: '/linked',
       href: '/sales',
+      title: 'Learn more',
       target: '_blank',
     });
     append(component, link);
 
     setEnabledLinks(component, {
-      attributes: { products: { sales: { features: { dashboard: true } } } },
+      attributes: { features: { sales: ['dashboard'] } },
     });
 
     expect(populateLinks(links).includes('data-product="sales"'));
+    expect(link.getAttribute('data-is-enabled') === 'true');
     expect(link.getAttribute('href') === '/linked');
     expect(!link.hasAttribute('target'));
+    expect(!link.hasAttribute('title'));
   });
 });

package/assets/ts/modules/nav.ts

@@ -1,43 +1,59 @@
-const navbar = (element): void => {
-  Array.from(element.querySelectorAll('details')).forEach((detail) => {
-    detail.addEventListener(
-      'mouseenter',
-      function () {
-        if (window.matchMedia('(min-width: 62em)').matches) detail.setAttribute('open', 'true');
-      },
-      false
-    );
-
-    detail.addEventListener(
-      'mouseleave',
-      function () {
-        if (window.matchMedia('(min-width: 62em)').matches) detail.removeAttribute('open');
-      },
-      false
-    );
-  });
-
-  if ('IntersectionObserver' in window) {
-    const observer = new IntersectionObserver(([e]) => e.target.classList.toggle('is-stuck', e.intersectionRatio < 1), {
-      threshold: [1],
-    });
-
-    observer.observe(element);
-  }
-};
-
-export const populateNav = (data):void => {
+export const navTemplate = /* HTML */`<div class="container">
+  <slot name="logo"></slot>
+
+  <div class="buttons-holder">
+    <button class="btn-menu" part="btn-menu-account" id="btn-menu-account">
+      <span class="btn btn-primary">
+        <span id="account-btn-title"></span>
+        <i class="fa-user fa-solid"></i>
+        <i class="fa-regular fa-xmark-large"></i>
+      </span>
+    </button>
+    <button class="btn-menu" part="btn-menu" id="btn-menu">
+      Menu
+      <i class="fa-regular fa-bars"></i>
+      <i class="fa-regular fa-xmark-large"></i>
+    </button>
+  </div>
+
+  <div class="menu__outer" part="menu__outer">
+    <div class="menu closed" part="menu">
+
+      <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>
+    <div class="nav--menu" part="nav--menu">
+      <slot name="account"></slot>
+    </div>
+  </div>
+</div>
+<div class="backdrop" part="backdrop"></div>`;
+
+// #region Standadised Nav
+export const populateNav = (data, slot = ''):void => {
 
   let html = ``;
 
   data.forEach((feature) => {
 
     if(feature.attributes.sections.length)
-      html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateSections(feature.attributes.sections)}</div></details>`;
+      html += `<details name="megamenu" ${slot != '' ? `slot="${slot}"` : ''}><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateSections(feature.attributes.sections)}</div></details>`;
     else if(feature.attributes.links)
-      html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateLinks(feature.attributes.links)}</div></details>`;
-    else 
-      html += `<a href="/">${feature.attributes.title}</a>`;
+      html += `<details name="megamenu" ${slot != '' ? `slot="${slot}"` : ''}><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateLinks(feature.attributes.links)}</div></details>`;
+    else
+      html += `<a href="/" ${slot != '' ? `slot="${slot}"` : ''}>${feature.attributes.title}</a>`;
   });
 
   return html;
@@ -51,7 +67,7 @@ export const populateSections = (data):void => {
 
     html += `<span class="section section--${section.layout}">
       ${section.title ? `<span class="lead section-title" data-product="${section.id}" data-title>${section.title}:</span>` : ''}
-      ${section.description ? `<span class="lead section-desc" data-product="${section.id}"><i class="fa-solid fa-sparkles colour-warning"></i> ${section.description}</span>` : ''}
+      ${section.description ? `<span class="lead section-desc text-body" data-product="${section.id}"><i class="fa-solid fa-rocket colour-warning"></i> ${section.description}</span>` : ''}
       ${populateLinks(section.links)}
     </span>`;
   });
@@ -65,32 +81,19 @@ export const populateLinks = (data):void => {
   data.forEach((link) => {
 
 
-    html += `<a href="${link.destinations.unlinked}" target="_blank" data-product="${link.productKey}" data-feature="${link.featureKey}" data-enabled="${link.destinations.linkedEnabled}" data-disabled="${link.destinations.linkedDisabled}">${link.title}</a>`;
+    html += `<a href="${link.destinations.unlinked}" title="Learn more about this features product" target="_blank" data-product="${link.productKey}" data-feature="${link.featureKey}" data-enabled="${link.destinations.linkedEnabled}" data-disabled="${link.destinations.linkedDisabled}">${link.title}</a>`;
 
   });
 
   return html;
 }
 
-export const loadNavData = async(Cookies): any => {
-
-  const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
+export const loadNavData = async(mode): any => {
 
-  //const ajaxURL = '/nav.json';
-
-  // Setup controller vars if not already set
-  if (!window.controller) window.controller = [];
-
-  // Abort if controller already present for this url
-  if (window.controller[ajaxURL]) window.controller[ajaxURL].abort();
-
-  // Create a new controller so it can be aborted if new fetch made
-  window.controller[ajaxURL] = new AbortController();
-  const { signal } = window.controller[ajaxURL];
+  const ajaxURL = mode != 'dev' ? 'https://hub.iamproperty.group/data/ecosystem-switcher.json' : 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
 
   try {
     const response = await fetch(ajaxURL, {
-      signal,
       method: 'GET',
       headers: {
         Accept: 'application/json',
@@ -109,27 +112,28 @@ export const loadNavData = async(Cookies): any => {
   }
 }
 
-export const loadUserData = async(Cookies): any => {
-
-  const ajaxURL = '/user.json';
-
-  // Setup controller vars if not already set
-  if (!window.controller) window.controller = [];
+export const loadUserData = async(mode, subject, product): any => {
 
-  // Abort if controller already present for this url
-  if (window.controller[ajaxURL]) window.controller[ajaxURL].abort();
-
-  // Create a new controller so it can be aborted if new fetch made
-  window.controller[ajaxURL] = new AbortController();
-  const { signal } = window.controller[ajaxURL];
+  const ajaxURL = mode != 'dev' ? 'https://api.sso.iamproperty.group/navigation/access-context' : 'https://api.dev.sso.iamproperty.group/navigation/access-context';
 
   try {
+
     const response = await fetch(ajaxURL, {
-      signal,
-      method: 'GET',
+      method: 'post',
       headers: {
-        Accept: 'application/json',
+        Accept: 'application/vnd.api+json',
+        'Content-Type': 'application/vnd.api+json'
       },
+      body: JSON.stringify({
+        "data": {
+          "type": "navigation-access-context-request",
+          "attributes": {
+            "subject": subject,
+            "requestingProduct": product,
+            "navigationSchemaVersion": "2026-04-16"
+          }
+        }
+      })
     });
 
     const json = await response.json();
@@ -146,23 +150,162 @@ export const loadUserData = async(Cookies): any => {
 
 export const setEnabledLinks = (component,data):void => {
 
-  const selector = `[data-product][data-feature]`;
-  const elements = component
-    ? [
-      ...component.querySelectorAll(selector),
-      ...(component.shadowRoot ? component.shadowRoot.querySelectorAll(selector) : []),
-    ]
-    : document.querySelectorAll(`iam-nav ${selector}`);
+  const elements = component.querySelectorAll('[data-product][data-feature]');
 
   elements.forEach((element) => {
-    const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
-    element.setAttribute('data-is-enabled',isEnabled);
-    if(isEnabled && element.getAttribute('data-enabled')){
-      element.setAttribute('href',element.getAttribute('data-enabled'));
-      element.removeAttribute('target');
+
+    if(data.attributes.features[element.getAttribute('data-product')]){
+
+      const isEnabled = data.attributes.features[element.getAttribute('data-product')].includes(element.getAttribute('data-feature'));
+
+      element.setAttribute('data-is-enabled',isEnabled);
+      if(isEnabled && element.getAttribute('data-enabled')){
+        element.setAttribute('href',element.getAttribute('data-enabled'));
+        element.removeAttribute('target');
+        element.removeAttribute('title');
+      }
+
+    }
+  });
+
+}
+// #endregion
+
+export const branchSelector = (component):void => {
+  const branchSelector = component.querySelector("iam-branch-selector");
+  const mql = window.matchMedia("(width > 62em)");
+
+  if (mql.matches)
+    branchSelector?.setAttribute('slot','secondary');
+
+  mql.addEventListener("change", (e) => {
+
+    if (e.matches && component.classList.contains('has-secondary'))
+      branchSelector?.setAttribute('slot','secondary');
+    else
+      branchSelector?.setAttribute('slot','account');
+  });
+}
+
+export const menuEvents = (component,menu,menuButton,accountMenu,accountMenuButton):void => {
+
+  menuButton.addEventListener ('click', (e) => {
+    e.preventDefault();
+
+    menu.classList.toggle('open');
+    accountMenu.classList.remove('open');
+
+
+    if (menu.classList.contains('open')) {
+      component.classList.add('open');
+    } else {
+      component.classList.remove('open');
     }
+
+    accountMenuButton?.querySelector('.btn-primary').classList.remove('active');
+    accountMenuButton?.removeAttribute('aria-expanded');
+
+    component.querySelector(':scope > details[open]')?.removeAttribute('open');
+
+  }, false);
+}
+
+export const megaMenuTitles = (component):void => {
+
+  // Mega menu title
+  component.querySelectorAll('details').forEach((detailsElement) => {
+    const summary = detailsElement.querySelector('summary');
+    const containerDiv = detailsElement.querySelector(':Scope > div');
+
+    if(containerDiv)
+      containerDiv.setAttribute('data-title', summary.textContent);
   });
+}
+
+export const megaMenusEvents = (component,menu,menuButton,accountMenu,accountMenuButton,backdrop):void => {
+
+  component.addEventListener('click', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
+
+      const summary = event.target.closest('summary');
+      const details = summary.closest('details');
+
+      if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {
+
+
+        if (details?.hasAttribute('open')) { // Is open before the user clicks on the details summary
+
+          backdrop.classList.remove('show');
+          component.classList.remove('open');
+          component.classList.remove('open-secondary');
+        } else {
+          backdrop.classList.add('show');
+          component.classList.add('open');
+
+          if(details?.hasAttribute('slot') && details?.getAttribute('slot') == "secondary")
+            component.classList.add('open-secondary');
+
+          // Open the first details element if one isn't open
+          if(!details.querySelector('details[open]') && details.querySelector('details'))
+            details.querySelector('details').setAttribute('open', true);
+        }
+
+        // Close all other siblings of details
+        details?.parentNode.querySelectorAll(':scope > details').forEach(element => {
 
+          if(element != details)
+            element.removeAttribute('open');
+        });
+
+
+        menu.classList.remove('open');
+        accountMenu.classList.remove('open');
+        accountMenuButton?.querySelector('.btn-primary').classList.remove('active');
+        menuButton?.removeAttribute('aria-expanded');
+        accountMenuButton?.removeAttribute('aria-expanded');
+      }
+    }
+  });
+}
+
+export const accountMenuEvents = (component,menu,menuButton,accountMenu,accountMenuButton,backdrop):void => {
+
+  accountMenuButton.addEventListener ('click', () => {
+
+    // Close the main menu
+    menu.classList.remove('open');
+    accountMenu.classList.toggle('open');
+
+    if (accountMenu.classList.contains('open')) {
+      component.classList.add('open');
+      accountMenuButton?.querySelector('.btn-primary').classList.add('active');
+      accountMenuButton?.setAttribute('aria-expanded', true);
+    } else {
+      component.classList.remove('open');
+      accountMenuButton?.querySelector('.btn-primary').classList.remove('active');
+      accountMenuButton?.removeAttribute('aria-expanded');
+    }
+
+    component.querySelector(':scope > details[open]')?.removeAttribute('open');
+    menuButton?.removeAttribute('aria-expanded');
+  });
 }
 
-export default navbar;
+export const backdropEvents = (component,menu,menuButton,accountMenu,accountMenuButton,backdrop):void => {
+
+  // Close the menu on the click of the backdrop on desktop
+  backdrop.addEventListener('click', () => {
+    const openMenu = component.querySelector(':scope > details[open]');
+
+    if (openMenu) openMenu.removeAttribute('open');
+
+    component.classList.remove('open');
+    menu.classList.remove('open');
+    menuButton?.removeAttribute('aria-expanded');
+    accountMenu.classList.remove('open');
+    accountMenuButton?.querySelector('.btn-primary').classList.remove('active');
+    accountMenuButton?.removeAttribute('aria-expanded');
+
+    backdrop.classList.remove('show');
+  });
+}