@iamproperty/components 5.1.0-beta → 5.1.0-beta10

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

@@ -34,7 +34,7 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autoComplete="new-password" aria-autocomplete="none" placeholder="Postcode" />
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
           <span class="suffix fa-regular fa-search"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
@@ -251,9 +251,28 @@ class iamAddressLookup extends HTMLElement {
           let listString = '';
           response.forEach((address, index) => {
 
-            
-            let values = JSON.stringify(address.value);
-            listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+            // Deal with agent platform response
+            if(typeof address.value == "object"){
+              let values = JSON.stringify(address.value);
+              listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+            }
+            else {
+              let values = JSON.stringify(address);
+
+              let itemString = '';
+
+              for (const [key, value] of Object.entries(address)) {
+
+                if(key == "address_number_name")
+                  itemString += `${value} `;
+                else if(key != "postcode" && key != "address_title")
+                  itemString += `${value}, `;
+              }
+
+              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
+            }
+
+
           });
           list.innerHTML = listString;
 

package/assets/ts/components/card/card.component.ts

@@ -32,8 +32,9 @@ class iamCard extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="card ${classList}" tabindex="0" role="button">
-      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /></div>` : ''}
+      ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
       <div class="card__body">
+      ${!this.hasAttribute('data-image') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
       ${this.classList.contains('card--filter') && this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>

package/assets/ts/components/carousel/README.md

@@ -0,0 +1,39 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/filterlist/filterlist.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-filterlist`))
+    window.customElements.define(`iam-filterlist`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<iam-header class="bg-secondary" image="/shutterstock_1229155495.webp">
+  <ul class="breadcrumb" slot="breadcrumb">
+    <li><a href="/">Home</a></li>
+    <li><a href="/top">Top level</a></li>
+  </ul>
+  <h1>Page title</h1>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
+</iam-header>
+```
+
+**Properties** 
+
+| Option | Type | Default Value | Description |
+| ------ | ---- | ------------- | ----------- |
+| image | String | - | Optional image url to display in the background |
+
+
+**Slots**
+
+| Option | Default Value | Description |
+| ------ | ------------- | ----------- |
+| default | - | Will display underneath the heading inside of the white box |
+| breadcrumb | - | An optional space to add a breadcrumb trail list. |

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

@@ -0,0 +1,75 @@
+// @ts-nocheck
+import carousel from "../../modules/carousel";
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "carousel"
+});
+
+class iamCarousel extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/carousel.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="carousel" :id="'carousel'+id">
+      <div class="carousel__wrapper">
+        <div class="carousel__inner">
+          
+          <slot></slot>
+        </div>
+ 
+        <div class="carousel__controls">
+          
+        </div>
+
+        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
+        <button class="btn btn-next" data-go="2">Next</button>
+
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+    
+    const carouselElement = this.shadowRoot.querySelector('.carousel');
+    const row = this.querySelector('.row');
+    const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
+
+    let itemCount = this.querySelectorAll(':scope > .row > .col').length
+
+    carouselElement.setAttribute('data-row-class',row.className);
+
+    if(this.classList.contains('hide-btns'))
+      carouselElement.classList.add('hide-btns');
+
+    if(this.classList.contains('hide-controls'))
+      carouselElement.classList.add('hide-controls');
+
+    // populate the pips
+    let pips = "";
+    for (let i = 1; i <= itemCount; i++) {
+      pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current":""}>Slide ${i}</button>`;
+    }
+    carouselControls.innerHTML = pips;
+
+    carousel(carouselElement,row);
+  }
+}
+
+export default iamCarousel;

package/assets/ts/components/header/header.component.ts

@@ -25,18 +25,12 @@ class iamHeader extends HTMLElement {
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <div class="header-banner">
-      <div class="container" part="container">
-        <slot name="breadcrumb"></slot>
-        <div class="header-banner__inner">
-        <slot></slot>
-        </div>
-      </div>
       <picture>
-        <!-- Actual image only loaded on desktops -->
-        <source srcset="" media="(min-width: 62em)">
-        <!-- Placeholder image -->
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
       </picture>
+      <div class="container">
+        <slot></slot>
+      </div>
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -44,13 +38,13 @@ class iamHeader extends HTMLElement {
 
 	connectedCallback() {
     
-    this.classList.add('loaded');
+    this.classList.add('bg-primary');
 
     const picture = this.shadowRoot.querySelector('picture');
-    const source = this.shadowRoot.querySelector('picture source');
+    const source = this.shadowRoot.querySelector('picture img');
 
     if(this.hasAttribute('image'))
-      source.setAttribute('srcset', this.getAttribute('image'));
+      source.setAttribute('src', this.getAttribute('image'));
     else
       picture.remove();
     

package/assets/ts/components/marketing/marketing.component.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Marketing"
+});
+
+class iamMarketing extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/marketing.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <div class="marketing">
+      
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    this.classList.add('invert-colours');
+
+    if(this.hasAttribute('data-img')){
+      this.shadowRoot.querySelector('.marketing').insertAdjacentHTML(
+        'afterbegin',
+        `<figure><img src="${this.getAttribute('data-img')}" alt="" /></figure>`,
+      );
+    }
+  }
+}
+
+export default iamMarketing;

