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

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,55 +9,34 @@ 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();
+  defaultToNav = ():void => {
 
-    // Create a new controller so it can be aborted if new fetch made
-    window.controller[ajaxURL] = new AbortController();
-    const { signal } = window.controller[ajaxURL];
+    const defaultContent = this.innerHTML;
+    this.innerHTML = `<iam-nav>
+    ${defaultContent}
+    </iam-nav>`;
+  }
 
-    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 = '';
+  transformToNav = (data):void => {
+    
+    // Remove current links
+    this.querySelector('iam-nav').querySelectorAll(`:scope > *`).forEach((element) => {
 
-        const data = response['data'] ? response['data'] : response;
+      if(!element.hasAttribute('slot'))
+        element.remove();
+    });
 
+    const defaultContent = this.querySelector('iam-nav').innerHTML;
 
-        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.';
-    }
+    this.innerHTML = `<iam-nav ${(this.hasAttribute('class') ? `class="${this.getAttribute('class')}"`:'')}>
+    ${defaultContent}
+    ${populateNav(data)}
+    </iam-nav>`;
   }
 
   defaultToSecondary = (): void => {
@@ -71,71 +51,11 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-  defaultToNav = ():void => {
 
-    const defaultContent = this.innerHTML;
-    this.innerHTML = `<iam-nav>
-    ${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) => {
-
-      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>`;
-    });
-
-
-
-
-    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;
-  }
 
   transformToSecondary = (data):void => {
 
-    this.innerHTML = this.populateNav(data);
+    this.innerHTML = populateNav(data);
 
     // Set links and details to secondary slot
     Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
@@ -147,50 +67,26 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-  transformToStandalone = (data):void => {
-
-    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) => {
-
-      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>`;
-  }
-
   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 +96,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;
+      }
+    );
   }
 }
 

package/assets/ts/modules/nav.ts

@@ -32,7 +32,7 @@ export const populateNav = (data):void => {
 
   data.forEach((feature) => {
 
-    if(feature.attributes.sections)
+    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>`;
     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>`;
@@ -49,8 +49,9 @@ export const populateSections = (data):void => {
 
   data.forEach((section) => {
 
-    html += `<span class="section ${section.class}">
-      <span class="lead text-heading d-block">${section.enabled == "false" && section.marketing ? section.marketing : section.title}</span>
+    html += `<span class="section section--${section.layout}">
+      ${section.title ? `<span class="lead text-heading section-title" data-product="${section.id}" data-title>${section.title}</span>` : ''}
+      ${section.description ? `<span class="lead section-desc" data-product="${section.id}">! ${section.description}</span>` : ''}
       ${populateLinks(section.links)}
     </span>`;
   });
@@ -63,8 +64,8 @@ export const populateLinks = (data):void => {
 
   data.forEach((link) => {
 
-  html += `
-    <a href="${link.url}">${link.title}</a>`;
+
+    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>`;
 
   });
 
@@ -73,6 +74,7 @@ export const populateLinks = (data):void => {
 
 export const loadNavData = async(Cookies): any => {
 
+  //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
   const ajaxURL = '/nav.json';
 
   // Setup controller vars if not already set
@@ -86,27 +88,52 @@ export const loadNavData = async(Cookies): any => {
   const { signal } = window.controller[ajaxURL];
 
   try {
-    return await fetch(ajaxURL, {
-      signal: signal,
-      method: 'get',
-      credentials: 'same-origin',
-      headers: new Headers({
-        'Content-Type': 'application/json',
+    const response = await fetch(ajaxURL, {
+      signal,
+      method: 'GET',
+      headers: {
         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 json = await response.json();
+    const data = json.data ? json.data : json;
+    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.';
+  }
+}
+
+export const loadUserData = async(Cookies): any => {
+
+  const ajaxURL = '/user.json';
+
+  // Setup controller vars if not already set
+  if (!window.controller) window.controller = [];
 
-      const data = response['data'] ? response['data'] : response;
+  // 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];
 
-      return data;
+  try {
+    const response = await fetch(ajaxURL, {
+      signal,
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
     });
+
+    const json = await response.json();
+    const data = json.data ? json.data : json;
+    return data;
   } catch (error) {
     if (error?.name === 'AbortError') {
       return true;
@@ -116,5 +143,22 @@ export const loadNavData = async(Cookies): any => {
   }
 }
 
+export const setEnabledLinks = (component,data):void => {
+
+  console.log(data);
+
+
+
+  
+  component.querySelectorAll(`[data-product][data-feature]`).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');
+    }
+  });
+
+}
 
 export default navbar;