@iamproperty/components 7.4.0 → 7.5.1--beta1

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -1,3 +1,5 @@
+import Cookies from 'js-cookie';
+
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
@@ -13,15 +15,13 @@ class iamMultiselect 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/multiselect.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
+    
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
@@ -52,7 +52,7 @@ class iamMultiselect extends HTMLElement {
     const button = multiselect.shadowRoot.querySelector('#clear');
     let order = 0;
     const innerLabel = multiselect.shadowRoot.querySelector('label .inner-label');
-
+    const ajaxURL = this.getAttribute('data-url');
     innerLabel.innerHTML = multiselect.getAttribute('data-label');
 
     if (multiselect.hasAttribute('placeholder')) {
@@ -99,6 +99,10 @@ class iamMultiselect extends HTMLElement {
         inputToSet.closest('label').setAttribute('slot', 'checked');
         inputToSet.closest('label').setAttribute('style', `--order:${order};`);
         inputToSet.closest('label').setAttribute('data-order', order);
+
+        if(inputToSet.closest('[data-value]')){
+          inputToSet.closest('[data-value]').setAttribute('data-value',  inputToSet.closest('label').textContent)
+        }
       }
 
       // check for errors
@@ -123,7 +127,8 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Filter list
-    search.addEventListener('input', () => {
+    const filterList = () => {
+
       Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
         const checkbox = label.querySelector('input');
         const searchValue = checkbox.value;
@@ -138,6 +143,19 @@ class iamMultiselect extends HTMLElement {
           label.setAttribute('slot', 'notmatched');
         }
       });
+    }
+
+    search.addEventListener('input', () => {
+
+      if (multiselect.hasAttribute('data-url')) {
+      
+        if (search.value.length == 3) {
+          searchAjax(search.value);
+        }
+      } else {
+          
+        filterList();
+      }
     });
 
     // Add a delayed hover effect for non hover devices
@@ -148,31 +166,34 @@ class iamMultiselect extends HTMLElement {
     });
 
     search.addEventListener('blur', (event) => {
-
       setTimeout(function () {
         const activeElement = document.activeElement;
-        
-        if(activeElement.getAttribute('type') != 'checkbox'){
-
-          if(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`)){
 
+        if (activeElement.getAttribute('type') != 'checkbox') {
+          if (multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`)) {
             multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`).checked = true;
+
             setItem(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`));
           }
-          search.value = "";
+          search.value = '';
 
           Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
             setItem(checkbox);
           });
         }
-        
+
+        if (multiselect.hasAttribute('data-url')) {
+          Array.from(multiselect.querySelectorAll(`label:has(input[type="checkbox"]:not(:checked))`)).forEach((checkbox) => {
+
+            checkbox.remove();
+          });
+        }
       }, 200);
 
       clearTimeout(hoverTimeout);
       hoverTimeout = setTimeout(function () {
-
         multiselect.classList.remove('hover');
-      }, 1000);
+      }, 500);
     });
 
     // Set items
@@ -180,15 +201,30 @@ class iamMultiselect extends HTMLElement {
       if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {
         const checkbox = event.target.closest('input[type="checkbox"]');
 
+        if(multiselect.hasAttribute('data-single')){
+          Array.from(multiselect.querySelectorAll(`label[slot="checked"] input`)).forEach((inputToCancel) => {
+            inputToCancel.checked = false;
+            inputToCancel.closest('label').removeAttribute('slot');
+            inputToCancel.closest('label').removeAttribute('style');
+            inputToCancel.closest('label').removeAttribute('data-order');
+          });
+        }
+
         setItem(checkbox);
 
-        search.value = "";
-        search.focus();
-        clearTimeout(hoverTimeout);
-        multiselect.classList.add('hover');
-        hoverTimeout = setTimeout(function () {
+        search.value = '';
+        if(!multiselect.hasAttribute('data-single')){
+          search.focus();
+          clearTimeout(hoverTimeout);
+          multiselect.classList.add('hover');
+          hoverTimeout = setTimeout(function () {
+            multiselect.classList.remove('hover');
+          }, 5000);
+        }
+        else{
+
           multiselect.classList.remove('hover');
-        }, 5000);
+        }
       }
     });
 
