@iamproperty/components 7.8.2--beta4 → 7.8.2--beta6

package/assets/ts/components/modal/modal.component.ts

@@ -17,7 +17,7 @@ class iamModal extends HTMLElement {
     template.innerHTML = `
     <style>
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    
+
     ${loadCSS}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
@@ -41,6 +41,7 @@ class iamModal extends HTMLElement {
 
   connectedCallback(): void {
 
+    const hasDialogParent = this.closest('dialog[id]');
     const originalDialog = this.querySelector('dialog');
 
     const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog?.getAttribute('id');
@@ -50,6 +51,10 @@ class iamModal extends HTMLElement {
     const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : this.shadowRoot?.querySelector('[data-agreed]');
     const modalType = this.hasAttribute('data-type') ? this.getAttribute('data-type') : 'passive';
 
+
+    if(hasDialogParent)
+      this.classList.add('has-parent-dialog');
+
     const agreed = (close = true) => {
       const agreedEvent = new CustomEvent('agreed', {
         detail: { modalId: id },
@@ -62,20 +67,20 @@ class iamModal extends HTMLElement {
     }
 
     document.addEventListener('click', (e) => {
-      
+
       if(e.target.matches(`[command="show-modal"][commandfor="${id}"]`) || e.target.matches(`[data-modal="${id}"]`)){
         openModal(this);
       }
     });
 
     document.addEventListener('click', (e) => {
-      
+
       if(e.target.matches(`[command="close"][commandfor="${id}"]`)){
         closeModal(this);
       }
     });
-    
-    // Disable the original event 
+
+    // Disable the original event
     originalDialog?.addEventListener('command', (e) => {
 
       if (event.command == "show-modal") {
@@ -103,7 +108,7 @@ class iamModal extends HTMLElement {
     if(originalDialog) {
       Array.from(originalDialog?.querySelectorAll('[slot]')).forEach((element) => {
         this.moveBefore(element, originalDialog);
-      });      
+      });
     }
 
     closeButton?.addEventListener('click', () => {
@@ -118,30 +123,33 @@ class iamModal extends HTMLElement {
 
       agreed();
     });
-    
+
 
     this.addEventListener('close-modal', () => {
       closeModal(this);
     });
 
-    // Hijack the default form submission 
-    originalDialog?.addEventListener('submit', (e) => {
+    // Hijack the default form submission
+    if(!hasDialogParent){
+      originalDialog?.addEventListener('submit', (e) => {
+
+        if(e.submitter && e.submitter.hasAttribute('formmethod') && e.submitter.getAttribute('formmethod') =="dialog"){
+
+          closeModal(this);
+        }
+        else {
+          agreed(false);
+        }
+      });
+    }
 
-      if(e.submitter && e.submitter.hasAttribute('formmethod') && e.submitter.getAttribute('formmethod') =="dialog"){
-        
-        closeModal(this);
-      }
-      else {
-        agreed(false);
-      }
-    });
 
     Array.from(this.querySelectorAll('button[type="submit"]')).forEach((button)=> {
 
       button.addEventListener('click', (e) => {
 
         if(!button.closest('form') && !button.hasAttribute('formmethod')){
-          
+
           agreed();
         }
       });
@@ -179,7 +187,7 @@ class iamModal extends HTMLElement {
         </i>`
       );
     }
-            
+
   }
 }
 

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

