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

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

package/assets/ts/modules/form.ts

@@ -0,0 +1,210 @@
+type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+interface FormCondition {
+  equals: string | number | boolean | null;
+  if: string;
+}
+
+interface CheckboxLimitDetail {
+  element: string;
+  limit: number;
+}
+
+const getConditions = (conditions: string | null): FormCondition[] => JSON.parse(conditions || '[]') as FormCondition[];
+
+const getFormControl = (form: HTMLElement, id: string): FormControlElement | null =>
+  form.querySelector<FormControlElement>(`#${id}`);
+
+export const isFormValid = (form: HTMLFormElement): boolean => {
+
+  if (form.querySelector(':invalid'))
+    return false;
+
+  if (form.querySelector('.pwd-checker[data-strength="1"]') || form.querySelector('.pwd-checker[data-strength="2"]'))
+    return false;
+
+  if (form.querySelector('iam-multiselect[data-is-required][data-error]'))
+    return false;
+
+  return true;
+};
+
+export const checkConditions = (conditions: string | null, form: HTMLElement): boolean => {
+
+  let meetsCondition = true;
+
+  getConditions(conditions).forEach((condition) => {
+    const input = getFormControl(form, condition.if);
+
+    if(input?.value != condition.equals)
+      meetsCondition = false;
+  });
+
+  return meetsCondition;
+}
+
+
+export const showIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-show-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-show-if'), form))
+      element.classList.add('d-none');
+    else
+      element.classList.remove('d-none');
+
+  });
+}
+
+export const hideIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-hide-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-hide-if'), form))
+      element.classList.add('d-none');
+    else
+      element.classList.remove('d-none');
+
+  });
+}
+
+export const disabledIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-disabled-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-disabled-if'), form))
+      element.setAttribute('disabled','disabled');
+    else
+      element.removeAttribute('disabled');
+
+  });
+}
+
+export const enabledIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-enabled-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-enabled-if'), form))
+      element.setAttribute('disabled','disabled');
+    else
+      element.removeAttribute('disabled');
+
+  });
+}
+
+export const requiredIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-required-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-required-if'), form))
+      element.setAttribute('required','required');
+    else
+      element.removeAttribute('required');
+
+  });
+}
+
+export const readonlyIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-readonly-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-readonly-if'), form))
+      element.setAttribute('readonly','readonly');
+    else
+      element.removeAttribute('readonly');
+
+  });
+}
+
+export const writeIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<HTMLElement>('[data-write-if]').forEach((element) => {
+
+    if(!checkConditions(element.getAttribute('data-write-if'), form))
+      element.setAttribute('readonly','readonly');
+    else
+      element.removeAttribute('readonly');
+
+  });
+}
+
+export const emptyIf = (form: HTMLElement): void => {
+
+  form.querySelectorAll<FormControlElement>('[data-empty-if]').forEach((element) => {
+
+    if(checkConditions(element.getAttribute('data-empty-if'), form))
+      element.value = "";
+
+  });
+}
+
+export const getCheckboxLimit = (element: HTMLElement): number => {
+
+  const limit = parseInt(element.getAttribute('data-checkbox-limit') || '10', 10);
+
+  return !isNaN(limit) && limit > 0 ? limit : 10;
+}
+
+export const limitCheckboxes = (event: Event | null | undefined, root: HTMLElement): void => {
+
+  console.log(event);
+
+
+  const target = event?.target instanceof HTMLInputElement ? event.target : null;
+  const changedCheckbox = target?.matches('input[type="checkbox"]') ? target : null;
+  const checkboxLimitGroup = changedCheckbox?.closest<HTMLElement>('[data-checkbox-limit]');
+  const checkboxLimitGroups = checkboxLimitGroup
+    ? [checkboxLimitGroup]
+    : [
+        ...(root.hasAttribute('data-checkbox-limit') ? [root] : []),
+        ...Array.from(root.querySelectorAll<HTMLElement>('[data-checkbox-limit]')),
+      ];
+
+  checkboxLimitGroups.forEach((group) => {
+
+    const limit = getCheckboxLimit(group);
+    const checked = Array.from(group.querySelectorAll<HTMLInputElement>('input[type="checkbox"]:checked'));
+    const notChecked = Array.from(group.querySelectorAll<HTMLInputElement>('input[type="checkbox"]:not(:checked)'));
+
+    notChecked.forEach((checkbox) => {
+
+      checkbox.setAttribute('disabled','disabled');
+    });
+
+    if(checked.length < limit){
+      notChecked.forEach((checkbox) => {
+
+        checkbox.removeAttribute('disabled');
+      });
+
+      return;
+    }
+
+    if(checked.length == limit){
+
+      // Data layer Web component created
+
+      const eventDetails: CheckboxLimitDetail = {element: group.hasAttribute('id') ? `#${group.getAttribute('id')}` :'', limit: limit};
+      const changeEvent = new CustomEvent<CheckboxLimitDetail>('checkbox-limit-reached', { detail: eventDetails });
+
+      root.dispatchEvent(changeEvent);
+
+      const formWindow = window as WindowWithDataLayer;
+      formWindow.dataLayer = formWindow.dataLayer || [];
+      formWindow.dataLayer.push({'event': 'checkbox-limit-reached', ...eventDetails});
+
+      return;
+    }
+
+
+    if(changedCheckbox?.checked && group.contains(changedCheckbox)) {
+      changedCheckbox.checked = false;
+      return;
+    }
+
+    checked.slice(limit).forEach((checkbox) => {
+
+      checkbox.checked = false;
+    });
+  });
+}