@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -19,19 +19,19 @@ import('../node_modules/@iamproperty/components/assets/js/components/pagination/
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-total | int | 0 | The total amount is needed to work out how many pagination buttons are needed |
-| data-page | int | 1 | Override the current page value |
-| data-show | int | 15 | Update how many items can be shown per page |
-| data-page-minimal | flag | - | Will display the minimal variant even on mobile | 
-| data-page-jump | flag | - | Adds the page jump dropdown on all viewports | 
-| data-per-page | flag | - | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) | 
-| data-item-count | flag | - | Will add the total count on tablet and desktop viewports | 
+| Option            | Type | Default Value | Description                                                                                                  |
+| ----------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------ |
+| data-total        | int  | 0             | The total amount is needed to work out how many pagination buttons are needed                                |
+| data-page         | int  | 1             | Override the current page value                                                                              |
+| data-show         | int  | 15            | Update how many items can be shown per page                                                                  |
+| data-page-minimal | flag | -             | Will display the minimal variant even on mobile                                                              |
+| data-page-jump    | flag | -             | Adds the page jump dropdown on all viewports                                                                 |
+| data-per-page     | flag | -             | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) |
+| data-item-count   | flag | -             | Will add the total count on tablet and desktop viewports                                                     |
 
 **Dispatched events**
 
-| Event | Dispatched when | Details passed|
-| ------ | ------------- | ----------- |
-| update-show | When a user clicks mobile 'Load more' button | { show: $showAmont } |
+| Event       | Dispatched when                                                                     | Details passed        |
+| ----------- | ----------------------------------------------------------------------------------- | --------------------- |
+| update-show | When a user clicks mobile 'Load more' button                                        | { show: $showAmont }  |
 | update-page | When a user changes the page jump select or clicks on the 'Prev' and 'Next' buttons | { page: $pageNumber } |

package/assets/ts/components/pagination/pagination.component.ts

