@iamproperty/components 5.0.0 → 5.1.0-beta10

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

@@ -16,6 +16,7 @@ class iamNav extends HTMLElement {
     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/nav.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -47,11 +48,14 @@ class iamNav extends HTMLElement {
         <slot name="menus"></slot>
       </div>      
     </div>
-    <div class="lists"></div>
     <div class="backdrop" part="backdrop"></div>
     `;
 
     shadowRoot.appendChild(template.content.cloneNode(true));
+    
+    // insert extra CSS
+    if(!document.getElementById('navGlobal'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="navGlobal">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {
@@ -280,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');
 
@@ -288,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')){
         
@@ -331,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/notification/notification.component.ts

@@ -17,6 +17,7 @@ class iamNotification extends HTMLElement {
     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/notification.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
 
     const buttons = this.querySelectorAll('a,button');
 
@@ -45,6 +46,9 @@ class iamNotification extends HTMLElement {
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
+    // insert extra CSS
+    if(!document.getElementById('notificationHolder'))
+      document.head.insertAdjacentHTML('beforeend',`<style id="notificationHolder">${loadExtraCSS}</style>`);
   }
 
 	connectedCallback() {

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/components/slider/README.md

@@ -0,0 +1,26 @@
+**Add the below to your initialise script**
+
+```
+import('../node_modules/@iamproperty/components/assets/js/components/slider/slider.component.min').then(module => { // Might need to update the path
+
+  if (!window.customElements.get(`iam-slider`))
+    window.customElements.define(`iam-slider`, module.default);
+
+}).catch((err) => {
+  console.log(err.message);
+});
+```
+
+**Add the below HTML code to where you want the component to live.**
+
+```
+<label>Input field label <iam-slider><input type="number" name="percent" min="0" max="100" value="15" step="1" /></iam-slider></label>
+```
+
+**Note**
+
+The slider component is best put inside of a label and wrapped around an input field. The component is there to enhance the input field.
+
+**Properties**
+
+The properties of the slider are reflected by the attributes of the input field. So the min and max used to create the range are taken from the first input inside of the component.

package/assets/ts/components/slider/slider.component.ts

@@ -0,0 +1,189 @@
+// @ts-nocheck
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Slider"
+});
+
+
+class iamSlider 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/slider.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    </style>
+    <div class="row">
+      <div class="col min pe-2"></div>
+      <div class="col sliders">
+        
+      </div>
+      <div class="col max ps-2"></div>
+    </div>
+    <div class="input__wrapper"><slot></slot><span>Minimum</span><span>Maximum</span></div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	connectedCallback() {
+
+    const slider = this;
+    const minElement = this.shadowRoot.querySelector('.min');
+    const maxElement = this.shadowRoot.querySelector('.max');
+    const slidersHolder = this.shadowRoot.querySelector('.sliders')
+    let inputs = this.querySelectorAll('input');
+    const inputWrapper = this.shadowRoot.querySelector('.input__wrapper');
+    const label = this.closest('label');
+
+    
+    let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    
+    if("ontouchstart" in document.documentElement) {
+      stepperEvent = "touchend";
+      stepperStart = "touchstart";
+    }
+
+    let stepperFunction = function(input, eventType) {
+
+      let value = input.value;
+
+      let min = slider.shadowRoot.querySelector('.is-first').getAttribute('min');
+      let max = slider.shadowRoot.querySelector('.is-last').getAttribute('max');
+
+      if (input.classList.contains('is-last') && !input.classList.contains('is-first')){
+
+        let percent = ((value/(max-min)) * 100);
+        slider.style.setProperty('--percent', percent + "%");
+
+        if(parseFloat(input.value) <= parseFloat(slider.shadowRoot.querySelector('.is-first').value)){
+
+          slider.shadowRoot.querySelector('.is-first').value = input.value;
+          slider.querySelector('.is-first').value = input.value;
+          slider.style.setProperty('--start-percent', percent + "%");
+        }
+      }
+      else if(input.classList.contains('is-first') && !input.classList.contains('is-last')){
+
+        let percent = ((value/(max-min)) * 100);
+        slider.style.setProperty('--start-percent', percent + "%");
+
+        if(parseFloat(input.value) >= parseFloat(slider.shadowRoot.querySelector('.is-last').value)){
+
+          slider.shadowRoot.querySelector('.is-last').value = input.value;
+          slider.querySelector('.is-last').value = input.value;
+          slider.style.setProperty('--percent', percent + "%");
+        }
+      }
+      else {
+        
+        let percent = ((value/(max-min)) * 100).toFixed(2);
+        slider.style.setProperty('--percent', percent + "%");
+      }
+    };
+
+    // Create sliders
+    Array.from(inputs).forEach((input,index) => {
+
+      let rangeInput = input.cloneNode(true);
+      input.setAttribute('type','number');
+      rangeInput.setAttribute('type','range');
+
+      if(index == 0){
+        input.classList.add('is-first');
+        rangeInput.classList.add('is-first');
+
+        minElement.innerHTML = input.getAttribute('min');
+        maxElement.innerHTML = input.getAttribute('max');
+          
+        slidersHolder.appendChild(rangeInput);
+      }
+      
+      if(index == inputs.length-1){
+        input.classList.add('is-last');
+        rangeInput.classList.add('is-last'); 
+        slidersHolder.appendChild(rangeInput);
+      }
+
+      if(index > 1) {
+        input.remove();
+      }
+
+    });
+    inputs = this.querySelectorAll('input');
+    inputWrapper.setAttribute('data-elements',inputs.length);
+
+    
+    const sliders = this.shadowRoot.querySelectorAll('input');
+
+    Array.from(inputs).forEach((input,index) => {
+
+      input.addEventListener('keyup',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+      input.addEventListener('keydown',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+
+      input.addEventListener('change',function(event){
+        sliders[index].value = input.value;
+        stepperFunction(sliders[index]);
+      });
+    });
+
+    Array.from(sliders).forEach((input,index) => {
+
+      stepperFunction(input,'start');
+
+      input.addEventListener(stepperStart,function(event){
+        
+        clearInterval(stepperInterval);
+        stepperInterval = setInterval(function() {
+          stepperFunction(input,'drag');
+          inputs[index].value = input.value;
+        }, 10);
+      });
+
+      input.addEventListener(stepperEvent,function(event){
+        clearInterval(stepperInterval);
+      });
+
+      input.addEventListener('change',function(event){
+        clearInterval(stepperInterval);
+        stepperFunction(input,'click');
+        inputs[index].value = input.value;
+      });
+    });
+
+    // Move focus to slider when clicking on label
+    label.addEventListener('click',function(event) {
+
+      event.preventDefault();
+
+      if (this === event.target) {
+        /* click was on label */
+        slider.shadowRoot.querySelector('input').focus();
+        
+      } else {
+        /* click was on input */
+        event.stopPropagation();
+        return false;
+      }
+    });
+
+  } // Connected callback
+}
+
+export default iamSlider;

package/assets/ts/components/table/table.component.ts

@@ -8,7 +8,7 @@ class iamTable extends HTMLElement {
     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/table.css";`;
-    const loadExtraCSS = `@import "${assetLocation}/css/components/table.extras.css";`;
+    const loadExtraCSS = `@import "${assetLocation}/css/components/table.global.css";`;
     
     const template = document.createElement('template');
     template.innerHTML = `

package/assets/ts/components/tabs/tabs.component.ts

@@ -16,11 +16,13 @@ class iamTabs extends HTMLElement {
 
     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/tabs.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
+    ${loadCSS}
 
     :host(.admin-panel){
       display: contents!important;

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',