@@ -32,7 +32,7 @@ class iamNav extends HTMLElement {
 
       <div class="menu__outer">
         <div class="menu closed">
-            
+
           <div class="menu__primary">
             <slot></slot>
             <slot name="dual"></slot>
@@ -46,7 +46,7 @@ class iamNav extends HTMLElement {
           </div>
         </div>
         <slot name="menus"></slot>
-      </div>      
+      </div>
     </div>
     <div class="backdrop" part="backdrop"></div>
     `;
@@ -73,107 +73,119 @@ class iamNav extends HTMLElement {
     const buttonsHolder = this.shadowRoot.querySelector('.buttons-holder');
 
     // 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');
-          }
-          break;
-      }
+    const createNavMenu = (component) => {
 
-      
-      // Create menu button
-      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.classList.add('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);
-
-        const mdButton = button.querySelector('.btn-primary');
-
-        // Make sure the menu is added to the right part of the component
-        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')) {
-          button.setAttribute('aria-expanded', true);
-          mdButton.classList.toggle('active');
-          iamNav.classList.add('open');
-          backdrop.classList.add('show');
-        } else {
-          element.classList.add('closed'); // closed class is added to prevent the elements being tabbed into, this causes visual issues
+      buttonsHolder.innerHTML = '';
+      component.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');
+            }
+            break;
         }
 
-        // Click event
-        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);
-            }
+        // Create menu button
+        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.classList.add('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);
 
-            // Close any open menus
-            iamNav.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
-              if (openmenu != element) {
-                openmenu.classList.remove('open');
+          const mdButton = button.querySelector('.btn-primary');
+
+          // Make sure the menu is added to the right part of the component
+          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')) {
+            button.setAttribute('aria-expanded', true);
+            mdButton.classList.toggle('active');
+            component.classList.add('open');
+            backdrop.classList.add('show');
+          } 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');
+
+              console.log(element);
+              element.classList.toggle('open');
+              mdButton.classList.toggle('active');
+
+              // Close desktop menus
+              const openMenu = component.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
+                component.classList.add('open');
+                backdrop.classList.add('show');
+                element.classList.remove('closed');
+              } else {
+                component.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');
-                  const innerBtn = selectedButton.querySelector('.btn-primary');
-                  innerBtn.classList.remove('active');
+
+              // Close any open menus
+              component.querySelectorAll('.nav--menu.open').forEach(function (openmenu) {
+                if (openmenu != element) {
+                  openmenu.classList.remove('open');
                 }
               });
-          },
-          false
-        );
-      }
-    });
 
-    this.querySelectorAll('details').forEach(function (element) {
-      element.classList.add('details--revert');
+              component.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
+          );
+        }
+      });
+
+      component.querySelectorAll('details').forEach(function (element) {
+        element.classList.add('details--revert');
+      });
+    }
+    createNavMenu(this);
+
+    this.addEventListener('rebuilt', () => {
+      console.log('rebuilt nav');
+      createNavMenu(this);
     });
 
     // Has secondary link
@@ -186,7 +198,7 @@ class iamNav extends HTMLElement {
       'click',
       function (e) {
         e.preventDefault();
-        menuButton.toggleAttribute('aria-expanded');
+        //menuButton.toggleAttribute('aria-expanded');
         menu.classList.toggle('open');
 
         // Close any other menus

package/assets/ts/components/search/search.component.ts

@@ -37,7 +37,7 @@ class iamSearch extends HTMLElement {
         <slot></slot>
         <button class="clear-search btn btn-action" type="button"><i class="fa-light fa-times me-0"></i></button>
       </span>
-      <button class="suffix ${this.getAttribute('data-icon') || 'fa-regular fa-search'}"></button>
+      <button class="suffix fa-regular fa-search"></button>
     </span>
     <slot name="datalist"></slot>
     `;
@@ -56,6 +56,10 @@ class iamSearch extends HTMLElement {
 
     let minLength = this.hasAttribute('data-min-length') ? getIntegerAttribute(this, 'data-min-length', 1) : 1;
 
+
+    suffixElement?.setAttribute('class',`suffix ${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'fa-regular fa-search'}`);
+
+
     if (this.hasAttribute('data-url') && !this.hasAttribute('data-min-length')) {
 
       minLength = 3;

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

@@ -36,6 +36,9 @@ class iamSTDNav extends HTMLElement {
     const defaultContent = navElement.innerHTML;
 
     navElement.innerHTML = `${defaultContent}${populateNav(data)}`;
+
+    const customEvent = new CustomEvent('rebuilt');
+    navElement.dispatchEvent(customEvent);
   }
 
   defaultToSecondary = (): void => {
@@ -82,7 +85,6 @@ class iamSTDNav extends HTMLElement {
     }
 
 
-
     const data = await loadNavData(Cookies).then(
       (data) => {
 

package/assets/ts/modules/card.module.ts

@@ -38,7 +38,7 @@ export const setupCard = (cardComponent: HTMLElement): void => {
     const cardTotal = cardBody?.querySelector<HTMLDivElement>('.card__total');
 
     if(!cardTotal)
-      cardBody?.insertAdjacentHTML(
+      cardBody.insertAdjacentHTML(
         'beforeend',
         `<div class="card__total">${cardComponent.getAttribute('data-total') || ''}</div>`
       );

package/assets/ts/modules/form.test.ts

@@ -0,0 +1,183 @@
+import { describe, expect, it } from './test.ts';
+import { createElement, installTestDom } from './test-dom.ts';
+import { append } from './test-utils.ts';
+import {
+  checkConditions,
+  disabledIf,
+  emptyIf,
+  enabledIf,
+  getCheckboxLimit,
+  hideIf,
+  isFormValid,
+  limitCheckboxes,
+  readonlyIf,
+  requiredIf,
+  showIf,
+  writeIf,
+} from './form.ts';
+
+const { window } = installTestDom();
+
+if (typeof globalThis.CustomEvent === 'undefined') {
+  globalThis.CustomEvent = class extends Event {
+    detail;
+
+    constructor(type, options = {}) {
+      super(type, options);
+      this.detail = options.detail;
+    }
+  };
+}
+
+const condition = (id, equals) => JSON.stringify([{ if: id, equals }]);
+
+const createChangeEvent = (target) => {
+  const event = new Event('change', { bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'target', { value: target });
+
+  return event;
+};
+
+describe('Form module', () => {
+  it('checks form validity against invalid fields, weak passwords and required multiselects', () => {
+    const form = createElement('form');
+    const originalQuerySelector = form.querySelector.bind(form);
+
+    form.querySelector = (selector) => (selector === ':invalid' ? createElement('input') : originalQuerySelector(selector));
+
+    expect(!isFormValid(form));
+
+    form.querySelector = originalQuerySelector;
+    append(form, createElement('div', { class: 'pwd-checker', dataStrength: '1' }));
+
+    expect(!isFormValid(form));
+
+    form.children = [];
+    append(form, createElement('iam-multiselect', { dataError: 'true', dataIsRequired: 'true' }));
+
+    expect(!isFormValid(form));
+
+    form.children = [];
+
+    expect(isFormValid(form));
+  });
+
+  it('evaluates JSON conditions against form control values', () => {
+    const form = createElement('form');
+    append(form, createElement('input', { id: 'status', value: 'active' }));
+
+    expect(checkConditions(condition('status', 'active'), form));
+    expect(!checkConditions(condition('status', 'archived'), form));
+  });
+
+  it('applies visibility conditional helpers', () => {
+    const form = createElement('form');
+    const status = createElement('input', { id: 'status', value: 'active' });
+    const shown = createElement('div', { dataShowIf: condition('status', 'active') });
+    const hidden = createElement('div', { dataHideIf: condition('status', 'active') });
+    append(form, status, shown, hidden);
+
+    showIf(form);
+    hideIf(form);
+
+    expect(!shown.classList.contains('d-none'));
+    expect(hidden.classList.contains('d-none'));
+
+    status.value = 'archived';
+    showIf(form);
+    hideIf(form);
+
+    expect(shown.classList.contains('d-none'));
+    expect(!hidden.classList.contains('d-none'));
+  });
+
+  it('applies enabled, disabled, required and readonly conditional helpers', () => {
+    const form = createElement('form');
+    const status = createElement('input', { id: 'status', value: 'active' });
+    const disabled = createElement('input', { dataDisabledIf: condition('status', 'active') });
+    const enabled = createElement('input', { dataEnabledIf: condition('status', 'active') });
+    const required = createElement('input', { dataRequiredIf: condition('status', 'active') });
+    const readonly = createElement('input', { dataReadonlyIf: condition('status', 'active') });
+    const writable = createElement('input', { dataWriteIf: condition('status', 'active') });
+    append(form, status, disabled, enabled, required, readonly, writable);
+
+    disabledIf(form);
+    enabledIf(form);
+    requiredIf(form);
+    readonlyIf(form);
+    writeIf(form);
+
+    expect(disabled.hasAttribute('disabled'));
+    expect(!enabled.hasAttribute('disabled'));
+    expect(required.hasAttribute('required'));
+    expect(readonly.hasAttribute('readonly'));
+    expect(!writable.hasAttribute('readonly'));
+
+    status.value = 'archived';
+    disabledIf(form);
+    enabledIf(form);
+    requiredIf(form);
+    readonlyIf(form);
+    writeIf(form);
+
+    expect(!disabled.hasAttribute('disabled'));
+    expect(enabled.hasAttribute('disabled'));
+    expect(!required.hasAttribute('required'));
+    expect(!readonly.hasAttribute('readonly'));
+    expect(writable.hasAttribute('readonly'));
+  });
+
+  it('empties form controls when conditions match', () => {
+    const form = createElement('form');
+    const status = createElement('input', { id: 'status', value: 'clear' });
+    const target = createElement('input', { dataEmptyIf: condition('status', 'clear'), value: 'remove me' });
+    append(form, status, target);
+
+    emptyIf(form);
+
+    expect(target.value === '');
+  });
+
+  it('resolves checkbox limits with a valid positive fallback', () => {
+    expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: '2' })) === 2);
+    expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: '0' })) === 10);
+    expect(getCheckboxLimit(createElement('div', { dataCheckboxLimit: 'nope' })) === 10);
+  });
+
+  it('disables unchecked checkboxes and emits analytics when a limit is reached', () => {
+    window.dataLayer = [];
+    const form = createElement('form');
+    const group = createElement('fieldset', { dataCheckboxLimit: '2', id: 'topics' });
+    const first = createElement('input', { checked: true, type: 'checkbox' });
+    const second = createElement('input', { checked: true, type: 'checkbox' });
+    const third = createElement('input', { type: 'checkbox' });
+    let eventDetail;
+    form.addEventListener('checkbox-limit-reached', (event) => {
+      eventDetail = event.detail;
+    });
+    append(group, first, second, third);
+    append(form, group);
+
+    limitCheckboxes(createChangeEvent(second), form);
+
+    expect(third.hasAttribute('disabled'));
+    expect(eventDetail.element === '#topics');
+    expect(eventDetail.limit === 2);
+    expect(window.dataLayer[0].event === 'checkbox-limit-reached');
+    expect(window.dataLayer[0].element === '#topics');
+  });
+
+  it('prevents checking beyond the configured checkbox limit', () => {
+    const form = createElement('form');
+    const group = createElement('fieldset', { dataCheckboxLimit: '1' });
+    const first = createElement('input', { checked: true, type: 'checkbox' });
+    const second = createElement('input', { checked: true, type: 'checkbox' });
+    append(group, first, second);
+    append(form, group);
+
+    limitCheckboxes(createChangeEvent(second), form);
+
+    expect(first.checked);
+    expect(!second.checked);
+  });
+});