@iamproperty/components 7.5.1--beta2 → 7.5.1--beta3

package/assets/ts/modules/advanced-select.ts

@@ -1,50 +1,50 @@
 function advancedSelect(advancedSelect, displayInputField, datalist, isSearch = false): boolean | void {
   let currentFocus = -1;
 
-  if (!isSearch) {
-    displayInputField.addEventListener('focus', function () {
+  const datalistWrapper = datalist.closest('.datalist__wrapper') ? datalist.closest('.datalist__wrapper') : datalist;
+
+  // Hide the default datalist
+  displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
+  displayInputField.setAttribute('list', '');
+
+  if(displayInputField.hasAttribute('placeholder'))
+    displayInputField.setAttribute('data-placeholder', displayInputField.getAttribute('placeholder'));
+
+  displayInputField.addEventListener('focus', function () {
+    
+    if(displayInputField.value != ""){
+        
       displayInputField.setAttribute('placeholder', displayInputField.value);
       displayInputField.setAttribute('data-value', displayInputField.value);
-      displayInputField.value = '';
-
-      displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
-      displayInputField.setAttribute('list', '');
+    }
+    displayInputField.value = '';
 
-      datalist.style.display = 'block';
-    });
-  } else {
-    displayInputField.addEventListener('focus', function () {
-      displayInputField.setAttribute('data-list', displayInputField.getAttribute('list'));
-      displayInputField.setAttribute('list', '');
+  });
 
-      datalist.style.display = 'block';
-    });
-  }
+    
 
   displayInputField.addEventListener('blur', function () {
     if (displayInputField.hasAttribute('data-value')) {
       displayInputField.value = displayInputField.getAttribute('data-value');
     }
 
-    setTimeout(() => {
-      datalist.style.display = 'none';
-    }, 500);
+    if(displayInputField.hasAttribute('data-placeholder'))
+      displayInputField.setAttribute('placeholder',displayInputField.getAttribute('data-placeholder'));
   });
 
   for (const option of datalist.options) {
     if (option.innerHTML == '') option.innerHTML = option.value;
   }
 
-  advancedSelect.addEventListener('click', function () {
-    if (event && event.target instanceof HTMLElement && event.target.closest('datalist option')) {
-      const option = event.target.closest('datalist option');
+  datalist.addEventListener('click', function (event) {
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('option')) {
+      const option = event.target.closest('option');
 
       displayInputField.value = option.value;
 
       if (typeof window.triggerDynamicEvent == 'function') window.triggerDynamicEvent(displayInputField);
 
-      datalist.style.display = 'none';
-
       for (const optionInner of datalist.options) {
         optionInner.classList.remove('active');
       }
@@ -60,13 +60,16 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     for (const option of datalist.options) {
       if (option.value.toUpperCase().indexOf(text) > -1) {
         option.style.display = 'block';
+        option.classList.remove('hide');
       } else {
         option.style.display = 'none';
+        option.classList.add('hide');
       }
     }
   });
 
-  displayInputField.addEventListener('keydown', function (e) {
+  advancedSelect.addEventListener('keydown', function (e) {
+
     if (e.keyCode == 40) {
       currentFocus++;
       addActive(datalist.options);
@@ -91,6 +94,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
   }
 
   function removeActive(x): void {
+    if (!x) return false;
     for (let i = 0; i < x.length; i++) {
       x[i].classList.remove('active');
     }
@@ -103,10 +107,13 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       'beforeend',
       '<button class="empty btn btn-action"><i class="fa-light fa-times me-0"></i></button>'
     );
-  const closeBtn = advancedSelect.querySelector('.empty');
+  const closeBtn = advancedSelect.querySelector('.empty') ? advancedSelect.querySelector('.empty') : advancedSelect.shadowRoot.querySelector('.empty');
 
   closeBtn.addEventListener('click', function (e) {
-    displayInputField.removeAttribute('placeholder');
+    
+    if(displayInputField.hasAttribute('data-placeholder'))
+      displayInputField.setAttribute('placeholder', displayInputField.getAttribute('data-placeholder'));
+
     displayInputField.removeAttribute('data-value');
     displayInputField.value = '';
 
@@ -114,6 +121,9 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
       optionInner.classList.remove('active');
       optionInner.removeAttribute('style');
     }
+
+    const updateEvent = new CustomEvent('close-button-pressed');
+    advancedSelect.dispatchEvent(updateEvent);
   });
 }
 

package/assets/ts/modules/helpers.ts

@@ -54,9 +54,22 @@ export const addGlobalEvents = (body): void => {
     }
   });
 
-  document.addEventListener('submit', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.matches('form')) {
-      const form = event.target;
+  Array.from(document.querySelectorAll('form')).forEach((form) => {
+    form.addEventListener('submit', (event) => {
+      if (
+        form.querySelector(':invalid')
+      ) {
+        form.classList.add('was-validated');
+        form?.querySelector('input:invalid')?.scrollIntoView();
+        event.preventDefault();
+      }
+    });
+  });
+  
+  document.addEventListener('click', (event) => {
+    
+    if (event && event.target instanceof HTMLElement && event.target.matches('form button:not([type=button])')) {
+      const form = event.target.closest('form');
 
       // Reset password types
       Array.from(form.querySelectorAll('[data-password-type]')).forEach((input) => {
@@ -69,6 +82,7 @@ export const addGlobalEvents = (body): void => {
         form.querySelector('.pwd-checker[data-strength="2"]')
       ) {
         form.classList.add('was-validated');
+        form?.querySelector('input:invalid')?.scrollIntoView();
         event.preventDefault();
       }