@@ -222,10 +258,8 @@ class iamMultiselect extends HTMLElement {
 
             if (prevCheckbox) prevCheckbox.focus();
             else search.focus();
-          }
-          else if (activeElement == multiselect){
-
-            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function(a, b) {
+          } else if (activeElement == multiselect) {
+            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function (a, b) {
               return +a.dataset.order - +b.dataset.order;
             });
 
@@ -294,7 +328,6 @@ class iamMultiselect extends HTMLElement {
           break;
         case 'Backspace':
           if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-
             activeElement.checked = false;
             setItem(activeElement);
             search.focus();
@@ -315,7 +348,6 @@ class iamMultiselect extends HTMLElement {
       return lastTag;
     }
 
-
     search.addEventListener('keydown', function (event) {
       switch (
         event.key // change to event.key to key to use the above variable
@@ -353,6 +385,50 @@ class iamMultiselect extends HTMLElement {
     multiselect.addEventListener('mouseup', () => {
       wrapper.removeAttribute('data-mousedown');
     });
+
+    const searchAjax = async (searchterm): any => {
+      const searchAjaxURL = `${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[searchAjaxURL]) window.controller[searchAjaxURL].abort();
+
+      // Create a new controller so it can be aborted if new fetch made
+      window.controller[searchAjaxURL] = new AbortController();
+      const { signal } = controller[searchAjaxURL];
+
+      try {
+        await fetch(searchAjaxURL, {
+          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) => {
+
+            let items = '';
+
+            for (let i = 0; i < response['data'].length; i++) {
+              items += `<label class="tag"><input type="checkbox" name="${multiselect.hasAttribute('data-name') ? multiselect.getAttribute('data-name') : 'tags'}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
+            }
+
+            multiselect.insertAdjacentHTML('beforeend', `${items}`);
+            
+            filterList();
+            return response;
+          });
+      } catch (error) {
+        console.log(error);
+      }
+    };
   }
 }
 

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

@@ -13,16 +13,14 @@ 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.component.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style class="styles">
-    @import "${coreCSS}";
+
+    
     ${loadCSS}
     </style>
     <style class="doc-styles">
@@ -348,30 +346,23 @@ class iamNav extends HTMLElement {
       });
     }
 
-    if(this.classList.contains('nav--sticky')){
-      
-      console.log('hey');
-
+    if (this.classList.contains('nav--sticky')) {
       let oldScrollY = window.scrollY;
-      window.onscroll = function(e) {
-        if(oldScrollY < window.scrollY){
-          document.body.setAttribute('data-direction', "down");
+      window.onscroll = function (e): void {
+        if (oldScrollY < window.scrollY) {
+          document.body.setAttribute('data-direction', 'down');
         } else {
-          document.body.setAttribute('data-direction', "up");
+          document.body.setAttribute('data-direction', 'up');
         }
 
-        if(window.scrollY > 100){
+        if (window.scrollY > 100) {
           document.body.classList.add('past100');
-        }
-        else {
-
+        } else {
           document.body.classList.remove('past100');
         }
         oldScrollY = window.scrollY;
-      }
-
+      };
     }
-
   }
 }
 

package/assets/ts/components/notification/notification.component.ts

@@ -3,7 +3,6 @@ import { trackComponent, trackComponentRegistered } from '../_global';
 
 trackComponentRegistered('iam-notification');
 
-
 class iamNotification extends HTMLElement {
   constructor() {
     super();
@@ -11,16 +10,13 @@ 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 template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     ${this.hasAttribute('data-css') ? `${this.getAttribute('data-css')}` : ``}
     </style>
@@ -30,6 +26,7 @@ class iamNotification extends HTMLElement {
       <div class="notification__inner"><div class="notification__text"><slot></slot></div><div class="notification__btns"><slot name="btns"></slot></div></div>
       <div class="notification__dismiss"></div>
     </div>
+    
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
@@ -110,7 +107,6 @@ class iamNotification extends HTMLElement {
           });
 
           this.dispatchEvent(customEvent);
-
         },
         false
       );
@@ -118,9 +114,7 @@ class iamNotification extends HTMLElement {
 
     setupNotification(this);
 
-    trackComponent(this, 'iam-notification', [
-      'dismiss'
-    ]);
+    trackComponent(this, 'iam-notification', ['dismiss']);
   }
 }
 

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

@@ -5,15 +5,12 @@ class iamPagination 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/pagination.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
@@ -82,14 +79,15 @@ class iamPagination extends HTMLElement {
 
     // Next and previous buttons will simply trigger and on change on the select which in turn will dispatch an event
     next.addEventListener('click', () => {
-      select.value = parseInt(select.value) + 1;
 
-      select.dispatchEvent(new Event('change'));
+      console.log(parseInt(this.getAttribute('data-page')))
+
+      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) + 1);
     });
 
     prev.addEventListener('click', () => {
-      select.value = parseInt(select.value) - 1;
-      select.dispatchEvent(new Event('change'));
+      
+      this.setAttribute('data-page', parseInt(this.getAttribute('data-page')) - 1);
     });
 
     // Update how many is shown

