@iamproperty/components 7.3.0 → 7.5.0

package/assets/ts/components/card/card.component.ts

@@ -1,5 +1,6 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
 import { cardHTML, setupCard } from '../../modules/card.module';
+import iamMenu from '../menu/menu.component';
 
 trackComponentRegistered('iam-card');
 
@@ -32,6 +33,12 @@ class iamCard extends HTMLElement {
     const cardComponent = this;
     const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
 
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    if (!window.customElements.get(`iam-menu`)) window.customElements.define(`iam-menu`, iamMenu);
+
     setupCard(cardComponent);
 
     // Add Illustration HTML
@@ -51,22 +58,19 @@ class iamCard extends HTMLElement {
 
     // Add the dialog wrapper HTML
     if (cardComponent.querySelector('[slot="btns"]')) {
-      cardComponent.shadowRoot.innerHTML += `<div class="dialog__wrapper">
-      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical" popovertarget="actions" title="Further actions" type="button">Open further actions</button>
-      <div class="dialog--fix dialog--list" id="actions" popover>
+      cardComponent.shadowRoot.innerHTML += `<div class="menu__wrapper">
+      <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0" popovertarget="actions" style="anchor-name: --anchor-el;" title="Further actions" type="button">Open further actions</button>
+      <iam-menu class="dialog--fix dialog--list" id="actions" style="position-anchor: --anchor-el;" popover>
         <slot name="btns"></slot>
-      </div>
+      </iam-menu>
     </div>`;
 
       // safari and firefox anchor fix for cards
       if (!CSS.supports('top', 'anchor(top)')) {
-
-
         const actionButton = this.shadowRoot?.querySelector('[popovertarget="actions"]');
         const actionPopover = this.shadowRoot?.querySelector('[popover]');
 
         actionButton?.addEventListener('click', (event) => {
-
           this.style.setProperty('overflow', 'visible');
           this.style.setProperty('z-index', '999999');
 
@@ -76,18 +80,15 @@ class iamCard extends HTMLElement {
 
           actionPopover.style.setProperty('display', 'block');
           actionPopover.style.setProperty('top', top + 'px');
-          actionPopover.style.setProperty('left', (left - 100) + 'px');
+          actionPopover.style.setProperty('left', left - 100 + 'px');
         });
 
-        document.addEventListener("scroll", (event) => {
-
+        document.addEventListener('scroll', (event) => {
           actionPopover.style.setProperty('display', 'none');
         });
-
       }
     }
 
-
     // Make sure slotted buttons and links have correct button classes
     Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
       button.classList.add('btn');
@@ -107,8 +108,8 @@ class iamCard extends HTMLElement {
       });
     }
 
-    if (cardComponent.shadowRoot.querySelector('.dialog__wrapper')) {
-      const element = cardComponent.shadowRoot.querySelector('.dialog__wrapper');
+    if (cardComponent.shadowRoot.querySelector('.menu__wrapper')) {
+      const element = cardComponent.shadowRoot.querySelector('.menu__wrapper');
 
       element.addEventListener('mouseenter', () => {
         cardComponent.classList.add('prevent-hover');

package/assets/ts/components/carousel/carousel.component.ts

@@ -15,34 +15,32 @@ class iamCarousel extends HTMLElement {
     const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${loadCSS}
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    </style>
-    <div class="carousel" part="carousel">
-      <div class="carousel__wrapper">
-        <div class="carousel__inner">
-          <div class="carousel__content" part="content">
-            <slot></slot>
+    template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+        ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+      </style>
+      <div class="carousel" part="carousel">
+        <div class="carousel__wrapper">
+          <div class="carousel__inner">
+            <div class="carousel__content" part="content">
+              <slot></slot>
+            </div>
           </div>
         </div>
- 
-      </div>
         <div class="carousel__btns" part="btns">
-          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled  part="prev">Prev</button>
+          <button class="btn btn-secondary btn-compact fa-plus-large btn-prev" data-go="0" disabled part="prev">
+            Prev
+          </button>
           <button class="btn btn-secondary btn-compact fa-plus-large btn-next" data-go="2" part="next">Next</button>
         </div>
 
-        <div class="carousel__controls" part="controls">
-          
-        </div>
+        <div class="carousel__controls" part="controls"></div>
 
         <div class="carousel__progress" part="progress">
-          <input type="range" min="0" max="100" value="1" step="1">
+          <input type="range" min="0" max="100" value="1" step="1" />
         </div>
-
-    </div>
+      </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -30,6 +30,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
         <div class="side-menu" part="side-menu">
           <button class="btn btn-compact fa-chevron-right btn-secondary btn-sm btn-collapse" part="btn">Open or close Collapsible menu</button>
+          
           <div class="side-menu-content closed" part="side-menu-content">
             <slot name="menu"></slot>
           </div>
@@ -41,35 +42,55 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
       </div>
     `;
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    if (this.shadowRoot) {
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
   }
 
   connectedCallback(): void {
+    if (!this.shadowRoot) return;
+
+    const container = this.shadowRoot.querySelector('.container');
     const sideMenu = this.shadowRoot.querySelector('.side-menu');
     const sideMenuContent = this.shadowRoot.querySelector('.side-menu-content');
     const mainContent = this.shadowRoot.querySelector('.main-content');
     const button = this.shadowRoot.querySelector('.side-menu > .btn');
 
+    if (!sideMenu || !sideMenuContent || !mainContent || !button) return;
+
     // Load external CSS if needed
-    if (this.hasAttribute('data-css'))
-      this.shadowRoot
-        .querySelector('.styles')
-        .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+    if (this.hasAttribute('data-css')) {
+      const styles = this.shadowRoot.querySelector('.styles') as HTMLStyleElement;
+      if (styles) {
+        styles.insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+      }
+    }
 
-    // Set sde nav title
-    if (!this.hasAttribute('data-title')) this.setAttribute('data-title', 'configuration');
+    // Set side nav title
+    if (!this.hasAttribute('data-title')) {
+      this.setAttribute('data-title', 'configuration');
+    }
 
     sideMenuContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
     mainContent.insertAdjacentHTML('afterbegin', `<span class="h3">${this.getAttribute('data-title')}</span>`);
 
-    if (this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)')) {
-      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('h4');
-      this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)').classList.add('main-content__title');
+    const titleElement = this.querySelector(':scope > :is(h1,h2,h3,h4,h5,h6)') as HTMLElement;
+    if (titleElement) {
+      titleElement.classList.add('h4', 'main-content__title');
     }
 
     if (this.hasAttribute('open') && window.innerWidth > 992) {
       sideMenu.classList.add('open');
-      button.setAttribute('aria-expanded', true);
+      button.setAttribute('aria-expanded', 'true');
+    }
+
+    if (this.hasAttribute('inline')) {
+      container.classList.add('inline');
+    }
+
+    if (this.hasAttribute('menu-right')) {
+      sideMenu.classList.add('menu-right');
     }
 
     // Open the menu
@@ -79,7 +100,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
 
         setTimeout(function () {
           sideMenu.classList.add('open');
-          button.setAttribute('aria-expanded', true);
+          button.setAttribute('aria-expanded', 'true');
         }, 100);
       } else {
         sideMenu.classList.remove('open');
@@ -122,6 +143,26 @@ class iamCollapsibleSideMenu extends HTMLElement {
           }, 1000); // Delay until its close so the animation is broken
       }
     });