@@ -1,11 +1,14 @@
 // @ts-nocheck
 class iamPagination extends HTMLElement {
-
-  constructor(){
+  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`;
+    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/pagination.css";`;
 
     const template = document.createElement('template');
@@ -50,22 +53,17 @@ class iamPagination extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     // Set default attributes
     const params = new URLSearchParams(window.location.search);
 
-    if(!this.hasAttribute('data-total'))
-      this.setAttribute('data-total', 15);
+    if (!this.hasAttribute('data-total')) this.setAttribute('data-total', 15);
 
-    if(!this.hasAttribute('data-page'))
-      this.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
+    if (!this.hasAttribute('data-page')) this.setAttribute('data-page', params.has('page') ? params.get('page') : 1);
 
-    if(!this.hasAttribute('data-show'))
-      this.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
+    if (!this.hasAttribute('data-show')) this.setAttribute('data-show', params.has('show') ? params.get('show') : 15);
 
-    if(!this.hasAttribute('data-increment'))
-        this.setAttribute('data-increment', this.getAttribute('data-show'));
+    if (!this.hasAttribute('data-increment')) this.setAttribute('data-increment', this.getAttribute('data-show'));
 
     // Elements
     const select = this.shadowRoot.querySelector('.page-jump select');
@@ -78,38 +76,32 @@ class iamPagination extends HTMLElement {
     this.setup();
 
     // Select on change will update the data-page attr which will dispatch an event
-    select.addEventListener('change',(event) => {
-
-      
-      this.setAttribute('data-show',this.getAttribute('data-increment'))
-      this.setAttribute('data-page',event.target.value);
+    select.addEventListener('change', (event) => {
+      this.setAttribute('data-show', this.getAttribute('data-increment'));
+      this.setAttribute('data-page', event.target.value);
     });
 
     // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
-    next.addEventListener('click',(event) => {
-
+    next.addEventListener('click', (event) => {
       select.value = parseInt(select.value) + 1;
       select.dispatchEvent(new Event('change'));
     });
 
-    prev.addEventListener('click',(event) => {
-
+    prev.addEventListener('click', (event) => {
       select.value = parseInt(select.value) - 1;
       select.dispatchEvent(new Event('change'));
     });
 
-    // Update how many is shown 
-    perPage.addEventListener('change',(event) => {
-
-      this.setAttribute('data-increment',event.target.value);
+    // Update how many is shown
+    perPage.addEventListener('change', (event) => {
+      this.setAttribute('data-increment', event.target.value);
     });
 
-    loadMore.addEventListener('click',(event) => {
+    loadMore.addEventListener('click', (event) => {
+      const newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
+      this.setAttribute('data-show', newValue);
 
-      let newValue = parseInt(this.getAttribute('data-show')) + parseInt(this.getAttribute('data-increment'));
-      this.setAttribute('data-show',newValue);
-
-      if(newValue > parseInt(this.getAttribute('data-total'))){
+      if (newValue > parseInt(this.getAttribute('data-total'))) {
         loadMore.remove();
       }
     });
@@ -132,9 +124,8 @@ class iamPagination extends HTMLElement {
     const increment = parseInt(this.getAttribute('data-increment'));
     const numberPages = Math.ceil(total / increment);
 
-    if(total > show)
-      wrapper.classList.remove('d-none');
-      
+    if (total > show) wrapper.classList.remove('d-none');
+
     // Populate the select input with the number of pages
     let strOptions = '';
     for (let i = 1; i <= numberPages; i++) {
@@ -145,60 +136,53 @@ class iamPagination extends HTMLElement {
     totalPages.innerHTML = `of ${numberPages}`;
 
     // Next button
-    if(currentPage == numberPages)
-      next.setAttribute('disabled','disabled');
-    else
-      next.removeAttribute('disabled');
+    if (currentPage == numberPages) next.setAttribute('disabled', 'disabled');
+    else next.removeAttribute('disabled');
 
-    if(currentPage == 1)
-      prev.setAttribute('disabled','disabled');
-    else
-      prev.removeAttribute('disabled');
+    if (currentPage == 1) prev.setAttribute('disabled', 'disabled');
+    else prev.removeAttribute('disabled');
 
-    
     // Update the item count text
-    let startPoint = currentPage == 1 ? 1 : ((currentPage-1)*show)+1;
-    let endPoint = currentPage == 1 ? show : ((currentPage)*show);
+    const startPoint = currentPage == 1 ? 1 : (currentPage - 1) * show + 1;
+    const endPoint = currentPage == 1 ? show : currentPage * show;
     itemCount.innerHTML = `${startPoint} - ${endPoint > total ? total : endPoint} of ${total} items`;
-    
-    const defaultValues = [15,25,40,50];
+
+    const defaultValues = [15, 25, 40, 50];
 
     // Update the per page options if needed
-    if(increment && perPage.value != increment && !defaultValues.includes(increment)){
+    if (increment && perPage.value != increment && !defaultValues.includes(increment)) {
       perPage.innerHTML = `<option value="${increment}">${increment}</option>
-      <option value="${increment*2}">${increment*2}</option>
-      <option value="${increment*3}">${increment*3}</option>
-      <option value="${increment*4}">${increment*4}</option>`;
+      <option value="${increment * 2}">${increment * 2}</option>
+      <option value="${increment * 3}">${increment * 3}</option>
+      <option value="${increment * 4}">${increment * 4}</option>`;
     }
-    
+
     perPage.value = increment;
   }
 
   static get observedAttributes() {
-    return ["data-total","data-increment","data-page","data-show"];
+    return ['data-total', 'data-increment', 'data-page', 'data-show'];
   }
 
   attributeChangedCallback(attrName, oldVal, newVal) {
-
     switch (attrName) {
-      case "data-total": {
-        if(oldVal != newVal){
+      case 'data-total': {
+        if (oldVal != newVal) {
           this.setAttribute('data-page', 1);
           this.setup();
         }
         break;
       }
-      case "data-show": {
-        if(oldVal != newVal){
-          
+      case 'data-show': {
+        if (oldVal != newVal) {
           this.setAttribute('data-page', 1);
           this.setup();
           this.dispatchEvent(new CustomEvent('update-show', { detail: { show: newVal } }));
         }
         break;
       }
-      case "data-increment": {
-        if(oldVal != newVal){
+      case 'data-increment': {
+        if (oldVal != newVal) {
           this.setAttribute('data-show', newVal);
           this.setAttribute('data-page', 1);
           this.setup();
@@ -206,12 +190,10 @@ class iamPagination extends HTMLElement {
         }
         break;
       }
-      case "data-page": {
-
-        if(oldVal && oldVal != newVal) {
-
+      case 'data-page': {
+        if (oldVal && oldVal != newVal) {
           this.setup();
-          // Dispact the event for other components to use as triggers 
+          // Dispact the event for other components to use as triggers
           this.dispatchEvent(new CustomEvent('update-page', { detail: { page: newVal } }));
         }
         break;
@@ -220,4 +202,4 @@ class iamPagination extends HTMLElement {
   }
 }
 
-export default iamPagination;
+export default iamPagination;

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

@@ -1,18 +1,19 @@
 // @ts-nocheck
-import {trackComponent, trackComponentRegistered} from "../_global";
-import {cardHTML,setupCard} from "../../modules/card.module";
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
 
-trackComponentRegistered("iam-record-card");
+trackComponentRegistered('iam-record-card');
 
 class iamRecordCard extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    this.attachShadow({ mode: 'open'});
+    this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets';
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
     const loadCSS = `@import "${assetLocation}/css/components/record-card.component.css";`;
-    
+
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
@@ -26,57 +27,46 @@ class iamRecordCard extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	async connectedCallback() {
-
+  async connectedCallback() {
     const cardComponent = this;
-    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
     setupCard(cardComponent);
 
-    Array.from(cardComponent.querySelectorAll(':scope > *:not([slot])')).forEach((element,index)=>{
-
-      element.setAttribute('slot','details');
+    Array.from(cardComponent.querySelectorAll(':scope > *:not([slot])')).forEach((element, index) => {
+      element.setAttribute('slot', 'details');
     });
 
-    if(cardComponent.hasAttribute('data-avatar')){
-
+    if (cardComponent.hasAttribute('data-avatar')) {
       cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-avatar')}" alt="" loading="lazy" class="card__avatar" part="avatar" />`;
     }
-  
 
-    trackComponent(cardComponent,"iam-record-card",[]);
+    trackComponent(cardComponent, 'iam-record-card', []);
   }
 
   static get observedAttributes() {
-    return ["data-image"];
+    return ['data-image'];
   }
-  
+
   attributeChangedCallback(attrName, oldVal, newVal) {
     switch (attrName) {
-      case "data-image": {
-
-        if(oldVal != newVal){
-
+      case 'data-image': {
+        if (oldVal != newVal) {
           const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
 
-          if(cardHeadImg)
-            cardHeadImg.setAttribute('src',newVal);
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
         }
         break;
       }
-      case "data-avatar": {
-
-        if(oldVal != newVal){
-
+      case 'data-avatar': {
+        if (oldVal != newVal) {
           const cardHeadImg = this.shadowRoot.querySelector('.card__avatar');
 
-          if(cardHeadImg)
-            cardHeadImg.setAttribute('src',newVal);
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
         }
         break;
       }
     }
-
   }
 }
 
-export default iamRecordCard;
+export default iamRecordCard;

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

@@ -27,10 +27,9 @@ import('../node_modules/@iamproperty/components/assets/js/components/fileupload/
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-url | String | - | Optional value that populates the datalist with extra results from an API |
-| data-schema | String | - | Tells the JavaScript where to look for the array of values in the API JSON |
-| data-value-schema | String | - | Tells the JavaScript where to look for the value within the API JSON |
-| data-display-schema | String | - | Tells the JavaScript where to look for the title within the API JSON |
-
+| Option              | Type   | Default Value | Description                                                                |
+| ------------------- | ------ | ------------- | -------------------------------------------------------------------------- |
+| data-url            | String | -             | Optional value that populates the datalist with extra results from an API  |
+| data-schema         | String | -             | Tells the JavaScript where to look for the array of values in the API JSON |
+| data-value-schema   | String | -             | Tells the JavaScript where to look for the value within the API JSON       |
+| data-display-schema | String | -             | Tells the JavaScript where to look for the title within the API JSON       |

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

@@ -1,22 +1,25 @@
 // @ts-nocheck
 import Cookies from 'js-cookie';
-import { safeID, resolvePath, isTraversable } from '../../modules/helpers'
+import { safeID, resolvePath, isTraversable } from '../../modules/helpers';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Search"
+  event: 'customElementRegistered',
+  element: 'Search',
 });
 
 class iamSearch extends HTMLElement {
-
-  constructor(){
+  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`;
+    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 = `
@@ -38,63 +41,56 @@ class iamSearch extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-	async connectedCallback() {
-
+  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 = [];
+    const searched = [];
 
     // Clone original input field, re-name and use for display purposes
     const displayInputField = inputField.cloneNode();
-    displayInputField.setAttribute('name',`${inputField.getAttribute('name')}Alt`);
+    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');
+    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);
+    if (!datalist) {
+      datalist = document.createElement('datalist');
+      const listID = safeID('list');
+      datalist.setAttribute('id', listID);
       searchWrapper.appendChild(datalist);
 
-      displayInputField.setAttribute('list',listID);
+      displayInputField.setAttribute('list', listID);
     }
 
     // Search the endpoint when 3 characters has been added
-    if(searchWrapper.hasAttribute('data-url')){
-        
+    if (searchWrapper.hasAttribute('data-url')) {
       displayInputField.addEventListener('input', (event) => {
-
-        if(displayInputField.value.length == 3 && !searched.includes(displayInputField.value)){
+        if (displayInputField.value.length == 3 && !searched.includes(displayInputField.value)) {
           search(displayInputField.value);
           searched.push(displayInputField.value);
         }
       });
     }
 
-    function checkMatch(){
-      
-      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
-      let subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
+    function checkMatch() {
+      const match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
+      const subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
-      if(match){
+      if (match) {
         inputField.value = match.getAttribute('data-value');
-      }
-      else if (displayInputField.value.length > 0 && !subMatch){
+      } else if (displayInputField.value.length > 0 && !subMatch) {
         displayInputField.classList.add('is-invalid');
-        displayInputField.closest('label').setAttribute('data-error','No results returned');
-      }
-      else {
+        displayInputField.closest('label').setAttribute('data-error', 'No results returned');
+      } else {
         displayInputField.classList.remove('is-invalid');
         displayInputField.closest('label').removeAttribute('data-error');
       }
@@ -102,28 +98,23 @@ class iamSearch extends HTMLElement {
 
     // on change update oringinal field with the actual value and use displayed input for the nice display text
     displayInputField.addEventListener('input', (event) => {
-
       checkMatch();
     });
 
-
     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 = [];
-  
+      if (!window.controller) window.controller = [];
+
       // Abort if controller already present for this url
-      if(window.controller[ajaxURL])
-      window.controller[ajaxURL].abort();
-  
+      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,
@@ -133,66 +124,59 @@ class iamSearch extends HTMLElement {
             'Content-Type': 'application/json',
             Accept: 'application/json',
             'X-Requested-With': 'XMLHttpRequest',
-            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
-          })
+            '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',', ');
-
-              console.log(displayValue);
-
-
-              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>`;
-                });
+          .then((response) => response.json())
+          .then((response) => {
+            // populate datalist
+            let listString = '';
+            const loopValues = resolvePath(response, loopSchema, '');
+
+            if (isTraversable(loopValues) && typeof loopValues.forEach == 'function') {
+              loopValues.forEach((item, index) => {
+                const actualValue = resolvePath(item, valueSchema, '');
+                const displayValue = resolvePath(item, displaySchema, '').replace('\n', ', ');
+
+                console.log(displayValue);
+
+                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) => {
+                    const actualValue = resolvePath(item, valueSchema, '');
+                    const 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;
-  
-          displayInputField.closest('form').classList.add('was-validated');
-          checkMatch();
 
-          return response;
-        });
+            datalist.innerHTML += listString;
 
+            displayInputField.closest('form').classList.add('was-validated');
+            checkMatch();
+
+            return response;
+          });
       } catch (error) {
         console.log(error);
       }
-    }
-
-    if(searchWrapper.hasAttribute('data-prevent-submit')){
+    };
 
+    if (searchWrapper.hasAttribute('data-prevent-submit')) {
       const form = searchWrapper.closest('form');
 
       form.addEventListener('submit', (e) => {
-
         e.preventDefault();
       });
     }
   }
 }
 
-export default iamSearch;
+export default iamSearch;