package/assets/ts/components/password-indicator/password-indicator.component.ts

@@ -0,0 +1,24 @@
+import { trackComponentRegistered } from '../_global';
+import passwordIndicator from '../../modules/password-indicator';
+
+trackComponentRegistered('iam-password-indicator');
+
+class iamPasswordIndicator extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+     <slot></slot>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+  
+    passwordIndicator(this);
+  }
+}
+
+export default iamPasswordIndicator;

package/assets/ts/components/rank/rank.component.ts

@@ -10,13 +10,13 @@ class iamRank extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
-    const loadCSS = `@import "${assetLocation}/css/components/rank.component.css";`;
+    const loadRankCSS = `@import "${assetLocation}/css/components/rank.component.css";`;
     //const loadExtraCSS = `@import "${assetLocation}/css/components/rank.global.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    ${loadCSS}
+    ${loadRankCSS}
     </style>
     <div class="wrapper" part="wrapper">
       <div class="rank" part="rank">

package/assets/ts/components/rankings/rankings.component.ts

@@ -1,4 +1,5 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
+import iamRank from '../rank/rank.component';
 
 trackComponentRegistered('iam-rankings');
 class iamRankings extends HTMLElement {
@@ -69,7 +70,10 @@ class iamRankings extends HTMLElement {
 
       firstRow?.insertAdjacentHTML('afterbegin', `<iam-rank class="rank--medal first-position">1st</iam-rank>`);
     }
+
+    if (!window.customElements.get(`iam-rank`)) window.customElements.define(`iam-rank`, iamRank);
   }
 }
 
+
 export default iamRankings;

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

@@ -17,14 +17,10 @@ class iamSearch 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 template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     input {
       background: red;
     }

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

@@ -13,15 +13,12 @@ class iamSlider 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/slider.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     </style>
     <div class="row">

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

@@ -35,9 +35,7 @@ class iamSplitButton extends HTMLElement {
         </button>
 
         <iam-menu id="actions" style="position-anchor: --anchor-el;" popover>
-          <slot name="menu-item">
-
-          </slot>
+          <slot name="menu-item"></slot>
         </iam-menu>
 
       </div>

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

@@ -52,9 +52,9 @@ class iamTableAjax extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-
+/*
     if (!window.customElements.get(`iam-menu`)) {
-      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
+      import( `${assetLocation}/js/components/menu/menu.component.js`)
         .then((module) => {
           window.customElements.define(`iam-menu`, module.default);
         })
@@ -62,15 +62,15 @@ class iamTableAjax extends HTMLElement {
           console.log(err.message);
         });
     }
-
+*/
     setupBasicTable(this, table, form, pagination);
 
     setupAdvancedTable(this, table, form, pagination);
 
     setupAjaxTable(this, table, form, pagination);
 
-    paginateTable(component, table, form, pagination, () => {
-      loadAjaxTable(component, table, form, pagination);
+    paginateTable(this, table, form, pagination, () => {
+      loadAjaxTable(this, table, form, pagination);
     });
   }
 }

package/assets/ts/components/table-no-submit/table-no-submit.component.ts

@@ -5,6 +5,7 @@ import {
   setupNoSubmitTable,
   paginateRows,
   paginateTable,
+  updateAttributes
 } from '../../modules/table';
 
 class iamTableNoSubmit extends HTMLElement {
@@ -66,30 +67,10 @@ class iamTableNoSubmit extends HTMLElement {
     }
 
     setupBasicTable(this, table, form, pagination);
-
     setupAdvancedTable(this, table);
-
     setupNoSubmitTable(this, table, form, pagination, savedTableBody);
 
-    paginateRows(this);
-
-    if (pagination) {
-      paginateTable(this, table, form, pagination, () => {
-        paginateRows(this);
-      });
-    }
-
-    // #region shared advanced functions
 
-    //endregion
-
-    // select all
-    // search
-    // filter
-    // sort
-
-    /*
-    // Push up the pagination events
     pagination.addEventListener('update-show', (event) => {
       const show = event.detail.show;
 
@@ -108,7 +89,15 @@ class iamTableNoSubmit extends HTMLElement {
       updateAttributes(this, pagination);
     });
 
-*/
+
+    // For when the table contents is updated with an ajax call
+    this.addEventListener('update-table', (event) => {
+      
+      setupBasicTable(this, table, form, pagination);
+      setupAdvancedTable(this, table);
+      setupNoSubmitTable(this, table, form, pagination, savedTableBody);
+    });
+
   }
   /*
   static get observedAttributes(): any {

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

@@ -15,15 +15,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.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
+    
     ${loadCSS}
 
     :host(.admin-panel){