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

package/assets/sass/elements/type.css

@@ -59,6 +59,16 @@
     padding-bottom: 1.5rem;
   }
 
+  /* #region CMS support */
+  p:empty {
+    display: none;
+  }
+
+  p:has(a:first-child:last-child){
+    /* display: contents; */
+  }
+  /* #endregion */
+
   :is(.lead, .strapline) {
     font-size: 1.125rem; /* 18/16 */
     line-height: 1.75rem; /* 28/16 */

package/assets/sass/foundations/colours.scss

@@ -29,7 +29,6 @@
         
       --colour-heading: var(--colour-white);
       --colour-body: var(--colour-white);
-      --colour-underline: var(--colour-white);
       color: var(--colour-white);
     }
     

package/assets/sass/foundations/root.scss

@@ -70,7 +70,7 @@
     --colour-activeLink: light-dark(#e8f9fd,#173c45);
     --colour-activeLinkBorder: light-dark(#1dbde6,#1dbde6);
 
-    --colour-underline: var(--colour-secondary-theme);
+    --colour-underline: light-dark(#b4e6a5, #fcfcfc);
     --colour-selected: var(--colour-info-theme);
 
     --colour-inverted: #fcfcfc;

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

@@ -0,0 +1,66 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'button',
+});
+
+class iamButton 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/button.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const button = this.querySelector('button');
+    let originalHTML = '';
+    
+    if(!button)
+      return false;
+
+    button?.addEventListener('click', (event) => {
+
+      if(this.hasAttribute('data-copy-text')){
+        navigator.clipboard.writeText(this.getAttribute('data-copy-text'));
+
+        originalHTML = button.innerHTML;
+        button.innerHTML = originalHTML.toLowerCase().includes('copy') ? originalHTML.replace('Copy','Copied').replace('copy','copied') : 'Copied';
+        button.classList.add('pressed');
+        button.classList.add('active');
+        button.blur();
+
+        setTimeout(() => {
+          button.innerHTML = originalHTML;
+          originalHTML = '';
+          button.classList.remove('pressed');
+          button.classList.remove('active');
+        }, 1500);
+      }
+    });
+    
+  }
+}
+
+export default iamButton;

package/assets/ts/components/carousel/carousel.component.ts

@@ -79,6 +79,21 @@ class iamCarousel extends HTMLElement {
 
     carousel(carouselComponent);
 
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutationRecord) {
+        const targetElement = mutationRecord.target as HTMLElement;
+
+        updateCarousel(targetElement);
+      });
+    });
+
+    observer.observe(carouselComponent, {
+      attributes: false,
+      childList: true,
+      subtree: true,
+    });
+
+
     trackComponent(carouselComponent, 'iam-carousel', [
       'pip-clicked',
       'next-clicked',

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

@@ -15,18 +15,28 @@ class iamContent extends HTMLElement {
 
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <div class="content__container">
-      <slot></slot>
-    </div>
+    <slot></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
+  addTitle = (title) => {
+
+    if(this.hasAttribute('data-title-tag')){
+
+      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')}">${title}</${this.getAttribute('data-title-tag')}>`;
+    }
+
+    return '';
+  }
+
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const component = this;
     const url = this.getAttribute('data-url');
 
+    const addTitle = this.addTitle;
+
     const registerComponents = (contentComponent): void => {
       const components = ['card', 'marketing', 'notification'];
 
@@ -64,6 +74,8 @@ class iamContent extends HTMLElement {
       newXHRRequest.onload = function (): void {
         if (this.status === 200) {
           const response = JSON.parse(this.responseText);
+
+          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
           component.innerHTML = `${response.content.rendered}`;
 
           registerComponents(component);

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

@@ -177,7 +177,7 @@ class iamNav extends HTMLElement {
     });
 
     // Has secondary link
-    if (this.querySelector('a[slot="secondary"]')) {
+    if (this.querySelector('[slot="secondary"]')) {
       menu.classList.add('has-secondary');
     }
 

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

@@ -123,6 +123,7 @@ class iamSearch extends HTMLElement {
           signal: signal,
           method: 'get',
           credentials: 'same-origin',
+          mode: 'no-cors',
           headers: new Headers({
             'Content-Type': 'application/json',
             Accept: 'application/json',

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

@@ -0,0 +1,179 @@
+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 = () => {
+
+    // 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 = () => {
+
+    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>`;
+    });
+
+    return html;
+  }
+
+  transformToSecondary = (data) => {
+
+    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}`;
+  }
+
+  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 {
+    
+
+    if (!window.customElements.get(`iam-nav`))
+        window.customElements.define(`iam-nav`, iamNav);
+
+
+    if(!this.closest('iam-nav')){
+      this.defaultToNav();
+    }
+
+    const data = await this.loadNavData().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);
+        }
+        else {
+
+          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/modules/carousel.ts

@@ -272,6 +272,30 @@ export const carousel = function (carouselComponent): void {
 
 export const updateCarousel = function (carouselComponent): void {
 
+  const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
+  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;
+
+  let scrollArea = carouselInner.clientWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let visibleItems = Math.round(scrollArea / itemWidth);
+
+  carouselProgress.setAttribute('min', 1);
+  carouselProgress.setAttribute('step', visibleItems);
+
+  let progressMax = getProgressMax(itemCount, visibleItems);
+
+  carouselProgress.setAttribute('max', progressMax);
+  carouselProgress.value = 1;
+
+  let percent = getProgressPercent(1, progressMax);
+
+  carouselProgress.style.setProperty('--percent', percent + '%');
+
+  carouselControls.innerHTML = generatePipsHTML(carouselComponent, []);
+
 }
 
 export default carousel;

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