@iamproperty/components 7.3.0 → 7.4.0

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

@@ -32,6 +32,20 @@ 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`)) {
+      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);
+        });
+    }
+
     setupCard(cardComponent);
 
     // Add Illustration HTML
@@ -51,22 +65,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 +87,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 +115,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/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/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

@@ -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,45 @@
+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 {
+    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,41 @@
+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 {
+    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,9 +147,30 @@ 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');
       }, 1000);
     });
@@ -163,6 +182,7 @@ class iamMultiselect extends HTMLElement {
 
         setItem(checkbox);
 
+        search.value = "";
         search.focus();
         clearTimeout(hoverTimeout);
         multiselect.classList.add('hover');
@@ -190,6 +210,43 @@ 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 +291,14 @@ 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;
       }
     });
@@ -250,6 +315,7 @@ class iamMultiselect extends HTMLElement {
       return lastTag;
     }
 
+
     search.addEventListener('keydown', function (event) {
       switch (
         event.key // change to event.key to key to use the above variable

package/assets/ts/components/nav/nav.component.ts

@@ -347,6 +347,31 @@ class iamNav extends HTMLElement {
         searchButton.removeAttribute('aria-expanded');
       });
     }
+
+    if(this.classList.contains('nav--sticky')){
+      
+      console.log('hey');
+
+      let oldScrollY = window.scrollY;
+      window.onscroll = function(e) {
+        if(oldScrollY < window.scrollY){
+          document.body.setAttribute('data-direction', "down");
+        } else {
+          document.body.setAttribute('data-direction', "up");
+        }
+
+        if(window.scrollY > 100){
+          document.body.classList.add('past100');
+        }
+        else {
+
+          document.body.classList.remove('past100');
+        }
+        oldScrollY = window.scrollY;
+      }
+
+    }
+
   }
 }
 

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

@@ -1,11 +1,8 @@
 import setupNotification, { closeNotification } from '../../modules/notification';
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-notification');
 
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'Notification',
-});
 
 class iamNotification extends HTMLElement {
   constructor() {
@@ -44,7 +41,8 @@ class iamNotification extends HTMLElement {
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const wrapper = this;
-    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';
+    const defaultStatusBG = this.hasAttribute('data-type') ? 'white' : 'info';
+    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : defaultStatusBG;
 
     if (this.hasAttribute('data-type')) this.classList.add(`bg-${statusBG}`);
     else {
@@ -54,16 +52,28 @@ class iamNotification extends HTMLElement {
     if (!this.querySelector('i')) {
       switch (statusBG) {
         case 'danger':
-          this.innerHTML += '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>';
+          this.insertAdjacentHTML(
+            'beforeend',
+            '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>'
+          );
           break;
         case 'warning':
-          this.innerHTML += '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>';
+          this.insertAdjacentHTML(
+            'beforeend',
+            '<i class="fa-solid fa-triangle-exclamation" aria-hidden="true" slot="icon"></i>'
+          );
           break;
         case 'success':
-          this.innerHTML += '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>';
+          this.insertAdjacentHTML(
+            'beforeend',
+            '<i class="fa-solid fa-check-circle" aria-hidden="true" slot="icon"></i>'
+          );
           break;
         default:
-          this.innerHTML += '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>';
+          this.insertAdjacentHTML(
+            'beforeend',
+            '<i class="fa-solid fa-circle-info" aria-hidden="true" slot="icon"></i>'
+          );
       }
     }
 
@@ -92,12 +102,25 @@ class iamNotification extends HTMLElement {
         'click',
         function () {
           closeNotification(wrapper);
+
+          const customEvent = new CustomEvent('dismiss', {
+            detail: {
+              class: this.classList,
+            },
+          });
+
+          this.dispatchEvent(customEvent);
+
         },
         false
       );
     }
 
     setupNotification(this);
+
+    trackComponent(this, 'iam-notification', [
+      'dismiss'
+    ]);
   }
 }