@iamproperty/components 7.7.1--beta16 → 7.7.1--beta18

package/assets/sass/components/nav.global.scss

@@ -119,7 +119,7 @@ nav:has(:is(iam-nav,.iam-nav)) {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100svw;
     z-index: var(--index-menu);
   }
 }
@@ -242,9 +242,52 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
     &[aria-current='page'] {
       text-decoration-color: var(--colour-info) !important;
     }
+
+    &[data-product][data-feature]:not([data-is-enabled="true"]) {
+      &:before {
+        content: "! ";
+      }
+    }
+
+    &[data-product][data-feature]:not([data-is-enabled="true"]) {
+      &:before {
+        content: "! ";
+      }
+    }
+
+  }
+
+  /* #region standard nav sections */
+  .section [data-title].section-title {
+
+    display: block;
+  }
+  .section [data-product].section-desc {
+
+    display: none;
+  }
+
+  .section:not(:has([data-product][data-feature][data-is-enabled="true"])):has([data-product].section-desc) {
+
+    [data-product].section-title {
+
+      display: none;
+    }
+    [data-product].section-desc {
+
+      display: block;
+    }
   }
 
+  .section:has([href="null"]):not(:has(a:not([href="null"]))){
 
+    display: none!important;
+  }
+
+  .section [href="null"]{
+    display: none!important;
+  }
+  /* #endregion */
 }
 
 @container style(--body-theme: dark) {
@@ -548,6 +591,10 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
         calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+      max-height: calc(100vh - var(--nav-height));
+      width: 100svw;
+      overflow: auto;
+      flex-wrap: wrap;
 
       .lead {
 
@@ -670,7 +717,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
         }
       } 
 
