@iamproperty/components 7.2.2--beta3 → 7.4.0

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'
+    ]);
   }
 }