@iamproperty/components 7.3.0 → 7.5.0

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

@@ -347,6 +347,24 @@ class iamNav extends HTMLElement {
         searchButton.removeAttribute('aria-expanded');
       });
     }
+
+    if (this.classList.contains('nav--sticky')) {
+      let oldScrollY = window.scrollY;
+      window.onscroll = function (e): void {
+        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,7 @@
 import setupNotification, { closeNotification } from '../../modules/notification';
+import { trackComponent, trackComponentRegistered } from '../_global';
 
-// Data layer Web component created
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'Notification',
-});
+trackComponentRegistered('iam-notification');
 
 class iamNotification extends HTMLElement {
   constructor() {
@@ -44,7 +40,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 +51,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 +101,22 @@ 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']);
   }
 }