@iamproperty/components 7.5.0 → 7.5.1--beta1

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){

package/assets/ts/modules/inputs.ts

@@ -2,13 +2,7 @@ import hibpCheck from '../vendor/hibp.js';
 
 const extendInputs = (body): void => {
   function loadInput(): void {
-    Array.from(document.querySelectorAll('label input')).forEach((input) => {
-      if (!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required')) {
-        if (input.parentNode.tagName.toLowerCase() == 'span')
-          input.parentElement.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
-        else input.insertAdjacentHTML('beforebegin', `<span class="optional-text"></span>`);
-      }
-    });
+
 
     // Date restrictions
     if (document.querySelector('input[type="date"]')) {

package/assets/ts/modules/password-indicator.ts

@@ -0,0 +1,29 @@
+export const changeType = function (element: Element): void {
+    const buttonEle = element.querySelector('button')
+    const associatedInput = element?.parentNode?.querySelector('input');
+
+    element.addEventListener('click', (event) => {
+      const currentType = associatedInput.type;
+
+      const newType = currentType === 'password' ? 'text' : 'password';
+      const isPasswordType = currentType === 'password';
+
+      associatedInput.setAttribute('type', newType);
+      associatedInput.setAttribute('data-password-type', isPasswordType);
+
+      if (element.hasAttribute('data-alt-class')) {
+        const newClass = element.getAttribute('data-alt-class');
+        element.setAttribute('data-alt-class', buttonEle.getAttribute('class'));
+        buttonEle.setAttribute('class', newClass);
+      }
+    
+    });
+}
+
+
+const passwordIndicator = function (element: Element): void {
+  changeType(element)
+};
+
+export default passwordIndicator;
+

package/assets/ts/modules/table.ts

@@ -129,10 +129,18 @@ export const findForm = (component, table): HTMLElement => {
     form = document.querySelector(`#${component.getAttribute('data-filterby')}`);
   } else if (component.closest('form')) {
     form = component.closest('form');
-  } else {
+  } 
+  else if (component.querySelector('form')){
+    form = component.querySelector('form');
+  }else {
     table.parentNode.insertBefore(form, table.nextSibling);
   }
 
+
+  if(component.hasAttribute('data-ajax')){
+    form.setAttribute('data-ajax',component.getAttribute('data-ajax'))
+  }
+
   return form;
 };
 // #endregion
@@ -341,6 +349,7 @@ export const setupAdvancedTable = (component, table): void => {
       : document.querySelector(`iam-actionbar[data-for='${component.getAttribute('id')}']`);
 
     addSelectboxes(component, table, actionbar);
+
   }
 
   component.querySelectorAll('.dialog__wrapper .btn-compact').forEach((btn, index) => {
@@ -503,8 +512,9 @@ export const setupNoSubmitTable = (component, table, form, pagination, savedTabl
       sortTable(table, form, savedTableBody);
     }
   });
-
+/*
   addFilterEventListeners(component, table, form, pagination, savedTableBody);
+  */
 };
 
 // #region No submit table functions
@@ -726,8 +736,11 @@ export const addFilterEventListeners = (component, table, form, pagination, save
       });
       component.dispatchEvent(submitEvent);
 
+
       clearTimeout(timer);
-      formSubmit(event);
+
+      if(component.tagName != "IAM-TABLE-NO-SUBMIT")
+        formSubmit(event);
     });
   }
 
@@ -1248,7 +1261,28 @@ export const setupAjaxTable = (component, table, form, pagination): void => {
     actionbar.addEventListener('change', (event) => {
       loadAjaxTable(component, table, form, pagination);
     });
+
+    actionbar.addEventListener('search-submit', (event) => {
+      if (form.querySelector('input[data-search]')) {
+        form.querySelector('input[data-search]').value = event.detail.search;
+      } else {
+        form.insertAdjacentHTML(
+          'beforeend',
+          `<input type="hidden" name="search" data-search="${component.querySelector('iam-actionbar[data-search]').getAttribute('data-search')}" value="${event.detail.search}"/>`
+        );
+      }
+
+      const submitEvent = new CustomEvent('search-submit', {
+        detail: event.details,
+      });
+      component.dispatchEvent(submitEvent);
+
+      loadAjaxTable(component, table, form, pagination);
+      console.log('hello');
+    });
   }
+
+
 };
 // #region ajax tables functions
 
@@ -1454,6 +1488,10 @@ export const loadAjaxTable = async function (component, table, form, pagination)
         // Remove loading on the pagination
         pagination.removeAttribute('data-loading');
         form.classList.remove('processing');
+
+        if(table.querySelectorAll('tbody tr').length < parseInt(component.getAttribute('data-show'))){
+          pagination.classList.add('d-none');
+        }
       });
   } catch (error) {
     console.log(error);

package/assets/ts/scripts.ts

@@ -42,6 +42,8 @@ const components = [
   'milestone-group',
   'milestone',
   'darkmode',
+  'password-indicator'
+
 ];
 
 // Attach classes to dom elements