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

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,15 +30,57 @@ 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;
     const url = this.getAttribute('data-url');
 
+    const transform = this.getAttribute('data-transform');
+
+    const fixContent = this.fixContent;
+
+    let elementAttributes = '';
+
+
+    for (const attr of this.attributes) {
+      elementAttributes += `${attr.name}="${attr.value}" `;
+    }
+
     const addTitle = this.addTitle;
 
     const registerComponents = (contentComponent): void => {
-      const components = ['card', 'marketing', 'notification'];
+      const components = ['carousel', 'card', 'marketing', 'notification'];
 
       const assetLocation = document.body.hasAttribute('data-assets-location')
         ? document.body.getAttribute('data-assets-location')
@@ -73,11 +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);
 
-          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
-          component.innerHTML = `${response.content.rendered}`;
+          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 {
+            
+            component.innerHTML = `${response.content.rendered}`;
+            console.log(response.content);
+          }
+            
+          fixContent(component);
           registerComponents(component);
         }
       };

package/assets/ts/components/menu/menu.component.ts

@@ -21,6 +21,10 @@ class iamMenu extends HTMLElement {
   }
 
   connectedCallback(): void {
+
+    this.classList.add('dropdown');
+
+    
     const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
     const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
 

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">
@@ -181,12 +180,6 @@ class iamNav extends HTMLElement {
       menu.classList.add('has-secondary');
     }
 
-    // Create a scroll width variable to help with the sizing of the menu with in the CSS
-    document.documentElement.style.setProperty(
-      '--scrollbar-width',
-      window.innerWidth - document.documentElement.offsetWidth + 'px'
-    );
-
     // Open and close the menu
     menuButton.addEventListener(
       'click',
@@ -279,9 +272,13 @@ class iamNav extends HTMLElement {
           if (this.querySelectorAll(':scope > details[open]').length) {
             backdrop.classList.add('show');
             iamNav.classList.add('open');
+
+            if(this.querySelectorAll(':scope > details[open][slot="secondary"]').length)
+              iamNav.classList.add('open-secondary');
           } else {
             backdrop.classList.remove('show');
             iamNav.classList.remove('open');
+            iamNav.classList.remove('open-secondary');
           }
 
           event.preventDefault();

package/assets/ts/components/search/search.component.ts

@@ -18,29 +18,29 @@ class iamSearch extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
+    const loadCSS = `@import "${assetLocation}/css/components/search.component.css";`;
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    input {
-      background: red;
-    }
-    input:not(.is-invalid):not(:invalid) {
-      background: none!important;
-    }
-    .optional-text {
-      display: none;
-    } 
-    .js-hide {
-      display: none !important;
-    }
+    ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <slot></slot>
+    <span class="wrapper"><span class="input__wrapper"><slot></slot></span><span class="suffix fa-regular fa-search"></span></span>
+    <slot name="datalist"></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   async connectedCallback(): void {
+
+    // Make the datalist a dropdown
+    this.classList.add('dropdown__wrapper');
+
+    
+    if(this.querySelector('label'))
+      this.classList.add('has-label');
+
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const searchWrapper = this;
     const inputField = this.querySelector('input');

package/assets/ts/components/split-button/split-button.component.ts

@@ -25,7 +25,7 @@ class iamSplitButton extends HTMLElement {
     </style>
     <div class="split-button">
       <slot></slot>
-      <div class="dropdown">
+      <div class="menu__wrapper">
         <button class="btn btn-split" part="dropdown" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions">
           <i class="fa fa-angle-down fa-light"></i>
         </button>

package/assets/ts/components/std-address-lookup/std-address-lookup.component.ts

@@ -1537,7 +1537,6 @@ export const regions = [
   }
 ];
 
-
 let countriesString = '';
 
 countries.forEach((country) => {

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,60 +9,37 @@ declare global {
   }
 }
 
-
 class iamSTDNav extends HTMLElement {
   constructor() {
     super();
-    
   }
 
+  defaultToNav = ():void => {
 
-  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];
+    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 = () => {
+  defaultToSecondary = (): void => {
 
     // Set links and details to secondary slot
     Array.from(this.querySelectorAll(':scope > a, :scope > details')).forEach((element) => {
@@ -73,29 +51,11 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-  defaultToNav = () => {
-
-    const defaultContent = this.innerHTML;
-    this.innerHTML = `<iam-nav>
-    ${defaultContent} 
-    </iam-nav>`;
-  }
-
-  populateNav = (data):void => {
-
-    let html = ``;
 
-    data.forEach((feature) => {
 
-      html += `<a href="/">${feature.attributes.title}</a>`;
-    });
+  transformToSecondary = (data):void => {
 
-    return html;
-  }
-
-  transformToSecondary = (data) => {
-
-    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) => {
@@ -107,73 +67,53 @@ class iamSTDNav extends HTMLElement {
     this.outerHTML = `${defaultContent}`;
   }
 
-  transformToNav = (data) => {
-    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)}
-    <button class="btn btn-primary fa-user" data-modal="modal-transactional" slot="actions">My account</button>
-    </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.closest('iam-nav')){
+    
+    if(this.hasAttribute('data-hub')){
       this.defaultToNav();
     }
+    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'){
           
-          if(this.closest('iam-nav')){
-            this.defaultToSecondary();
-          }
-          
           return data;
         }
 
-        console.log(data);
-
-        if(this.closest('iam-nav')){
-          this.transformToSecondary(data);
+        //console.log(data);
+        if(this.hasAttribute('data-hub')){
+          this.transformToNav(data);
         }
         else {
-
-          this.transformToNav(data);
+          this.transformToSecondary(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

@@ -0,0 +1,85 @@
+import {populateNav,loadNavData,loadUserData,setEnabledLinks} from '../../modules/nav';
+import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
+
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+
+class iamSTDNavStandalone extends HTMLElement {
+  constructor() {
+    super();
+    
+    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/std-nav-standalone.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style id="styles">
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    <div class="backdrop" part="backdrop"></div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  defaultToStandalone = ():void => {
+    const defaultContent = this.innerHTML;
+    this.wrapper.innerHTML = `<div class="container">${defaultContent}</div>`;
+  }
+
+  transformToStandalone = (data):void => {
+
+    this.wrapper.innerHTML = `<div class="container"><details><summary>Products</summary><div class="iam-nav">${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');
+    });
+
+  }
+
+  async connectedCallback(): void {
+    
+    const component = this;
+    this.wrapper = this.shadowRoot?.querySelector('.wrapper');
+    this.defaultToStandalone();
+    
+    const data = await loadNavData(Cookies).then(
+      (data) => {
+        if(typeof data == 'string'){
+          
+          return data;
+        }
+
+        this.transformToStandalone(data);
+
+        return true;
+      }
+    );
+
+    const userData = await loadUserData(Cookies).then(
+      (data) => {
+
+        setEnabledLinks(component,data);
+        return true;
+      }
+    );
+  }
+}
+
+export default iamSTDNavStandalone;

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

@@ -3,6 +3,15 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
 
   const datalistWrapper = datalist.closest('.datalist__wrapper') ? datalist.closest('.datalist__wrapper') : datalist;
 
+  datalistWrapper.setAttribute('slot','datalist');
+
+  if(advancedSelect.querySelector('.suffix')){
+    advancedSelect.querySelector('.suffix')?.setAttribute('slot','suffix');
+    advancedSelect.shadowRoot.querySelector('.suffix')?.innerHTML = '<slot name="suffix"></slot>';
+    advancedSelect.shadowRoot.querySelector('.suffix')?.classList = "";
+  }
+
+
   // Hide the default datalist
   displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
   displayInputField.setAttribute('list', '');
@@ -13,6 +22,23 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   if(displayInputField.hasAttribute('placeholder'))
     displayInputField.setAttribute('data-original-placeholder', displayInputField.getAttribute('placeholder'));
 
+  
+
+  const checkIfEmpty = (): void => {
+
+    if(displayInputField.value == ""){
+      advancedSelect.classList.add('has-empty-input');
+      displayInputField.classList.add('empty');
+    }
+    else {
+      advancedSelect.classList.remove('has-empty-input');
+      displayInputField.classList.remove('empty');
+    }
+
+  };
+  
+  checkIfEmpty();
+
   displayInputField.addEventListener('focus', function () {
     
     if(displayInputField.value != ""){
@@ -61,7 +87,8 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       }
 
       option.classList.add('active');
-
+      
+      checkIfEmpty();
       setTimeout(() => {
         advancedSelect.dispatchEvent(new CustomEvent('update-value', {
           detail: {
@@ -73,9 +100,12 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     }
   });
 
+
   displayInputField.addEventListener('input', function () {
     displayInputField.removeAttribute('data-value');
     currentFocus = -1;
+    
+    checkIfEmpty();
 
     if (advancedSelect.tagName != "IAM-ADDRESS-LOOKUP") {
       const text = displayInputField.value.toUpperCase();
@@ -127,13 +157,19 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   }
 
   // Add the empty button
-  displayInputField
-    .closest('label')
-    .insertAdjacentHTML(
+  if(displayInputField.closest('.input__wrapper')){
+    displayInputField.closest('.input__wrapper').insertAdjacentHTML(
       'beforeend',
-      '<button class="empty btn btn-action" type="button"><i class="fa-light fa-times me-0"></i></button>'
+      '<button class="clear-search btn btn-action" type="button"><i class="fa-light fa-times me-0"></i></button>'
     );
-
+  }
+  else if(advancedSelect.shadowRoot.querySelector('.input__wrapper')){
+    console.log(advancedSelect.shadowRoot.querySelector('.input__wrapper'));
+    advancedSelect.shadowRoot.querySelector('.input__wrapper').insertAdjacentHTML(
+      'beforeend',
+      '<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;
@@ -151,6 +187,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     
     displayInputField.removeAttribute('data-value');
     displayInputField.value = '';
+    displayInputField.classList.add('empty');
 
     for (const optionInner of datalist.options) {
       optionInner.classList.remove('active');
@@ -168,9 +205,12 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
         text: '',
       },
     }));
+
+    
+    checkIfEmpty();
   }
 
-  const closeBtn = advancedSelect.querySelector('.empty') ? advancedSelect.querySelector('.empty') : advancedSelect.shadowRoot.querySelector('.empty');
+  const closeBtn = advancedSelect.querySelector('.clear-search') ? advancedSelect.querySelector('.clear-search') : advancedSelect.shadowRoot.querySelector('.clear-search');
 
   closeBtn.addEventListener('click', function (e) {
 

package/assets/ts/modules/card.module.ts

@@ -1,17 +1,19 @@
-export const cardHTML = `<div class="card__head" part="head">
-  <slot name="head"></slot>
-</div>
-<div class="card__badges"><slot name="badges"></slot></div>
-<slot name="checkbox" class="activate-prevent-hover"></slot>
-<div class="card__body" part="body">
-  <slot></slot>
-  <slot name="secondary" part="secondary"></slot>
-</div>
-<div class="card__details" part="details">
-  <slot name="details"></slot>
-</div>
-<div class="card__footer" part="footer">
-  <slot name="footer"></slot>
+export const cardHTML = `<div class="wrapper">
+  <div class="card__head" part="head">
+    <slot name="head"></slot>
+  </div>
+  <div class="card__badges"><slot name="badges"></slot></div>
+  <slot name="checkbox" class="activate-prevent-hover"></slot>
+  <div class="card__body" part="body">
+    <slot></slot>
+    <slot name="secondary" part="secondary"></slot>
+  </div>
+  <div class="card__details" part="details">
+    <slot name="details"></slot>
+  </div>
+  <div class="card__footer" part="footer">
+    <slot name="footer"></slot>
+  </div>
 </div>`;
 
 export const setupCard = (cardComponent: any): void => {