-      > span.section.double {
+      > span.section.section--double {
 
         display: block;
         width: calc(66.66% - 6.875rem);
@@ -744,7 +791,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
   nav:has(:is(iam-nav,.iam-nav).open) {
     min-height: 100vh !important;
     max-height: 100vh;
-    overflow: auto;
+    overflow: visible;
 
     margin-bottom: calc((100vh - var(--nav-height)) * -1);
   }
@@ -763,6 +810,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
       display: inline-block;
       margin-left: 1.5rem;
       margin-bottom: 0!important;
+      font-size: 1rem;
 
       &:after {
         display: none;
@@ -785,6 +833,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
       .lead {
         --colour-heading: var(--colour-body);
+        color: var(--colour-body);
         font-size: 0.87rem !important;
         line-height: 1.5rem !important;
         margin: 0;
@@ -794,7 +843,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
         width: 0;
       }
 
-      .section + .section {
+      .section:has(a:not([href=null])) + .section {
         border-top: 1px solid var(--colour-border);
         display: block;
         padding-top: 0.5rem;
@@ -991,7 +1040,7 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
   }
 
   &.closed * {
-    display: none !important;
+    //display: none !important;
   }
 }
 

package/assets/sass/elements/type.css

@@ -38,12 +38,42 @@
     max-width: var(--content-max-width);
   }
 
-  :is(.h4, h4, .h5, h5, .h6, h6) {
+  :is(h4, h5, h6) {
     font-size: var(--h4-fs);
     line-height: var(--h4-lh);
     padding-bottom: var(--h4-pb);
     max-width: var(--content-max-width);
   }
+
+  .h1 {
+    font-size: var(--h1-fs);
+    line-height: var(--h1-lh);
+    padding-bottom: var(--h1-pb);
+    font-weight: 900;
+  }
+
+  .h2 {
+    font-size: var(--h2-fs);
+    line-height: var(--h2-lh);
+    padding-bottom: var(--h2-pb);
+    font-weight: 900;
+  }
+
+  .h3 {
+    font-size: var(--h3-fs);
+    line-height: var(--h3-lh);
+    padding-bottom: var(--h3-pb);
+    max-width: var(--content-max-width);
+  }
+
+  :is(.h4, .h5, .h6) {
+    font-size: var(--h4-fs);
+    line-height: var(--h4-lh);
+    padding-bottom: var(--h4-pb);
+    max-width: var(--content-max-width);
+  }
+
+
   /* #endregion */
 
   p {

package/assets/sass/utilities/colours.scss

@@ -39,6 +39,9 @@
   }
 
   .text-body {
-    color: var(--colour-body);
+    color: var(--colour-body) !important;
+  }
+  .text-muted {
+    color: var(--colour-muted) !important;
   }
 }

package/assets/ts/components/card/card.component.ts

@@ -22,6 +22,7 @@ class iamCard extends HTMLElement {
     ${loadCSS}
     </style>
     ${cardHTML}
+    <slot name="link"></slot>
     <slot name="primary-action"></slot>
     `;
 

package/assets/ts/components/content/content.component.ts

@@ -20,7 +20,7 @@ class iamContent extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  addTitle = (title) => {
+  addTitle = (title):void => {
 
     if(this.hasAttribute('data-title-tag')){
 
@@ -30,6 +30,37 @@ class iamContent extends HTMLElement {
     return '';
   }
 
+  fixContent = (component):void => {
+
+    const transform = component.getAttribute('data-transform');
+    let wrapper = component;
+
+    if(transform){
+
+      component.querySelectorAll(`${transform} > *:empty`).forEach((element) => {
+        element.remove();
+      });
+
+      wrapper = component.querySelector(`${transform}`);
+    }
+    else {
+
+      component.querySelectorAll(`:scope > *:empty`).forEach((element) => {
+        element.remove();
+      });
+    }
+    
+    const itemClass = component.getAttribute('data-items-class');
+
+    if(itemClass){
+        
+      wrapper.querySelectorAll(`:scope > *`).forEach((element) => {
+        element.classList.add(itemClass);
+      });
+    }
+
+  }
+
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const component = this;
@@ -37,6 +68,8 @@ class iamContent extends HTMLElement {
 
     const transform = this.getAttribute('data-transform');
 
+    const fixContent = this.fixContent;
+
     let elementAttributes = '';
 
 
@@ -82,18 +115,26 @@ class iamContent extends HTMLElement {
 
       newXHRRequest.onload = function (): void {
         if (this.status === 200) {
-          const response = JSON.parse(this.responseText);
+          let response = JSON.parse(this.responseText);
+
+          if(Array.isArray(response))
+            response = response[0];
 
           component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
           
+
           if(transform){
           
             component.innerHTML = `<${transform} ${elementAttributes}>${response.content.rendered}</${transform}>`;  
             component.removeAttribute('class');
           }
-          else
+          else {
+            
             component.innerHTML = `${response.content.rendered}`;
-
+            console.log(response.content);
+          }
+            
+          fixContent(component);
           registerComponents(component);
         }
       };

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

@@ -49,14 +49,14 @@ class iamModal extends HTMLElement {
     const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : this.shadowRoot?.querySelector('[data-agreed]');
     const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';
 
-    const agreed = () => {
+    const agreed = (close = true) => {
       const agreedEvent = new CustomEvent('agreed', {
         detail: { modalId: id },
       });
 
       this.dispatchEvent(agreedEvent);
 
-      if(!this.querySelector(':invalid'))
+      if(!this.querySelector(':invalid') && close)
         closeModal(this);
     }
 
@@ -131,7 +131,7 @@ class iamModal extends HTMLElement {
         closeModal(this);
       }
       else {
-        agreed();
+        agreed(false);
       }
     });
 

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

@@ -20,7 +20,6 @@ class iamNav extends HTMLElement {
     template.innerHTML = `
     <style class="styles">
 
-    
     ${loadCSS}
     </style>
     <style class="doc-styles">

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

@@ -1,4 +1,5 @@
 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
@@ -8,134 +9,37 @@ declare global {
   }
 }
 
-
 class iamSTDNav extends HTMLElement {
   constructor() {
     super();
   }
 
-  loadNavData = async(): 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];
-
-    try {
-      return await fetch(ajaxURL, {
-        signal: signal,
-        method: 'get',
-        credentials: 'same-origin',
-        headers: new Headers({
-          'Content-Type': 'application/json',
-          Accept: 'application/json',
-          'X-Requested-With': 'XMLHttpRequest',
-          'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
-        }),
-      })
-      .then((response) => response.json())
-      .then((response) => {
-        // populate datalist
-        let listString = '';
-
-        const data = response['data'] ? response['data'] : response;
-
-
-        return data;
-      });
-    } catch (error) {
-      if (error?.name === 'AbortError') {
-        return true;
-      }
-      console.log(error);
-      return 'There has been a problem. Please try again in a few moments.';
-    }
-  }
-
-  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}`;
-  }
-
   defaultToNav = ():void => {
 
     const defaultContent = this.innerHTML;
     this.innerHTML = `<iam-nav>