+
+    const sideMenuParentGroups = this.querySelectorAll('.parent');
+    const sideMenuParentGroupsTopLinks = this.querySelectorAll('.parent > li:first-of-type');
+
+    sideMenuParentGroupsTopLinks?.forEach((parentLink) => {
+      parentLink.addEventListener('click', () => {
+        if (!parentLink || !parentLink.parentElement) return false; // make sure elements exist
+
+        if (parentLink.parentElement.classList.contains('reveal')) {
+          parentLink.parentElement.classList.remove('reveal'); // remove if clicking a revealed parent
+        } else {
+          // remove other reveals and add reveal to this one
+          sideMenuParentGroups?.forEach((parentGroup) => {
+            parentGroup.classList.remove('reveal');
+          });
+
+          parentLink.parentElement.classList.add('reveal');
+        }
+      });
+    });
   }
 }
 

package/assets/ts/components/content/content.component.ts

@@ -0,0 +1,78 @@
+class iamContent 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/content.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <div class="content__container">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const component = this;
+    const url = this.getAttribute('data-url');
+
+    const registerComponents = (contentComponent): void => {
+      const components = ['card', 'marketing', 'notification'];
+
+      const assetLocation = document.body.hasAttribute('data-assets-location')
+        ? document.body.getAttribute('data-assets-location')
+        : '/assets';
+
+      // Load components - Each component will load once the first of its type has been loaded
+      components.forEach((component) => {
+        if (component == 'notification') {
+          document.querySelectorAll('[data-notification]').forEach((element) => {
+            element.outerHTML = element.outerHTML
+              .replace(/<div/g, '<iam-notification')
+              .replace(/<\/div>/g, '</iam-notification>');
+          });
+        }
+
+        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
+
+        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
+          .then((module) => {
+            if (!window.customElements.get(`iam-${component}`))
+              window.customElements.define(`iam-${component}`, module.default);
+          })
+          .catch((err) => {
+            console.log(err.message);
+          });
+      });
+    };
+
+    if (url) {
+      const newXHRRequest = new XMLHttpRequest();
+      newXHRRequest.open('GET', url, true);
+
+      newXHRRequest.onload = function (): void {
+        if (this.status === 200) {
+          const response = JSON.parse(this.responseText);
+          component.innerHTML = `${response.content.rendered}`;
+
+          registerComponents(component);
+        }
+      };
+
+      newXHRRequest.send();
+    }
+  }
+}
+
+export default iamContent;

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -0,0 +1,85 @@
+// Data layer Web component created
+declare global {
+  interface Window {
+    dataLayer: Array<object>;
+  }
+}
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  event: 'customElementRegistered',
+  element: 'Dark mode button',
+});
+
+class iamDarkMode 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/darkmode.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>${loadCSS}
+    </style>
+      <slot></slot>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    const label = this.querySelector('label');
+
+    const storedTheme = localStorage.getItem('user-theme');
+
+    // Work from local storage first then look at the media preferences
+    label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+    if (storedTheme == 'dark-theme') {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+      label?.classList.add('dark-theme');
+    } else if (storedTheme == 'light-theme') {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+      label?.classList.remove('dark-theme');
+    }
+
+    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    if (hasDarkPreference) {
+      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+      label?.classList.remove('dark-theme');
+    }
+
+    this.addEventListener('click', (event) => {
+      console.log(label?.querySelector('input:checked'));
+
+      if (label?.querySelector('input:checked')) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+        localStorage.setItem('user-theme', 'dark-theme');
+        document.documentElement.className = 'dark-theme';
+        label?.classList.add('dark-theme');
+      } else {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
+        localStorage.setItem('user-theme', 'light-theme');
+        document.documentElement.className = 'light-theme';
+        label?.classList.remove('dark-theme');
+      }
+    });
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+      if (matches) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+        label?.classList.add('dark-theme');
+      }
+    });
+
+    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ({ matches }) => {
+      if (matches) {
+        label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
+        label?.classList.remove('dark-theme');
+      }
+    });
+  }
+}
+
+export default iamDarkMode;

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

