@iamproperty/components 7.0.0 → 7.1.0--beta2

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

@@ -3,18 +3,21 @@
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "nav"
+  event: 'customElementRegistered',
+  element: 'nav',
 });
 
 class iamNav extends HTMLElement {
-
-  constructor(){
+  constructor() {
     super();
-    const shadowRoot = 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 shadowRoot = 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 loadCSS = `@import "${assetLocation}/css/components/nav.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/nav.global.css";`;
 
@@ -54,184 +57,193 @@ class iamNav extends HTMLElement {
     `;
 
     shadowRoot.appendChild(template.content.cloneNode(true));
-    
+
     // insert extra CSS
-    if(!document.getElementById('navGlobal'))
-      document.head.insertAdjacentHTML('beforeend',`<style id="navGlobal">${loadExtraCSS}</style>`);
+    if (!document.getElementById('navGlobal'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="navGlobal">${loadExtraCSS}</style>`);
   }
 
-	connectedCallback() {
-
+  connectedCallback() {
     // Load external CSS if needed
-    if(this.hasAttribute('data-css'))
-      this.shadowRoot.querySelector('.doc-styles').insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
-    
+    if (this.hasAttribute('data-css'))
+      this.shadowRoot
+        .querySelector('.doc-styles')
+        .insertAdjacentHTML('beforeend', `@import "${this.getAttribute('data-css')}";`);
+
     const menuButton = this.shadowRoot.querySelector('.btn-menu');
     const menu = this.shadowRoot.querySelector('.menu');
     const iamNav = this;
     const backdrop = this.shadowRoot.querySelector('.backdrop');
     const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
 
-    // Check the content 
-    this.querySelectorAll(':scope > *').forEach(function(element){
-      let tagname = element.tagName;
+    // Check the content
+    this.querySelectorAll(':scope > *').forEach(function (element) {
+      const tagname = element.tagName;
 
-      switch(tagname){
-        case "BUTTON":
-          if(!element.hasAttribute('slot')){
-            element.setAttribute('slot','actions');
-            menu.classList.add('has-actions')
+      switch (tagname) {
+        case 'BUTTON':
+          if (!element.hasAttribute('slot')) {
+            element.setAttribute('slot', 'actions');
+            menu.classList.add('has-actions');
           }
           break;
       }
 
       // Create menu button
-      if(element.classList.contains('nav--menu') && element.hasAttribute('data-title') && element.hasAttribute('data-icon')){
-
+      if (
+        element.classList.contains('nav--menu') &&
+        element.hasAttribute('data-title') &&
+        element.hasAttribute('data-icon')
+      ) {
         const title = element.getAttribute('data-title');
         const iconClass = element.getAttribute('data-icon');
 
         // Create the menu button that sits seperately to the menu
         const button = document.createElement('button');
-        button.setAttribute('slot',title);
+        button.setAttribute('slot', title);
         button.classList.add('btn-menu');
-        button.setAttribute('part','btn-menu');
+        button.setAttribute('part', 'btn-menu');
         button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
-        buttonsHolder.insertAdjacentElement('beforeend',button);
+        buttonsHolder.insertAdjacentElement('beforeend', button);
 
         const mdButton = button.querySelector('.btn-primary');
 
         // Make sure the menu is added to the right part of the component
-        element.setAttribute('slot','menus');
+        element.setAttribute('slot', 'menus');
 
         // If open we need to make sure the main mobile menu is closed, the new button has the right state and the backdrop is shown
-        if(element.classList.contains('open')){
+        if (element.classList.contains('open')) {
           button.setAttribute('aria-expanded', true);
           mdButton.classList.toggle('active');
           iamNav.classList.add('open');
           backdrop.classList.add('show');
-        }
-        else {
+        } else {
           element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
         }
 
         // Click event
-        button.addEventListener('click', function(e){
-      
-          e.preventDefault();
-          button.toggleAttribute('aria-expanded');
-          element.classList.toggle('open');
-          mdButton.classList.toggle('active');
-
-          // Close desktop menus
-          let openMenu = iamNav.querySelector(':scope > details[open]');
-
-          if(openMenu)
-            openMenu.removeAttribute('open')
-
-          // Close the main menu and fix states on the button, iamNav component and backdrop
-          if(element.classList.contains('open')){
-            
-            menu.classList.remove('open');
-            menuButton.removeAttribute('aria-expanded');
-            setTimeout(function(){ menu.classList.add('closed') }, 1000); // Delay until its close so the animation is broken
-            iamNav.classList.add('open');
-            backdrop.classList.add('show');
-            element.classList.remove('closed');
-          }
-          else{
-            iamNav.classList.remove('open');
-            backdrop.classList.remove('show');
-            setTimeout(function(){ element.classList.add('closed') }, 1000);
-          }
-
-          // Close any open menus
-          iamNav.querySelectorAll('.nav--menu.open').forEach(function(openmenu){
-            if(openmenu != element) {
-              openmenu.classList.remove('open');
+        button.addEventListener(
+          'click',
+          function (e) {
+            e.preventDefault();
+            button.toggleAttribute('aria-expanded');
+            element.classList.toggle('open');
+            mdButton.classList.toggle('active');
+
+            // Close desktop menus
+            const openMenu = iamNav.querySelector(':scope > details[open]');
+
+            if (openMenu) openMenu.removeAttribute('open');
+
+            // Close the main menu and fix states on the button, iamNav component and backdrop
+            if (element.classList.contains('open')) {
+              menu.classList.remove('open');
+              menuButton.removeAttribute('aria-expanded');
+              setTimeout(function () {
+                menu.classList.add('closed');
+              }, 1000); // Delay until its close so the animation is broken
+              iamNav.classList.add('open');
+              backdrop.classList.add('show');
+              element.classList.remove('closed');
+            } else {
+              iamNav.classList.remove('open');
+              backdrop.classList.remove('show');
+              setTimeout(function () {
+                element.classList.add('closed');
+              }, 1000);
             }
-          });
-
-          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function(selectedButton){
-
-            if(selectedButton != button){
-
-              selectedButton.removeAttribute('aria-expanded');
-              let innerBtn = selectedButton.querySelector('.btn-primary');
-              innerBtn.classList.remove('active');
-            }
-          });
 
-        }, false);
+            // Close any open menus
+            iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
+              if (openmenu != element) {
+                openmenu.classList.remove('open');
+              }
+            });
+
+            iamNav.shadowRoot
+              .querySelectorAll('.buttons-holder .btn-menu[aria-expanded]')
+              .forEach(function (selectedButton) {
+                if (selectedButton != button) {
+                  selectedButton.removeAttribute('aria-expanded');
+                  const innerBtn = selectedButton.querySelector('.btn-primary');
+                  innerBtn.classList.remove('active');
+                }
+              });
+          },
+          false
+        );
       }
     });
-    
 
-    this.querySelectorAll('details').forEach(function(element){
-      
+    this.querySelectorAll('details').forEach(function (element) {
       element.classList.add('details--revert');
     });
 
     // Has secondary link
-    if(this.querySelector('a[slot="secondary"]')){
+    if (this.querySelector('a[slot="secondary"]')) {
       menu.classList.add('has-secondary');
     }
 
     // Create a scroll width variable to help with the sizing of the menu with in the CSS
-    document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.offsetWidth) + 'px');
+    document.documentElement.style.setProperty(
+      '--scrollbar-width',
+      window.innerWidth - document.documentElement.offsetWidth + 'px'
+    );
 
     // Open and close the menu
-    menuButton.addEventListener('click', function(e){
-      
-      e.preventDefault();
-      menuButton.toggleAttribute('aria-expanded');
-      menu.classList.toggle('open');
-
-      // Close any other menus
-      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
-        element.classList.remove('open');
-        setTimeout(function(){ element.classList.add('closed') }, 1000);
-      });
-      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function(element){
-        element.removeAttribute('aria-expanded');
-        let innerBtn = element.querySelector('.btn-primary');
-        innerBtn.classList.remove('active');
-      });
-
-      if(menu.classList.contains('open')){
-        iamNav.classList.add('open');
-        menu.classList.remove('closed');
-      }
-      else {
-        iamNav.classList.remove('open');
-        setTimeout(function(){ menu.classList.add('closed') }, 1000);
-      }
-
-    }, false);
+    menuButton.addEventListener(
+      'click',
+      function (e) {
+        e.preventDefault();
+        menuButton.toggleAttribute('aria-expanded');
+        menu.classList.toggle('open');
+
+        // Close any other menus
+        iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
+          element.classList.remove('open');
+          setTimeout(function () {
+            element.classList.add('closed');
+          }, 1000);
+        });
+        iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
+          element.removeAttribute('aria-expanded');
+          const innerBtn = element.querySelector('.btn-primary');
+          innerBtn.classList.remove('active');
+        });
+
+        if (menu.classList.contains('open')) {
+          iamNav.classList.add('open');
+          menu.classList.remove('closed');
+        } else {
+          iamNav.classList.remove('open');
+          setTimeout(function () {
+            menu.classList.add('closed');
+          }, 1000);
+        }
+      },
+      false
+    );
 
     // Allow outside JS to close the menu
-    this.addEventListener("request-close", (event) => {
-
+    this.addEventListener('request-close', (event) => {
       menuButton.removeAttribute('aria-expanded');
       menu.classList.remove('open');
       iamNav.classList.remove('open');
     });
 
     // Close the menu on the click of the backdrop on desktop
-    backdrop.addEventListener("click", (event) => {
-
-      let openMenu = this.querySelector('details[open] summary');
+    backdrop.addEventListener('click', (event) => {
+      const openMenu = this.querySelector('details[open] summary');
 
-      if(openMenu)
-        openMenu.click();
+      if (openMenu) openMenu.click();
 
       iamNav.classList.toggle('open');
-      iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+      iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
         element.classList.remove('open');
       });
-      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function(element){
+      iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
         element.removeAttribute('aria-expanded');
-        let innerBtn = element.querySelector('.btn-primary');
+        const innerBtn = element.querySelector('.btn-primary');
         innerBtn.classList.remove('active');
       });
 
@@ -239,69 +251,64 @@ class iamNav extends HTMLElement {
     });
 
     // On desktop close other menu's (details) when one is clicked
-    this.addEventListener("click", (event) => {
+    this.addEventListener('click', (event) => {
+      if (event && event.target instanceof HTMLElement && event.target.closest('summary')) {
+        if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {
+          const summary = event.target.closest('summary');
+          const details = summary.closest('details');
+          const wrapper = details.parentNode;
 
-      if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
-
-        if(window.innerWidth > 992 && !event.target.closest('.nav--menu')){
-
-          let summary = event.target.closest('summary');
-          let details = summary.closest('details');
-          let wrapper = details.parentNode;
-
-          if(details.hasAttribute('open'))
-            details.removeAttribute('open');
-          else
-            details.setAttribute('open','true');
+          if (details.hasAttribute('open')) details.removeAttribute('open');
+          else details.setAttribute('open', 'true');
 
           // Close any bespoke menus
-          iamNav.querySelectorAll('.nav--menu.open').forEach(function(element){
+          iamNav.querySelectorAll('.nav--menu.open').forEach(function (element) {
             element.classList.remove('open');
-            setTimeout(function(){ menu.classList.add('closed') }, 1000);
+            setTimeout(function () {
+              menu.classList.add('closed');
+            }, 1000);
           });
-          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function(element){
+          iamNav.shadowRoot.querySelectorAll('.buttons-holder .btn-menu[aria-expanded]').forEach(function (element) {
             element.removeAttribute('aria-expanded');
-            let innerBtn = element.querySelector('.btn-primary');
+            const innerBtn = element.querySelector('.btn-primary');
             innerBtn.classList.remove('active');
           });
 
           // Close any other dropdowns on the same level
           Array.from(wrapper.querySelectorAll(':scope > details')).forEach((detailsArrayElement, index) => {
-            
-            if(detailsArrayElement != details)
-              detailsArrayElement.removeAttribute('open')
+            if (detailsArrayElement != details) detailsArrayElement.removeAttribute('open');
           });
 
-          if(this.querySelectorAll(':scope > details[open]').length){
+          if (this.querySelectorAll(':scope > details[open]').length) {
             backdrop.classList.add('show');
             iamNav.classList.add('open');
-          }
-          else {
+          } else {
             backdrop.classList.remove('show');
             iamNav.classList.remove('open');
           }
 
           event.preventDefault();
         }
-      };
+      }
     });
 
     // Mega menu title
     this.querySelectorAll('details').forEach((detailsElement) => {
-
-      let summary = detailsElement.querySelector('summary');
-      let containerDiv = detailsElement.querySelector(':Scope > div');
+      const summary = detailsElement.querySelector('summary');
+      const containerDiv = detailsElement.querySelector(':Scope > div');
 
       containerDiv.setAttribute('data-title', summary.textContent);
     });
 
-    // Search 
-    if(this.querySelector('[slot="search"]')){
+    // Search
+    if (this.querySelector('[slot="search"]')) {
       menu.classList.add('has-search');
-      let searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
+      const searchWrapper = this.shadowRoot.querySelector('#search-wrapper');
 
       searchWrapper.classList.remove('d-none');
-      searchWrapper.insertAdjacentHTML('afterbegin',`<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
+      searchWrapper.insertAdjacentHTML(
+        'afterbegin',
+        `<button class="btn btn-secondary btn-compact fa-search me-0 mb-0" id="search-button" aria-controls="search-dialog">Open Search field</button>
       <dialog id="search-dialog">
       <div class="container">
         <div class="row">
@@ -313,38 +320,35 @@ class iamNav extends HTMLElement {
           </div>
         </div>
       </div>
-      </dialog>`);
-      
-      let searchButton = this.shadowRoot.querySelector('#search-button');
-      let searchClose = this.shadowRoot.querySelector('#search-close');
-      let searchDialog = this.shadowRoot.querySelector('#search-dialog');
-
-      if(this.hasAttribute('data-search-open')){
-        
-        searchDialog.setAttribute('open','open');
+      </dialog>`
+      );
+
+      const searchButton = this.shadowRoot.querySelector('#search-button');
+      const searchClose = this.shadowRoot.querySelector('#search-close');
+      const searchDialog = this.shadowRoot.querySelector('#search-dialog');
+
+      if (this.hasAttribute('data-search-open')) {
+        searchDialog.setAttribute('open', 'open');
         this.classList.add('search-open');
 
         searchButton.setAttribute('aria-expanded', true);
       }
 
-      searchButton.addEventListener("click", (event) => {
-
-        searchDialog.setAttribute('open','open');
+      searchButton.addEventListener('click', (event) => {
+        searchDialog.setAttribute('open', 'open');
         this.classList.add('search-open');
 
         searchButton.setAttribute('aria-expanded', true);
       });
 
-      searchClose.addEventListener("click", (event) => {
-
+      searchClose.addEventListener('click', (event) => {
         searchDialog.removeAttribute('open');
         this.classList.remove('search-open');
 
         searchButton.removeAttribute('aria-expanded');
       });
-
     }
   }
 }
 
-export default iamNav;
+export default iamNav;

package/assets/ts/components/notification/README.md

@@ -33,15 +33,15 @@ import('../node_modules/@iamproperty/components/assets/js/components/notificatio
 
 **Properties**
 
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-status | String | info | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
-| data-type | String | inline | Choose from alert and toast. This will change the behavour of the component. |
-| data-dismiss | Boolean | - | Adds a close button which will remove the alert box after clicking it. |
-| data-timeout | Boolean | - | Adds a timer for how long the notification will appear. |
+| Option       | Type    | Default Value | Description                                                                                                         |
+| ------------ | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------- |
+| data-status  | String  | info          | Choose from danger,succes and warning. This will change the colour of the notification box and which icon is shown. |
+| data-type    | String  | inline        | Choose from alert and toast. This will change the behavour of the component.                                        |
+| data-dismiss | Boolean | -             | Adds a close button which will remove the alert box after clicking it.                                              |
+| data-timeout | Boolean | -             | Adds a timer for how long the notification will appear.                                                             |
 
 **Slots**
 
-| Option | Default Value | Description |
-| ------ | ------------- | ----------- |
-| default | - | This is the content of the notification box |
+| Option  | Default Value | Description                                 |
+| ------- | ------------- | ------------------------------------------- |
+| default | -             | This is the content of the notification box |

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

@@ -1,34 +1,34 @@
 // @ts-nocheck
-import setupNotification, { closeNotification } from "../../modules/notification";
+import setupNotification, { closeNotification } from '../../modules/notification';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
-  "event": "customElementRegistered",
-  "element": "Notification"
+  event: 'customElementRegistered',
+  element: 'Notification',
 });
 
-
 class iamNotification extends HTMLElement {
-
-  constructor(){
+  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`;
+    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 loadCSS = `@import "${assetLocation}/css/components/notification.css";`;
     const loadExtraCSS = `@import "${assetLocation}/css/components/notification.global.css";`;
 
     const buttons = this.querySelectorAll('a,button');
 
     Array.from(buttons).forEach((button, index) => {
-
-      button.setAttribute('slot','btns');
+      button.setAttribute('slot', 'btns');
       button.classList.add('link');
     });
 
-    if(buttons.length || this.hasAttribute('data-dismiss'))
-      this.classList.add('notification--dismissable');
+    if (buttons.length || this.hasAttribute('data-dismiss')) this.classList.add('notification--dismissable');
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -40,33 +40,30 @@ class iamNotification extends HTMLElement {
 
     <div class="notification">
       <div class="notification__icon"><slot name="icon"></slot></div>
-      <div class="notification__inner"><div class="notification__text"><slot></slot></div>${ buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : '' }</div>
-      ${ this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>` : ''}
+      <div class="notification__inner"><div class="notification__text"><slot></slot></div>${buttons.length ? `<div class="notification__btns"><slot name="btns"></slot></div>` : ''}</div>
+      ${this.hasAttribute('data-dismiss') ? `<div class="notification__dismiss"><button data-dismiss-button part="dismiss-btn">Dismiss</button></div>` : ''}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     // insert extra CSS
-    if(!document.getElementById('notificationHolder'))
-      document.head.insertAdjacentHTML('beforeend',`<style id="notificationHolder">${loadExtraCSS}</style>`);
+    if (!document.getElementById('notificationHolder'))
+      document.head.insertAdjacentHTML('beforeend', `<style id="notificationHolder">${loadExtraCSS}</style>`);
   }
 
-	connectedCallback() {
-    
+  connectedCallback() {
     const dismissBtn = this.shadowRoot.querySelector('[data-dismiss-button]');
-    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white'
-    
-    if(this.hasAttribute('data-type'))
-      this.classList.add(`bg-${statusBG}`);
+    const statusBG = this.hasAttribute('data-status') ? this.getAttribute('data-status') : 'white';
+
+    if (this.hasAttribute('data-type')) this.classList.add(`bg-${statusBG}`);
     else {
       this.classList.add(`colour-${statusBG}`);
     }
-    
+
     const wrapper = this;
 
-    if(!this.querySelector('i')){
-      
-      switch(statusBG) {
+    if (!this.querySelector('i')) {
+      switch (statusBG) {
         case 'danger':
           this.innerHTML += '<i class="fa-solid fa-circle-exclamation" aria-hidden="true" slot="icon"></i>';
           break;
@@ -83,12 +80,16 @@ class iamNotification extends HTMLElement {
 
     setupNotification(wrapper);
 
-    if(dismissBtn){
-      dismissBtn.addEventListener('click', function(e){
-        closeNotification(wrapper);
-      }, false);
+    if (dismissBtn) {
+      dismissBtn.addEventListener(
+        'click',
+        function (e) {
+          closeNotification(wrapper);
+        },
+        false
+      );
     }
   }
 }
 
-export default iamNotification;
+export default iamNotification;