-    ${defaultContent} 
+    ${defaultContent}
     </iam-nav>`;
   }
 
-  defaultToStandalone = ():void => {
-    const defaultContent = this.innerHTML;
-    this.wrapper.innerHTML = `<div class="container">${defaultContent}</div>`;
-  }
-
-  populateLinks = (data):void => {
-
-    let html = ``;
-
-    data.forEach((link) => {
-
-    html += `
-      <a href="${link.url}">${link.title}</a>`;
-
-    });
-
-    return html;
-  }
-
-  populateSections = (data):void => {
-
-    let html = ``;
-
-    data.forEach((section) => {
+  transformToNav = (data):void => {
+    
+    // Remove current links
+    this.querySelector('iam-nav').querySelectorAll(`:scope > *`).forEach((element) => {
 
-      html += `<span class="section ${section.class}">
-        <span class="lead text-heading d-block">${section.enabled == "false" && section.marketing ? section.marketing : section.title}</span>
-        ${this.populateLinks(section.links)}
-      </span>`;
+      if(!element.hasAttribute('slot'))
+        element.remove();
     });
 
+    const defaultContent = this.querySelector('iam-nav').innerHTML;
 
-
-
-    return html;
-  }
-
-  populateNav = (data):void => {
-
-    let html = ``;
-
-    data.forEach((feature) => {
-
-      if(feature.attributes.sections)
-        html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${this.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}">${this.populateLinks(feature.attributes.links)}</div></details>`;
-      else 
-        html += `<a href="/">${feature.attributes.title}</a>`;
-    });
-
-    return html;
+    this.innerHTML = `<iam-nav ${(this.hasAttribute('class') ? `class="${this.getAttribute('class')}"`:'')}>
+    ${defaultContent}
+    ${populateNav(data)}
+    </iam-nav>`;
   }
 
-  transformToSecondary = (data):void => {
-
-    this.innerHTML = this.populateNav(data);
+  defaultToSecondary = (): void => {
 
     // Set links and details to secondary slot
     Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
@@ -147,50 +51,40 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-  transformToStandalone = (data):void => {
+  transformToSecondary = (data):void => {
+
+    this.innerHTML = populateNav(data);
 
-    this.wrapper.innerHTML = `<div class="container"><details><summary>Products</summary><div class="iam-nav">${this.populateNav(data)}</div></details></div>`;
-  
     // Set links and details to secondary slot
-    Array.from(this.wrapper.querySelectorAll('.iam-nav > a, .iam-nav > details')).forEach((element) => {
+    Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
 
       element.setAttribute('slot','secondary');
     });
 
-  }
-
-  transformToNav = (data):void => {
-    this.innerHTML = `<iam-nav>
-    <a href="/" class="brand brand--property" slot="logo">
-      <svg>
-        <title>iam key</title>
-        <use xlink:href="/svg/logo.svg#logo-property"></use>
-      </svg>
-    </a>
-    ${this.populateNav(data)}
-    </iam-nav>`;
+    const defaultContent = this.innerHTML;
+    this.outerHTML = `${defaultContent}`;
   }
 
   async connectedCallback(): void {
     
+    const component = this;
     this.wrapper = this.shadowRoot?.querySelector('.wrapper');
 
     if (!window.customElements.get(`iam-nav`))
         window.customElements.define(`iam-nav`, iamNav);
-
-
+    
     if(this.hasAttribute('data-hub')){
       this.defaultToNav();
     }
-    else if (!this.closest('iam-nav')){
-      this.defaultToStandalone();
-    }
     else {
       //this.defaultToSecondary(); TODO: change this to show default content but still be able to update
     }
 
-    const data = await this.loadNavData().then(
+
+    const data = await loadNavData(Cookies).then(
       (data) => {
+
+
         if(typeof data == 'string'){
           
           return data;
@@ -200,36 +94,24 @@ class iamSTDNav extends HTMLElement {
         if(this.hasAttribute('data-hub')){
           this.transformToNav(data);
         }
-        else if(!this.closest('iam-nav')){
-          this.transformToStandalone(data);
-        }
         else {
           this.transformToSecondary(data);
-          //this.transformToNav(data);
         }
 
         return true;
       }
     );
 
-  }
-
-  static get observedAttributes(): any {
-    return [];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    const addressComponent = this.querySelector('iam-address-lookup');
+    const userData = await loadUserData(Cookies).then(
+      (data) => {
 
-    switch (attrName) {
-      case 'data-url': {
-        if (oldVal != newVal && addressComponent) {
-          addressComponent.setAttribute('data-url', newVal + '?search_string=');
-        }
-        break;
+        setEnabledLinks(component,data);
+        return true;
       }
-    }
+    );
+
   }
+
 }
 
 export default iamSTDNav;

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

@@ -1,4 +1,4 @@
-import {populateNav,loadNavData} from '../../modules/nav';
+import {populateNav,loadNavData,loadUserData,setEnabledLinks} from '../../modules/nav';
 import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
 
 // Data layer Web component created
@@ -55,6 +55,7 @@ class iamSTDNavStandalone extends HTMLElement {
 
   async connectedCallback(): void {
     
+    const component = this;
     this.wrapper = this.shadowRoot?.querySelector('.wrapper');
     this.defaultToStandalone();
     
@@ -70,6 +71,14 @@ class iamSTDNavStandalone extends HTMLElement {
         return true;
       }
     );
+
+    const userData = await loadUserData(Cookies).then(
+      (data) => {
+
+        setEnabledLinks(component,data);
+        return true;
+      }
+    );
   }
 }