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

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;

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