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

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

@@ -16,34 +16,42 @@ export const cardHTML = `<div class="wrapper">
   </div>
 </div>`;
 
-export const setupCard = (cardComponent: any): void => {
+const getCardPart = <T extends Element>(cardComponent: HTMLElement, selector: string): T | null =>
+  cardComponent.shadowRoot?.querySelector<T>(selector) || null;
+
+export const setupCard = (cardComponent: HTMLElement): void => {
   cardComponent.classList.add('card');
-  const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
-  const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+  const cardHead = getCardPart<HTMLDivElement>(cardComponent, '.card__head');
+  const cardBody = getCardPart<HTMLDivElement>(cardComponent, '.card__body');
+  const cardBadges = getCardPart<HTMLDivElement>(cardComponent, '.card__badges');
 
   if (cardComponent.hasAttribute('data-image')) {
-    cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+    cardHead?.insertAdjacentHTML(
+      'beforeend',
+      `<img src="${cardComponent.getAttribute('data-image') || ''}" alt="" loading="lazy" part="image" />`
+    );
   }
 
   // Inset the HTML for the data total or icon fallback
   if (cardComponent.hasAttribute('data-total')) {
 
-    if(!cardBody?.querySelector('.card__total'))
+    const cardTotal = cardBody?.querySelector<HTMLDivElement>('.card__total');
+
+    if(!cardTotal)
       cardBody.insertAdjacentHTML(
         'beforeend',
-        `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`
+        `<div class="card__total">${cardComponent.getAttribute('data-total') || ''}</div>`
       );
     else {
-      const cardTotal = cardBody?.querySelector('.card__total');
-      if (cardTotal) cardTotal.innerHTML = cardComponent.getAttribute('data-total');
+      cardTotal.innerHTML = cardComponent.getAttribute('data-total') || '';
     }
   } else if (cardComponent.querySelector('[slot="total-icon"]')) {
-    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+    cardBody?.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
   }
 
   if (!cardComponent.querySelector('[slot="badges"]')) {
-    cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
+    cardBadges?.classList.add('empty');
   } else {
-    cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
+    cardBadges?.classList.remove('empty');
   }
 };

package/assets/ts/modules/content.test.ts

@@ -1,24 +1,96 @@
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
 import { append } from './test-utils.ts';
-import { transformButtons } from './content.ts';
+import { createTitle, loadComponents, replaceShortcode, transformButtons, transformElement } from './content.ts';
 
-const { document } = installTestDom();
+installTestDom();
+
+type TestAttribute = {
+  name: string;
+  value: string;
+};
+
+type AttributeComponent = {
+  attributes: TestAttribute[];
+  getAttribute: (name: string) => string | null;
+  hasAttribute: (name: string) => boolean;
+};
+
+const createAttributeComponent = (attributes: TestAttribute[]): AttributeComponent => ({
+  attributes,
+  getAttribute(name: string): string | null {
+    const attribute = attributes.find((attr) => attr.name === name);
+    return attribute ? attribute.value : null;
+  },
+  hasAttribute(name: string): boolean {
+    return attributes.some((attr) => attr.name === name);
+  },
+});
 
 describe('Content module', () => {
+  it('replaces WordPress shortcode paragraphs with loading placeholders', () => {
+    const content = '<p>Intro</p><p>[search-learning-articles]</p><p>[search-contacts]</p>';
+    const transformed = replaceShortcode(content);
+
+    expect(transformed.includes('<p>Intro</p>'));
+    expect(transformed.includes('data-shortcode="search-learning-articles"'));
+    expect(transformed.includes('data-shortcode="search-contacts"'));
+    expect(!transformed.includes('<p>[search-learning-articles]</p>'));
+    expect(!transformed.includes('<p>[search-contacts]</p>'));
+  });
+
+  it('creates configured titles and skips missing titles', () => {
+    const component = createElement('iam-content', {
+      dataTitleTag: 'h2',
+      dataTitleClass: 'bg-light',
+    });
+
+    expect(createTitle(component, 'Latest news') === '<h2 class="bg-light iam-content--title">Latest news</h2>');
+    expect(createTitle(component, '') === '');
+    expect(createTitle(createElement('iam-content'), 'Latest news') === '');
+  });
+
+  it('wraps rendered content in the requested transform element', () => {
+    const component = createAttributeComponent([
+      { name: 'data-transform', value: 'article' },
+      { name: 'data-url', value: '/wp-json/wp/v2/pages/1' },
+      { name: 'class', value: 'content-panel' },
+    ]);
+
+    const transformed = transformElement(component, '<h2>Heading</h2>', '<p>Body</p>');
+
+    expect(transformed.startsWith('<article '));
+    expect(transformed.includes('data-transform="article"'));
+    expect(transformed.includes('data-url="/wp-json/wp/v2/pages/1"'));
+    expect(transformed.includes('class="content-panel"'));
+    expect(transformed.includes('<h2>Heading</h2><p>Body</p>'));
+    expect(transformed.endsWith('</article>'));
+  });
+
   it('transforms WordPress button wrappers into direct links', () => {
-    const parent = createElement('div');
     const buttons = createElement('div', { class: 'wp-block-buttons' });
-    const button = createElement('div', { class: 'btn btn-primary wp-block-button' });
-    const link = createElement('a', { href: '/test' }, 'Open');
-    append(button, link);
-    append(buttons, button);
-    append(parent, buttons);
-    append(document.body, parent);
+    const primaryButton = createElement('div', { class: 'btn btn-primary wp-block-button' });
+    const secondaryButton = createElement('div', { class: 'btn btn-secondary wp-block-button' });
+    const primaryLink = createElement('a', { href: '/primary' }, 'Primary');
+    const secondaryLink = createElement('a', { href: '/secondary' }, 'Secondary');
+    append(primaryButton, primaryLink);
+    append(secondaryButton, secondaryLink);
+    append(buttons, primaryButton, secondaryButton);
+
+    const fragment = transformButtons(buttons);
+
+    expect(fragment.children.length === 2);
+    expect(fragment.children[0] === primaryLink);
+    expect(fragment.children[1] === secondaryLink);
+    expect(primaryLink.getAttribute('class') === 'btn btn-primary wp-block-button');
+    expect(secondaryLink.getAttribute('class') === 'btn btn-secondary wp-block-button');
+  });
+
+  it('does not load component bundles when content contains no supported custom elements', () => {
+    const component = createElement('iam-content');
 
-    transformButtons();
+    loadComponents(component);
 
-    expect(link.getAttribute('class') === 'btn btn-primary wp-block-button');
-    expect(parent.children[0].localName === 'fragment');
+    expect(component.getElementsByTagName('iam-card').length === 0);
   });
 });

package/assets/ts/modules/content.ts

@@ -1,17 +1,64 @@
-export const transformButtons = (component):void => {
 
-  Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
 
-    const fragment = document.createDocumentFragment();
+export const loadComponents = (component):void => {
 
-    Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+  const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
+  const assetLocation = document.body.hasAttribute('data-assets-location')
+          ? document.body.getAttribute('data-assets-location')
+          : '/assets';
 
-      const link = element.querySelector('a');
-      link.setAttribute('class',element.getAttribute('class'));
+  components.forEach((loadComponent) => {
 
-      fragment.appendChild(link);
-    });
+    if (component.getElementsByTagName(`iam-${loadComponent}`).length === 0) return;
 
-    buttons.parentNode.replaceChild(fragment, buttons);
+    import(/*! @vite-ignore */ `${assetLocation}/js/components/${loadComponent}/${loadComponent}.component.min.js`)
+      .then((module) => {
+        if (!window.customElements.get(`iam-${loadComponent}`))
+          window.customElements.define(`iam-${loadComponent}`, module.default);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   });
 }
+
+export const replaceShortcode = (content):string => {
+
+  return content.replaceAll(/<p>\[([^\]]+)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+}
+
+export const createTitle = (component, title):string => {
+
+  if (component.hasAttribute('data-title-tag') && title)
+    return `<${component.getAttribute('data-title-tag')} class="${component.getAttribute('data-title-class')} iam-content--title">${title}</${component.getAttribute('data-title-tag')}>`;
+
+  return '';
+}
+
+export const transformElement = (component,renderedTitle,renderedContent): string => {
+
+  const transform = component.getAttribute('data-transform');
+
+  let elementAttributes = '';
+
+  for (const attr of component.attributes) {
+    elementAttributes += `${attr.name}="${attr.value}" `;
+  }
+
+  return `<${transform} ${elementAttributes}>${renderedTitle+renderedContent}</${transform}>`;
+}
+
+export const transformButtons = (buttons): DocumentFragment => {
+
+  const fragment = document.createDocumentFragment();
+
+  Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+
+    const link = element.querySelector('a');
+    link.setAttribute('class',element.getAttribute('class'));
+
+    fragment.appendChild(link);
+  });
+
+  return fragment;
+}

package/assets/ts/modules/data-layer.ts

@@ -1,12 +1,8 @@
-type WindowWithDataLayer = Window & {
-  dataLayer: Record<string, any>[];
-};
-
-declare const window: WindowWithDataLayer;
+const dataLayerWindow = window as WindowWithDataLayer;
 
 function createDataLayer(): void {
-  window.dataLayer = window.dataLayer || [];
-  window.dataLayer.push({
+  dataLayerWindow.dataLayer = dataLayerWindow.dataLayer || [];
+  dataLayerWindow.dataLayer.push({
     event: 'Pageview',
     pageTitle: document.title,
   });
@@ -15,7 +11,7 @@ function createDataLayer(): void {
     const target = (event.target as HTMLElement).closest<HTMLElement>('[open] summary');
 
     if (target) {
-      window.dataLayer.push({
+      dataLayerWindow.dataLayer.push({
         event: 'closeDetails',
         detailsTitle: target.textContent || '',
       });
@@ -25,14 +21,14 @@ function createDataLayer(): void {
       const button = (event.target as HTMLElement).closest<HTMLButtonElement>('button');
 
       if (summary) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'openDetails',
           detailsTitle: summary.textContent || '',
         });
       }
 
       if (link) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'linkClicked',
           linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',
           class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',
@@ -41,7 +37,7 @@ function createDataLayer(): void {
       }
 
       if (button) {
-        window.dataLayer.push({
+        dataLayerWindow.dataLayer.push({
           event: 'buttonClicked',
           buttonText: button.textContent || '',
           class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',

package/assets/ts/modules/dropdown.ts

@@ -25,8 +25,6 @@ export const searchAjax = async (component, search, callback): any => {
   const ajaxURL = component.getAttribute('data-url');
   const firstInput = component.querySelector('input');
 
-  console.log(firstInput);
-
   const inputType = firstInput && firstInput.hasAttribute('type') ? firstInput.getAttribute('type') : 'checkbox';
   let inputName = firstInput && firstInput.hasAttribute('name') ? firstInput.getAttribute('name') : 'tags';
 

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