@@ -16,7 +16,7 @@ class iamMarketing extends HTMLElement {
     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.css";`;
+    const loadCSS = `@import "${assetLocation}/css/components/marketing.component.css";`;
 
     const template = document.createElement('template');
     template.innerHTML = `

package/assets/ts/components/menu/menu.component.ts

@@ -6,13 +6,13 @@ class iamMenu extends HTMLElement {
     const assetLocation = document.body.hasAttribute('data-assets-location')
       ? document.body.getAttribute('data-assets-location')
       : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/menu.component.css";`;
+    const menuCSS = `@import "${assetLocation}/css/components/menu.component.css";`;
 
     const template = document.createElement('template');
 
     template.innerHTML = `
     <style>
-    ${loadCSS}
+    ${menuCSS}
     </style>
     <div class="menu--inner" part="inner">
       <slot></slot>
@@ -24,8 +24,14 @@ class iamMenu extends HTMLElement {
     const menuID = this.hasAttribute('id') ? this.getAttribute('id') : false;
     const menuButton = document.querySelector(`[popovertarget="${menuID}"]`);
 
-    const topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
-    const menuItems = this.querySelectorAll('a, button');
+    let topLevelmenuItems = this.querySelectorAll(':scope > a, :scope > button, :scope > details > summary');
+    let menuItems = this.querySelectorAll('a, button');
+
+    if (this.closest('.menu__wrapper')) {
+      menuItems = this.shadowRoot.querySelector('slot').assignedElements({ flatten: true });
+      topLevelmenuItems = menuItems;
+    }
+
     const subMenus = this.querySelectorAll('details');
 
     let subNextIndex;
@@ -136,19 +142,21 @@ class iamMenu extends HTMLElement {
       const updateEvent = new CustomEvent(e.newState, { detail: { id: this.getAttribute('id'), target: e.target } });
       this.dispatchEvent(updateEvent);
 
+      // Fix the focus
+      if (this.closest('.menu__wrapper')) {
+        menuItems[0].focus();
+      }
+
       if (this.hasAttribute('popover-open')) {
         e.preventDefault();
         this.removeAttribute('popover-open');
         this.hidePopover();
       }
 
-      if(this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)){
-
-        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.setAttribute('aria-pressed','true');
+      if (this.matches(':popover-open') && document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)) {
+        document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.setAttribute('aria-pressed', 'true');
         document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.add('active');
-      }
-      else {
-
+      } else {
         document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.removeAttribute('aria-pressed');
         document.querySelector(`[popovertarget="${this.getAttribute('id')}"]`)?.classList.remove('active');
       }

package/assets/ts/components/milestone/milestone.component.ts

@@ -0,0 +1,43 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import milestone from '../../modules/milestone';
+
+trackComponentRegistered('iam-milestone');
+
+class iamMilestone extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    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}";
+    </style>
+      <div class="milestone-wrap" part="milestone-wrap">
+        <slot name="milestone-intro" class="milestone-intro" part="milestone-intro"></slot>
+        <slot>
+          <div class="task-wrap" part="milestone-task-wrap"></div>
+        </slot>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const milestoneComponent = this;
+
+    trackComponent(milestoneComponent, 'iam-milestone', ['milestone-item-closed', 'milestone-item-opened']);
+
+    milestone(this);
+  }
+}
+
+export default iamMilestone;

package/assets/ts/components/milestone-group/milestone-group.component.ts

@@ -0,0 +1,39 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+import milestoneGroup from '../../modules/milestone-group';
+
+trackComponentRegistered('iam-milestone-group');
+
+class iamMilestoneGroup extends HTMLElement {
+  constructor() {
+    super();
+    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}";
+    </style>
+      <div class="milestone-group" part="milestone-group">
+        <slot>
+        </slot>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const milestoneGroupComponent = this;
+
+    trackComponent(milestoneGroupComponent, 'iam-milestone-group', ['hide-future-items', 'show-future-items']);
+
+    milestoneGroup(this);
+  }
+}
+
+export default iamMilestoneGroup;

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

@@ -67,8 +67,6 @@ class iamMultiselect extends HTMLElement {
         mutations.forEach(function (mutationRecord) {
           const targetElement = mutationRecord.target as HTMLElement;
 
-          console.log(targetElement);
-
           if (targetElement.classList.contains('was-validated')) {
             wrapper.classList.add('was-validated');
           } else {
@@ -149,7 +147,23 @@ class iamMultiselect extends HTMLElement {
       clearTimeout(hoverTimeout);
     });
 
-    search.addEventListener('blur', () => {
+    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);
+          });
+        }
+      }, 200);
+
       clearTimeout(hoverTimeout);
       hoverTimeout = setTimeout(function () {
         multiselect.classList.remove('hover');
@@ -163,6 +177,7 @@ class iamMultiselect extends HTMLElement {
 
         setItem(checkbox);
 
+        search.value = '';
         search.focus();
         clearTimeout(hoverTimeout);
         multiselect.classList.add('hover');
@@ -190,6 +205,41 @@ class iamMultiselect extends HTMLElement {
       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 'ArrowUp':
           // Up pressed
           event.preventDefault();
@@ -234,6 +284,13 @@ class iamMultiselect extends HTMLElement {
           setItem(activeElement);
           search.focus();
 
+          break;
+        case 'Backspace':
+          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
+            activeElement.checked = false;
+            setItem(activeElement);
+            search.focus();
+          }
           break;
       }
     });