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

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

@@ -0,0 +1,235 @@
+import Cookies from '../../../../node_modules/js-cookie/dist/js.cookie.mjs';
+import iamNav from '../nav/nav.component';
+
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+
+
+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} 
+    </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);
+
+    // 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}`;
+  }
+
+  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 {
+    
+    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(
+      (data) => {
+        if(typeof data == 'string'){
+          
+          return data;
+        }
+
+        //console.log(data);
+        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');
+
+    switch (attrName) {
+      case 'data-url': {
+        if (oldVal != newVal && addressComponent) {
+          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+        }
+        break;
+      }
+    }
+  }
+}
+
+export default iamSTDNav;

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

@@ -0,0 +1,76 @@
+import {populateNav,loadNavData} 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 {
+    
+    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;
+      }
+    );
+  }
+}
+
+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 => {

package/assets/ts/modules/carousel.ts

@@ -1,7 +1,7 @@
 export const generateThumbnailList = function (carouselComponent): any {
   const thumbnailImages = [];
 
-  Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+  Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
     if (slide.hasAttribute('data-thumbnail')) {
       thumbnailImages[index] = slide.getAttribute('data-thumbnail');
     }
@@ -11,7 +11,7 @@ export const generateThumbnailList = function (carouselComponent): any {
 };
 
 export const generatePipsHTML = function (carouselComponent, thumbnailImages): string {
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
 
   let pips = '';
   for (let i = 1; i <= itemCount; i++) {
@@ -53,9 +53,9 @@ export const carousel = function (carouselComponent): void {
   const carouselInner = carouselElement.querySelector('.carousel__inner');
   const carouselControls = carouselElement.querySelector('.carousel__controls');
   const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
   let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
   let visibleItems = Math.round(scrollArea / itemWidth);
 
   carouselProgress.setAttribute('min', 1);
@@ -90,8 +90,8 @@ export const carousel = function (carouselComponent): void {
         const scrollLeft = carouselInner.scrollLeft;
         let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
 
-        const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
-        const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
+        const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
+        const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
         //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
         const lastItemInView =
           carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
@@ -176,11 +176,11 @@ export const carousel = function (carouselComponent): void {
     function (e) {
       const scrollArea = carouselInner.clientWidth;
       //const scrollWidth = carouselInner.scrollWidth;
-      const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
 
       const visibleItems = Math.round(scrollArea / itemWidth);
 
-      const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
+      const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
       const lastItemInView =
         carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
 
@@ -229,7 +229,7 @@ export const carousel = function (carouselComponent): void {
     clearInterval(stepperInterval);
     stepperInterval = setInterval(function () {
       scrollArea = carouselInner.clientWidth;
-      itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
       visibleItems = Math.round(scrollArea / itemWidth);
       carouselProgress.setAttribute('step', visibleItems);
       progressMax = getProgressMax(itemCount, visibleItems);
@@ -276,10 +276,10 @@ export const updateCarousel = function (carouselComponent): void {
   const carouselInner = carouselElement.querySelector('.carousel__inner');
   const carouselControls = carouselElement.querySelector('.carousel__controls');
   const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
 
   let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
   let visibleItems = Math.round(scrollArea / itemWidth);
 
   carouselProgress.setAttribute('min', 1);

package/assets/ts/modules/nav.ts

@@ -26,4 +26,95 @@ const navbar = (element): void => {
   }
 };
 
+export const 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}">${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>`;
+  });
+
+  return html;
+}
+
+export const 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>
+      ${populateLinks(section.links)}
+    </span>`;
+  });
+  return html;
+}
+
+export const populateLinks = (data):void => {
+
+  let html = ``;
+
+  data.forEach((link) => {
+
+  html += `
+    <a href="${link.url}">${link.title}</a>`;
+
+  });
+
+  return html;
+}
+
+export const loadNavData = async(Cookies): 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.';
+  }
+}
+
+
 export default navbar;

package/assets/ts/modules/tabs.ts

@@ -162,6 +162,13 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
     });
   });
 
+  details.forEach((detailsElement, index) => {
+    detailsElement.addEventListener("toggle", function() {
+      if(detailsElement.open)
+        detailsElement.querySelector('button,input')?.focus();
+    });
+  });
+
   nextButton?.addEventListener('click', (e) => {
     e.preventDefault();
 
@@ -213,7 +220,9 @@ export const toggleTab = function (details: Array, button: Element): boolean | v
   details.forEach((detail, detailsIndex) => {
     const detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
 
-    if (detailsOpen) detail.setAttribute('open', detailsOpen);
+    if (detailsOpen) {
+      detail.setAttribute('open', detailsOpen);
+    }
     else detail.removeAttribute('open');
   });
 };