@iamproperty/components 7.5.0 → 7.5.1--beta2

package/assets/ts/components/inline-edit/inline-edit.component.ts

@@ -13,15 +13,12 @@ class iamInlineEdit 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/inline-edit.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `
     <style class="styles">
-    @import "${coreCSS}";
+    
     ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
@@ -53,13 +50,16 @@ class iamInlineEdit extends HTMLElement {
     const statusNotSaved = this.shadowRoot.querySelector('#notsaved');
 
     // Save the original value for later
-    let originalValue = input.value;
+    let originalValue = input ? input.value : '';
 
     // cancel
     cancelButton.addEventListener('click', () => {
-      input.value = originalValue;
+      if(input){
+          
+        input.value = originalValue;
+        input.blur();
+      }
 
-      input.blur();
       inlineEdit.blur();
 
       inlineEdit.classList.remove('was-validated');
@@ -86,39 +86,83 @@ class iamInlineEdit extends HTMLElement {
         detail: { name: input.getAttribute('name'), value: input.value },
       });
       inlineEdit.dispatchEvent(saveEvent);
-
-      //inlineEdit.setAttribute('data-saving','true');
-      input.disabled = true;
-
-      input.blur();
       inlineEdit.blur();
-
       statusSaving.classList.remove('d-none');
 
-      if (preview) {
-        console.log(input.value);
+      if(input){
+        input.disabled = true;
+
+        input.blur();
 
-        preview.innerHTML = input.value;
+        if (preview) {
+          preview.innerHTML = input.value;
+        }
       }
     });
 
-    // Save
-    if (input.tagName === 'INPUT') {
-      input.addEventListener('keydown', (event) => {
-        switch (
-          event.key // change to event.key to key to use the above variable
-        ) {
-          case 'Enter':
-            event.stopPropagation();
-            event.preventDefault();
-
-            saveButton.click();
-
-            break;
+    if(input){
+      // Save
+      if (input.tagName === 'INPUT') {
+        input.addEventListener('keydown', (event) => {
+          switch (
+            event.key // change to event.key to key to use the above variable
+          ) {
+            case 'Enter':
+              event.stopPropagation();
+              event.preventDefault();
+
+              saveButton.click();
+
+              break;
+          }
+        });
+      }
+
+      // enter key saves
+      if (input.tagName === 'SELECT') {
+        input.addEventListener('change', () => {
+          originalValue = input.value;
+
+          const saveEvent = new CustomEvent('inline-edit-save', {
+            detail: { name: input.getAttribute('name'), value: input.value },
+          });
+          inlineEdit.dispatchEvent(saveEvent);
+
+          inlineEdit.setAttribute('data-saving', 'true');
+          input.disabled = true;
+
+          input.blur();
+        });
+      }
+
+      if (input.tagName != 'SELECT') {
+        input.addEventListener('focus', () => {
+          input.select();
+        });
+      }
+
+      //blur it should autosave
+      input.addEventListener('blur', () => {
+        if (input.value != originalValue) {
+          if (inlineEdit.hasAttribute('data-autosave')) {
+            originalValue = input.value;
+
+            const saveEvent = new CustomEvent('inline-edit-autosave', {
+              detail: { name: input.getAttribute('name'), value: input.value },
+            });
+            inlineEdit.dispatchEvent(saveEvent);
+
+            statusSaving.classList.remove('d-none');
+
+            if (preview) {
+              preview.innerHTML = input.value;
+            }
+          } else if (!inlineEdit.querySelector('.inline-feedback')) {
+            statusNotSaved.classList.remove('d-none');
+          }
         }
       });
     }
-
     // Saved
     inlineEdit.addEventListener('inline-edit-saved', () => {
       setTimeout(() => {
@@ -142,51 +186,6 @@ class iamInlineEdit extends HTMLElement {
       }, 1000);
     });
 
-    // enter key saves
-    if (input.tagName === 'SELECT') {
-      input.addEventListener('change', () => {
-        originalValue = input.value;
-
-        const saveEvent = new CustomEvent('inline-edit-save', {
-          detail: { name: input.getAttribute('name'), value: input.value },
-        });
-        inlineEdit.dispatchEvent(saveEvent);
-
-        inlineEdit.setAttribute('data-saving', 'true');
-        input.disabled = true;
-
-        input.blur();
-      });
-    }
-
-    if (input.tagName != 'SELECT') {
-      input.addEventListener('focus', () => {
-        input.select();
-      });
-    }
-
-    //blur it should autosave
-    input.addEventListener('blur', () => {
-      if (input.value != originalValue) {
-        if (inlineEdit.hasAttribute('data-autosave')) {
-          originalValue = input.value;
-
-          const saveEvent = new CustomEvent('inline-edit-autosave', {
-            detail: { name: input.getAttribute('name'), value: input.value },
-          });
-          inlineEdit.dispatchEvent(saveEvent);
-
-          statusSaving.classList.remove('d-none');
-
-          if (preview) {
-            preview.innerHTML = input.value;
-          }
-        } else if (!inlineEdit.querySelector('.inline-feedback')) {
-          statusNotSaved.classList.remove('d-none');
-        }
-      }
-    });
-
     // checkboxes
     inlineEdit.addEventListener('change', (event) => {
       if (event && event.target instanceof HTMLElement && event.target.closest('input[type="checkbox"]')) {

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

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

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
@@ -154,6 +172,7 @@ class iamMultiselect extends HTMLElement {
         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 = '';
@@ -162,12 +181,19 @@ class iamMultiselect extends HTMLElement {
             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
@@ -175,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 () {
+        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);
+        }
       }
     });
 
@@ -344,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">

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

@@ -10,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>
@@ -29,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));
 

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/table/table.component.ts

@@ -10,6 +10,7 @@ import {
   loadAjaxTable,
   paginateTable,
 } from '../../modules/table';
+import iamMenu from '../menu/menu.component';
 
 class iamTableBasic extends HTMLElement {
   constructor() {
@@ -59,15 +60,7 @@ class iamTableBasic extends HTMLElement {
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
 
-    if (!window.customElements.get(`iam-menu`)) {
-      import(/* @vite-ignore */ `${assetLocation}/js/components/menu/menu.component.js`)
-        .then((module) => {
-          window.customElements.define(`iam-menu`, module.default);
-        })
-        .catch((err) => {
-          console.log(err.message);
-        });
-    }
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
 
     moveAttributesToComponents(this);
 

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

@@ -6,6 +6,7 @@ import {
   paginateTable,
   loadAjaxTable,
 } from '../../modules/table';
+import iamMenu from '../menu/menu.component';
 
 class iamTableAjax extends HTMLElement {
   constructor() {
@@ -52,25 +53,16 @@ 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`)
-        .then((module) => {
-          window.customElements.define(`iam-menu`, module.default);
-        })
-        .catch((err) => {
-          console.log(err.message);
-        });
-    }
-
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+    
     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);
     });
   }
 }