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

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');
+  });
+}