@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

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

@@ -1,349 +1,349 @@
-import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown';
-
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'mutliselect',
-});
-
-class iamMultiselect extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-      
-    const loadCSS = `@import "${assetLocation}/css/components/multiselect.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    
-    ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <label for="search" class="mb-0"><span class="inner-label label"></span> <slot name="feedback"></slot>
-    <div class="outer">
-    <div class="wrapper">
-      
-      <slot name="checked"></slot>
-      <input name="search" id="search" autocomplete="off" required part="search-input"/>
-      <span class="admin-panel feedback">This field is required</span>
-      <div class="admin-panel dropdown" part="dropdown">
-        <slot></slot>
-      </div>
-      <button id="clear" class="btn btn-action "><span class="visually-hidden">Clear</span></button>
-    </div>
-    </div>
-    </label>
-    `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const multiselect = this;
-    const form = this.closest('form');
-    const wrapper = this.shadowRoot.querySelector('.wrapper');
-    const search = multiselect.shadowRoot.querySelector('#search');
-    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');
-
-    // Make sure the dropdown options are set
-    Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
-      label.classList.add('dropdown__option');
-      label?.querySelector('i')?.remove();
-    });
-
-    if (multiselect.hasAttribute('placeholder')) {
-      search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
-    }
-
-    multiselect.setAttribute('data-error', 'true');
-
-    // If in form and is required lets watch for the form being submitted
-    if (form && multiselect.hasAttribute('data-is-required')) {
-      const observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function (mutationRecord) {
-          const targetElement = mutationRecord.target as HTMLElement;
-
-          if (targetElement.classList.contains('was-validated')) {
-            wrapper.classList.add('was-validated');
-          } else {
-            wrapper.classList.remove('was-validated');
-          }
-        });
-      });
-
-      if (form.classList.contains('was-validated')) {
-        wrapper.classList.add('was-validated');
-      } else {
-        wrapper.classList.remove('was-validated');
-      }
-
-      observer.observe(form, {
-        attributes: true,
-        attributeFilter: ['style', 'class'],
-      });
-    }
-
-    // Set the correct attributes
-    function setItem(inputToSet): void {
-      if (inputToSet.checked == false) {
-        inputToSet.closest('label').removeAttribute('slot');
-        inputToSet.closest('label').removeAttribute('style');
-        inputToSet.closest('label').removeAttribute('data-order');
-      } else {
-        order++;
-
-        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
-      if (multiselect.querySelector('label[slot="checked"]')) {
-        wrapper.classList.add('filled');
-        multiselect.removeAttribute('data-error');
-
-        search.removeAttribute('placeholder');
-      } else {
-        wrapper.classList.remove('filled');
-        multiselect.setAttribute('data-error', 'true');
-
-        if (multiselect.hasAttribute('placeholder')) {
-          search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
-        }
-      }
-    }
-
-    // Set on load
-    Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox) => {
-      setItem(checkbox);
-    });
-
-    search.addEventListener('input', () => {
-
-      if (multiselect.hasAttribute('data-url')) {
-      
-        if (search.value.length == 3) {
-          searchAjax(multiselect, search, filterList);
-        }
-      } else {
-          
-        filterList(multiselect, search);
-      }
-    });
-
-    // Add a delayed hover effect for non hover devices
-    let hoverTimeout;
-    multiselect.addEventListener('focus', () => {
-      multiselect.classList.add('hover');
-      clearTimeout(hoverTimeout);
-    });
-
-    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]`)) {
-            multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`).checked = true;
-
-            setItem(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`));
-          }
-          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');
-      }, 500);
-    });
-
-    // Set items
-    multiselect.addEventListener('change', (event) => {
-      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 = '';
-        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');
-        }
-      }
-    });
-
-    // Clear all
-    button.addEventListener('click', function () {
-      Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
-        checkbox.checked = false;
-
-        setItem(checkbox);
-      });
-
-      search.focus();
-    });
-
-    // Add some keyboard features to keep it accessible
-    addKeyboardEvents(this, search);
-    multiselect.addEventListener('keydown', function (event) {
-      const activeElement = document.activeElement;
-
-      switch (
-        event.key // change to event.key to key to use the above variable
-      ) {
-        case 'ArrowLeft':
-          // Up pressed
-          event.preventDefault();
-
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const arrCheckboxes = multiselect.querySelectorAll(`label[slot="checked"][slot="checked"]`);
-
-            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
-            const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
-
-            if (prevCheckbox) prevCheckbox.focus();
-            else search.focus();
-          } else if (activeElement == multiselect) {
-            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function (a, b) {
-              return +a.dataset.order - +b.dataset.order;
-            });
-
-            options.pop().focus();
-          }
-
-          break;
-        case 'ArrowRight':
-          // Up pressed
-          event.preventDefault();
-
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const arrCheckboxes = multiselect.querySelectorAll(`label[slot="checked"][slot="checked"]`);
-
-            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
-            const nextCheckbox = Array.from(arrCheckboxes)[activeIndex + 1];
-
-            if (nextCheckbox) nextCheckbox.focus();
-            else search.focus();
-          }
-          break;
-        case 'Enter':
-          event.stopPropagation();
-          event.preventDefault();
-
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            if (activeElement.checked == false) activeElement.checked = true;
-            else activeElement.checked = false;
-          }
-
-          setItem(activeElement);
-          search.focus();
-
-          break;
-        case 'Backspace':
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            activeElement.checked = false;
-            setItem(activeElement);
-            search.focus();
-          }
-          break;
-      }
-    });
-
-
-    function checkLastTag(): Element | null {
-      if (order == 0) return false;
-
-      let lastTag = multiselect.querySelector(`label[data-order="${order}"]`);
-
-      if (!lastTag) {
-        lastTag = checkLastTag(order--);
-      }
-
-      return lastTag;
-    }
-
-    search.addEventListener('keydown', function (event) {
-      switch (
-        event.key // change to event.key to key to use the above variable
-      ) {
-        case 'Enter':
-          const match = multiselect.querySelector(`input[value="${search.value}"]:not(:checked)`);
-
-          if (!match) search.value = '';
-
-          search.focus();
-
-          break;
-        case 'Backspace':
-          if (!search.value) {
-            const lastTag = checkLastTag(order);
-
-            if (lastTag) {
-              const lastTagInput = lastTag.querySelector('input');
-              lastTagInput.checked = false;
-              setItem(lastTagInput);
-            }
-
-            search.focus();
-          }
-
-          break;
-      }
-    });
-
-    // Fix for the inline edit multiselect
-    multiselect.addEventListener('mousedown', () => {
-      wrapper.setAttribute('data-mousedown', 'true');
-    });
-
-    multiselect.addEventListener('mouseup', () => {
-      wrapper.removeAttribute('data-mousedown');
-    });
-
-  }
-}
-
-export default iamMultiselect;
+import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'mutliselect',
+});
+
+class iamMultiselect extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+      
+    const loadCSS = `@import "${assetLocation}/css/components/multiselect.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    
+    ${loadCSS}
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <label for="search" class="mb-0"><span class="inner-label label"></span> <slot name="feedback"></slot>
+    <div class="outer">
+    <div class="wrapper">
+      
+      <slot name="checked"></slot>
+      <input name="search" id="search" autocomplete="off" required part="search-input"/>
+      <span class="admin-panel feedback">This field is required</span>
+      <div class="admin-panel dropdown" part="dropdown">
+        <slot></slot>
+      </div>
+      <button id="clear" class="btn btn-action "><span class="visually-hidden">Clear</span></button>
+    </div>
+    </div>
+    </label>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const multiselect = this;
+    const form = this.closest('form');
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+    const search = multiselect.shadowRoot.querySelector('#search');
+    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');
+
+    // Make sure the dropdown options are set
+    Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
+      label.classList.add('dropdown__option');
+      label?.querySelector('i')?.remove();
+    });
+
+    if (multiselect.hasAttribute('placeholder')) {
+      search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
+    }
+
+    multiselect.setAttribute('data-error', 'true');
+
+    // If in form and is required lets watch for the form being submitted
+    if (form && multiselect.hasAttribute('data-is-required')) {
+      const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutationRecord) {
+          const targetElement = mutationRecord.target as HTMLElement;
+
+          if (targetElement.classList.contains('was-validated')) {
+            wrapper.classList.add('was-validated');
+          } else {
+            wrapper.classList.remove('was-validated');
+          }
+        });
+      });
+
+      if (form.classList.contains('was-validated')) {
+        wrapper.classList.add('was-validated');
+      } else {
+        wrapper.classList.remove('was-validated');
+      }
+
+      observer.observe(form, {
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+      });
+    }
+
+    // Set the correct attributes
+    function setItem(inputToSet): void {
+      if (inputToSet.checked == false) {
+        inputToSet.closest('label').removeAttribute('slot');
+        inputToSet.closest('label').removeAttribute('style');
+        inputToSet.closest('label').removeAttribute('data-order');
+      } else {
+        order++;
+
+        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
+      if (multiselect.querySelector('label[slot="checked"]')) {
+        wrapper.classList.add('filled');
+        multiselect.removeAttribute('data-error');
+
+        search.removeAttribute('placeholder');
+      } else {
+        wrapper.classList.remove('filled');
+        multiselect.setAttribute('data-error', 'true');
+
+        if (multiselect.hasAttribute('placeholder')) {
+          search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
+        }
+      }
+    }
+
+    // Set on load
+    Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]:checked`)).forEach((checkbox) => {
+      setItem(checkbox);
+    });
+
+    search.addEventListener('input', () => {
+
+      if (multiselect.hasAttribute('data-url')) {
+      
+        if (search.value.length == 3) {
+          searchAjax(multiselect, search, filterList);
+        }
+      } else {
+          
+        filterList(multiselect, search);
+      }
+    });
+
+    // Add a delayed hover effect for non hover devices
+    let hoverTimeout;
+    multiselect.addEventListener('focus', () => {
+      multiselect.classList.add('hover');
+      clearTimeout(hoverTimeout);
+    });
+
+    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]`)) {
+            multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`).checked = true;
+
+            setItem(multiselect.querySelector(`input[type="checkbox"][value="${search.value}" i]`));
+          }
+          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');
+      }, 500);
+    });
+
+    // Set items
+    multiselect.addEventListener('change', (event) => {
+      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 = '';
+        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');
+        }
+      }
+    });
+
+    // Clear all
+    button.addEventListener('click', function () {
+      Array.from(multiselect.querySelectorAll(`label input[type="checkbox"]`)).forEach((checkbox) => {
+        checkbox.checked = false;
+
+        setItem(checkbox);
+      });
+
+      search.focus();
+    });
+
+    // Add some keyboard features to keep it accessible
+    addKeyboardEvents(this, search);
+    multiselect.addEventListener('keydown', function (event) {
+      const activeElement = document.activeElement;
+
+      switch (
+        event.key // change to event.key to key to use the above variable
+      ) {
+        case 'ArrowLeft':
+          // Up pressed
+          event.preventDefault();
+
+          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+            const arrCheckboxes = multiselect.querySelectorAll(`label[slot="checked"][slot="checked"]`);
+
+            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
+            const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
+
+            if (prevCheckbox) prevCheckbox.focus();
+            else search.focus();
+          } else if (activeElement == multiselect) {
+            const options = Array.from(multiselect.querySelectorAll('label[slot="checked"]')).sort(function (a, b) {
+              return +a.dataset.order - +b.dataset.order;
+            });
+
+            options.pop().focus();
+          }
+
+          break;
+        case 'ArrowRight':
+          // Up pressed
+          event.preventDefault();
+
+          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+            const arrCheckboxes = multiselect.querySelectorAll(`label[slot="checked"][slot="checked"]`);
+
+            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
+            const nextCheckbox = Array.from(arrCheckboxes)[activeIndex + 1];
+
+            if (nextCheckbox) nextCheckbox.focus();
+            else search.focus();
+          }
+          break;
+        case 'Enter':
+          event.stopPropagation();
+          event.preventDefault();
+
+          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+            if (activeElement.checked == false) activeElement.checked = true;
+            else activeElement.checked = false;
+          }
+
+          setItem(activeElement);
+          search.focus();
+
+          break;
+        case 'Backspace':
+          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+            activeElement.checked = false;
+            setItem(activeElement);
+            search.focus();
+          }
+          break;
+      }
+    });
+
+
+    function checkLastTag(): Element | null {
+      if (order == 0) return false;
+
+      let lastTag = multiselect.querySelector(`label[data-order="${order}"]`);
+
+      if (!lastTag) {
+        lastTag = checkLastTag(order--);
+      }
+
+      return lastTag;
+    }
+
+    search.addEventListener('keydown', function (event) {
+      switch (
+        event.key // change to event.key to key to use the above variable
+      ) {
+        case 'Enter':
+          const match = multiselect.querySelector(`input[value="${search.value}"]:not(:checked)`);
+
+          if (!match) search.value = '';
+
+          search.focus();
+
+          break;
+        case 'Backspace':
+          if (!search.value) {
+            const lastTag = checkLastTag(order);
+
+            if (lastTag) {
+              const lastTagInput = lastTag.querySelector('input');
+              lastTagInput.checked = false;
+              setItem(lastTagInput);
+            }
+
+            search.focus();
+          }
+
+          break;
+      }
+    });
+
+    // Fix for the inline edit multiselect
+    multiselect.addEventListener('mousedown', () => {
+      wrapper.setAttribute('data-mousedown', 'true');
+    });
+
+    multiselect.addEventListener('mouseup', () => {
+      wrapper.removeAttribute('data-mousedown');
+    });
+
+  }
+}
+
+export default iamMultiselect;