package/assets/ts/components/nav/README.md

@@ -37,9 +37,6 @@ import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.com
 
 | Option | Type | Default Value | Description |
 | ------ | ---- | ------------- | ----------- |
-| data-search  | String | - | Optional, displays a search button and form. The value passed through is used for the forms action attribute. |
-| data-list  | String | - | Optional string with an ID of a datalist, note this list needs to be added as an element in the component |
-| data-prevent-search  | String | - | Flag that prevents the search form submitting allowing it to used purely with JavaScript |
 | data-searcd-open  | String | - | Flag that opens the search bar on desktop on page load. |
 
 **Slots**
@@ -51,18 +48,10 @@ import('../node_modules/@iamproperty/components/assets/js/components/nav/nav.com
 | secondary | - | Moves the link upto the top of the navbar on desktop |
 | actions | - | A place to add buttons |
 | dual | - | Plave the link or list to the right of the nav, forcing the default slot to the left. |
+| search | - | A place to include a form with search functionality |
 
 **Class modifiers**
 
 - Adding a class of **.bg-primary** will change the background of the navbar without chaning the menu background. 
 - Adding a class of **.nav--sticky** will add etxra styling to make the navbar stick to the top of the page
-- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.
-
-**Dispatched events**
-
-| Event | Dispatched when | Details passed|
-| ------ | ------------- | ----------- |
-| search-keydown | When a user uses the search input field and triggers the keydown event. | { search: $inputValue } |
-| search-keyup | When a user uses the search input field and triggers the keyup event. | { search: $inputValue } |
-| search-change | When a user uses the search input field and triggers the change event. | { search: $inputValue } |
-| search-submit | When a user uses the search form and triggers the submit event. | { search: $inputValue } |
+- Adding a class of **.nav--xs-sticky** will add etxra styling to make the navbar stick to the top of the page BUT only on the mobile view.

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

@@ -48,7 +48,6 @@ class iamNav extends HTMLElement {
         <slot name="menus"></slot>
       </div>      
     </div>
-    <div class="lists"></div>
     <div class="backdrop" part="backdrop"></div>
     `;
 
@@ -285,7 +284,7 @@ class iamNav extends HTMLElement {
     });
 
     // Search 
-    if(this.hasAttribute('data-search')){
+    if(this.querySelector('[slot="search"]')){
       menu.classList.add('has-search');
       let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
 
@@ -293,24 +292,20 @@ class iamNav extends HTMLElement {
       searchWrapper.insertAdjacentHTML('afterbegin',`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
       <dialog id="search-dialog">
       <div class="container">
-        <form action="${this.hasAttribute('data-search') ? this.getAttribute('data-search') : ''}" class="row" id="search-form">
+        <div class="row">
           <div class="col mb-0 ms-auto col-md-7">
-            <label for="search" class="visually-hidden">Search</label>
-            <button class="suffix me-0 mb-0"><i class="fa-regular fa-search"></i></button>
-            <input type="search" class="" id="search" name="search" required="" autocomplete="off" data-list="${this.hasAttribute('data-list') ? this.getAttribute('data-list') : ''}" />
+            <slot name="search"></slot>
           </div>
           <div class="col d-none d-md-block mw-fit-content ms-3">
             <button class="btn btn-compact btn-secondary fa-xmark-large m-0 mb-0" type="button" id="search-close">Close search field</button>
           </div>
-        </form>
+        </div>
       </div>
       </dialog>`);
       
       let searchButton = this.shadowRoot.querySelector('#search-button');
       let searchClose = this.shadowRoot.querySelector('#search-close');
       let searchDialog = this.shadowRoot.querySelector('#search-dialog');
-      let searchInput = this.shadowRoot.querySelector('#search');
-      let searchForm = this.shadowRoot.querySelector('#search-form');
 
       if(this.hasAttribute('data-search-open')){
         
@@ -336,44 +331,6 @@ class iamNav extends HTMLElement {
         searchButton.removeAttribute('aria-expanded');
       });
 
-      // Search events
-      searchInput.addEventListener('keydown', (event) => {
-
-        const keyupEvent = new CustomEvent("search-keydown", { detail: { search: searchInput.value } });
-        this.dispatchEvent(keyupEvent);
-      });
-
-      searchInput.addEventListener('keyup', (event) => {
-
-        if (searchInput.value.length >= 3 && searchInput.hasAttribute('data-list')) 
-          searchInput.setAttribute("list", searchInput.getAttribute('data-list'));
-        else
-          searchInput.removeAttribute("list");
-
-        const keyupEvent = new CustomEvent("search-keyup", { detail: { search: searchInput.value } });
-        this.dispatchEvent(keyupEvent);
-      });
-  
-      searchInput.addEventListener('change', (event) => {
-  
-        const changeEvent = new CustomEvent("search-change", { detail: { search: searchInput.value } });
-        this.dispatchEvent(changeEvent);
-      });
-
-      searchForm.addEventListener('submit', (event) => {
-        
-        if(this.hasAttribute('data-prevent-search'))
-          event.preventDefault();
-
-        const submitEvent = new CustomEvent("search-submit", { detail: { search: searchInput.value } });
-        this.dispatchEvent(submitEvent);
-      });
-
-      // Make sure any child lists are available to the search input
-      this.querySelectorAll('datalist').forEach((list) => {
-
-        iamNav.shadowRoot.querySelector('.lists').insertAdjacentElement('beforeend',list);
-      });
     }
   }
 }

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

@@ -0,0 +1,177 @@
+// @ts-nocheck
+import Cookies from 'js-cookie';
+import { safeID, resolvePath, isTraversable } from '../../modules/helpers'
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Search"
+});
+
+class iamSearch extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <slot></slot>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const searchWrapper = this;
+    const inputField = this.querySelector('input');
+    const valueSchema = this.hasAttribute('data-value-schema') ? this.getAttribute('data-value-schema') : 'value';
+    const displaySchema = this.hasAttribute('data-display-schema') ? this.getAttribute('data-display-schema') : 'label';
+    const loopSchema = this.hasAttribute('data-schema') ? this.getAttribute('data-schema') : '';
+    let datalist = this.querySelector('datalist');
+    let searched = [];
+
+    // Clone original input field, re-name and use for display purposes
+    const displayInputField = inputField.cloneNode();
+    displayInputField.setAttribute('name',`${inputField.getAttribute('name')}Alt`);
+    inputField.removeAttribute('data-change-events');
+    displayInputField.removeAttribute('id');
+    
+    inputField.after(displayInputField);
+
+    // Hide original input field
+    inputField.setAttribute('type','hidden');
+
+    // if data list does not exist then create one and append
+    if(!datalist){
+
+      datalist = document.createElement("datalist");
+      let listID = safeID('list');
+      datalist.setAttribute('id',listID);
+      searchWrapper.appendChild(datalist);
+
+      displayInputField.setAttribute('list',listID);
+    }
+
+    // on change update oringinal field with the actual value and use displayed input for the nice display text
+    displayInputField.addEventListener('change', (event) => {
+
+      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
+
+      if(match){
+        inputField.value = match.getAttribute('data-value');
+      }
+    });
+
+    // Search the endpoint when 3 characters has been added
+    if(searchWrapper.hasAttribute('data-url')){
+        
+      displayInputField.addEventListener('keyup', (event) => {
+
+        if(displayInputField.value.length == 3 && !searched.includes(displayInputField.value)){
+          search(displayInputField.value);
+          searched.push(displayInputField.value);
+        }
+      });
+
+      displayInputField.addEventListener('change', (event) => {
+
+        if(displayInputField.value.length >= 3 && !searched.includes(displayInputField.value.substring(0,3))){
+          search(displayInputField.value.substring(0,3));
+          searched.push(displayInputField.value.substring(0,3));
+        }
+      });
+    }
+    
+    const search = async (searchterm) => {
+      
+      let ajaxURL = searchWrapper.getAttribute('data-url');
+      ajaxURL += `${encodeURI(searchterm)}`;
+      
+      // 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 } = controller[ajaxURL];
+      
+      try {
+        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 = '';
+          let loopValues = resolvePath(response, loopSchema, '');
+
+          if(isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
+            loopValues.forEach((item, index) => {
+              let actualValue = resolvePath(item, valueSchema, '');
+              let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
+
+              if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
+                listString += `<option value="${displayValue}" data-value='${actualValue}'></option>`;
+            });
+          }
+          else if (typeof loopValues == 'object'){
+
+            for (const [key, value] of Object.entries(loopValues)) {
+
+              if(isTraversable(value) && typeof value.forEach == 'function') {
+                value.forEach((item, index) => {
+                  let actualValue = resolvePath(item, valueSchema, '');
+                  let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
+    
+                  if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
+                    listString += `<option value="${key}: ${displayValue}" data-value='${actualValue}'></option>`;
+                });
+              }
+            }
+          }
+          
+          datalist.innerHTML += listString;
+  
+          return response;
+        });
+
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    if(searchWrapper.hasAttribute('data-prevent-submit')){
+
+      const form = searchWrapper.closest('form');
+
+      form.addEventListener('submit', (e) => {
+
+        e.preventDefault();
+      });
+    }
+  }
+}
+
+export default iamSearch;

package/assets/ts/dynamic.ts

@@ -14,7 +14,7 @@ import youtubeVideo from '../js/modules/youtubevideo'
 
 import iamNotification from './components/notification/notification.component'
 
-const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters'];
+const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters', 'nav', 'marketing'];
 const prefix = "iam"
 const options = {
   rootMargin: '50px',