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

package/assets/ts/components/carousel/carousel.component.ts

@@ -5,6 +5,35 @@ trackComponentRegistered('iam-carousel');
 class iamCarousel extends HTMLElement {
   constructor() {
     super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
+
+    const template = document.createElement('template');
+
+    template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+      </style>
+      <slot></slot>
+      <div class="carousel__controls" part="carousel__controls">
+        <div class="carousel__pips" part="carousel__pips"></div>
+        <div class="carousel__progress carousel__progress-xs" part="carousel__progress-xs">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-sm" part="carousel__progress-sm">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-md" part="carousel__progress-md">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
   generateThumbnailList = (carouselComponent): any => {
@@ -46,7 +75,7 @@ class iamCarousel extends HTMLElement {
   }
 
   connectedCallback(): void {
-    
+    /*
     this.insertAdjacentHTML('beforeend',`
       <div class="carousel__controls">
         <div class="carousel__pips"></div>
@@ -61,15 +90,48 @@ class iamCarousel extends HTMLElement {
         </div>
       </div>
     `)
+    */
  
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const carouselElement = this;
-    const carouselProgress = this.querySelector('.carousel__progress-xs [type="range"]');
-    const carouselProgressSM = this.querySelector('.carousel__progress-sm [type="range"]');
-    const carouselProgressMD = this.querySelector('.carousel__progress-md [type="range"]');
+    const carouselProgress = this.shadowRoot.querySelector('.carousel__progress-xs [type="range"]');
+    const carouselProgressSM = this.shadowRoot.querySelector('.carousel__progress-sm [type="range"]');
+    const carouselProgressMD = this.shadowRoot.querySelector('.carousel__progress-md [type="range"]');
     const itemCount = this.querySelectorAll(':scope > *:not(.carousel__controls)').length;
     const progressPercent = this.progressPercent;
 
+    this.querySelectorAll(':scope > *').forEach((item,index) => {
+      item.setAttribute('data-child',index+1);
+    })
+    this.setAttribute('data-current',1);
+    
+    this.addEventListener("scrollsnapchange", (event) => {
+      
+      const snapTargetInlineElement = event.snapTargetInline;
+      const child = Array.from(snapTargetInlineElement.parentElement.children).indexOf(snapTargetInlineElement)+1;
+
+      if(child != this.getAttribute('data-current')){
+        const customEvent = new CustomEvent(`snap-to`, {
+          detail: {
+            item: child,
+          },
+        });
+
+        this.dispatchEvent(customEvent);
+        this.setAttribute('data-current',child);
+      }
+
+      console.log(child);
+      carouselProgress.value = child;
+      carouselProgress.style.setProperty('--percent', progressPercent(child, itemCount));
+      carouselProgressSM.value = child;
+      carouselProgressSM.style.setProperty('--percent', progressPercent(child, carouselProgressSM?.getAttribute('max')));
+      carouselProgressMD.value = child;
+      carouselProgressMD.style.setProperty('--percent', progressPercent(child, carouselProgressMD?.getAttribute('max')));
+      
+    });
+    
+
     let stepperInterval,
       stepperEvent = 'mouseup',
       stepperStart = 'mousedown';
@@ -111,17 +173,18 @@ class iamCarousel extends HTMLElement {
   
     // SM Progress bar
     const smStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
-    const smItemCount = Math.floor(itemCount / smStep) * smStep;
+    //const smItemCount = Math.floor(itemCount / smStep) * smStep;
+    const SMMax = ((Math.floor(itemCount / smStep)-1) * smStep)+1;
 
-    carouselProgressSM.setAttribute('max', smItemCount);
+    carouselProgressSM.setAttribute('max', SMMax);
     carouselProgressSM.setAttribute('step', smStep);
 
-    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
     
     carouselProgressSM.addEventListener(stepperStart, () => {
       clearInterval(stepperInterval);
       stepperInterval = setInterval(function () {
-        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
       });
     });
 
@@ -133,8 +196,8 @@ class iamCarousel extends HTMLElement {
 
       clearInterval(stepperInterval);
 
-      carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
-      const scrollTo = Math.floor((carouselElement.scrollWidth / smItemCount) * carouselProgressSM.value);
+      carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * carouselProgressSM.value);
 
       carouselElement.scrollTo({
         top: 0,
@@ -145,18 +208,18 @@ class iamCarousel extends HTMLElement {
 
     // MD Progress bar
 
-    const mdStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
-    const mdItemCount = Math.floor(itemCount / mdStep) * mdStep;
+    const mdStep = this.getAttribute('data-mdcols') ? this.getAttribute('data-mdcols') : 1;
+    const mdMax = ((Math.floor(itemCount / mdStep)-1) * mdStep)+1;
 
-    carouselProgressMD.setAttribute('max', mdItemCount);
+    carouselProgressMD.setAttribute('max', mdMax);
     carouselProgressMD.setAttribute('step', mdStep);
 
-    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
-    
+    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
+
     carouselProgressMD.addEventListener(stepperStart, () => {
       clearInterval(stepperInterval);
       stepperInterval = setInterval(function () {
-        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
       });
     });
 
@@ -168,8 +231,10 @@ class iamCarousel extends HTMLElement {
 
       clearInterval(stepperInterval);
 
-      carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
-      const scrollTo = Math.floor((carouselElement.scrollWidth / mdItemCount) * carouselProgressMD.value);
+      carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * carouselProgressMD.value);
+
+      console.log(carouselProgressMD.value);
 
       carouselElement.scrollTo({
         top: 0,
@@ -180,7 +245,7 @@ class iamCarousel extends HTMLElement {
 
 
     // Thumbnails
-    const carouselPips = this.querySelector('.carousel__pips');
+    const carouselPips = this.shadowRoot.querySelector('.carousel__pips');
 
     if (carouselElement.querySelector('[data-thumbnail]')) {
       const thumbnailImages = this.generateThumbnailList(carouselElement);

package/assets/ts/components/content/content.component.ts

@@ -1,5 +1,4 @@
-
-import { transformButtons } from '../../modules/content';
+import {createTitle,replaceShortcode,transformElement,transformButtons, loadComponents} from '../../modules/content';
 
 class iamContent extends HTMLElement {
   constructor() {
@@ -23,95 +22,11 @@ class iamContent extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  addTitle = (title):void => {
-
-    if(this.hasAttribute('data-title-tag')){
-
-      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')} iam-content--title">${title}</${this.getAttribute('data-title-tag')}>`;
-    }
-
-    return '';
-  }
-
-  fixContent = (component):void => {
-
-    const transform = component.getAttribute('data-transform');
-    let wrapper = component;
-
-    if(transform){
-
-      component.querySelectorAll(`${transform} > *:empty`).forEach((element) => {
-        element.remove();
-      });
-
-      wrapper = component.querySelector(`${transform}`);
-    }
-    else {
-
-      component.querySelectorAll(`:scope > *:empty`).forEach((element) => {
-        element.remove();
-      });
-    }
-    
-    const itemClass = component.getAttribute('data-items-class');
-
-    if(itemClass){
-        
-      wrapper.querySelectorAll(`:scope > *`).forEach((element) => {
-        element.classList.add(itemClass);
-      });
-    }
-
-  }
-
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const component = this;
     const url = this.getAttribute('data-url');
 
-    const transform = this.getAttribute('data-transform');
-
-    const fixContent = this.fixContent;
-
-    let elementAttributes = '';
-
-
-    for (const attr of this.attributes) {
-      elementAttributes += `${attr.name}="${attr.value}" `;
-    }
-
-    const addTitle = this.addTitle;
-
-    const registerComponents = (contentComponent): void => {
-      const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
-
-      const assetLocation = document.body.hasAttribute('data-assets-location')
-        ? document.body.getAttribute('data-assets-location')
-        : '/assets';
-
-      // Load components - Each component will load once the first of its type has been loaded
-      components.forEach((component) => {
-        if (component == 'notification') {
-          document.querySelectorAll('[data-notification]').forEach((element) => {
-            element.outerHTML = element.outerHTML
-              .replace(/<div/g, '<iam-notification')
-              .replace(/<\/div>/g, '</iam-notification>');
-          });
-        }
-
-        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
-
-        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-${component}`))
-              window.customElements.define(`iam-${component}`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    };
-
     if (url) {
       const newXHRRequest = new XMLHttpRequest();
       newXHRRequest.open('GET', url, true);
@@ -123,37 +38,58 @@ class iamContent extends HTMLElement {
           if(Array.isArray(response))
             response = response[0];
 
-          const renderedContent = response.content.rendered.replaceAll(/<p>\[(.*)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+          // Create the rendered content block and maintain any shortcodes
+          const renderedContent = replaceShortcode(response.content.rendered);
 
-
-          
+          // Update the content title
           component.parentElement?.querySelector('.iam-content--title')?.remove();
-          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
-
+          const renderedTitle = createTitle(component, response.title.rendered);
 
+          // Transform the component if required
+          if(component.hasAttribute('data-transform')){
 
-          if(transform){
-          
-            component.innerHTML = `<${transform} ${elementAttributes}>${renderedContent}</${transform}>`;  
+            component.innerHTML = transformElement(component,renderedTitle,renderedContent);
             component.removeAttribute('class');
+
+            component.querySelectorAll(`${component.getAttribute('data-transform')} > *:empty`).forEach((element) => {
+              element.remove();
+            });
           }
           else {
-            
+
+            component.insertAdjacentHTML('beforebegin',renderedTitle);
+
             component.innerHTML = `${renderedContent}`;
+            component.querySelectorAll(`:scope > *:empty`).forEach((element) => {
+              element.remove();
+            });
           }
-            
-          fixContent(component);
-          registerComponents(component);
-          transformButtons(component);
 
+          // Load components - Each component will load once the first of its type has been loaded
+          loadComponents(component);
+
+          // Transform the buttons
+          Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
+
+            const fragment = transformButtons(buttons);
+            buttons.parentNode.replaceChild(fragment, buttons);
+          });
+
+          // This allows for content added dynamically via the standardised nav to be added after the content is loaded
           Array.from(document.querySelectorAll('[data-variable]')).forEach((element) => {
 
             if(document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`))
               element.innerHTML = document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`)?.getAttribute('data-variable-value');
           });
 
-          const changeEvent = new CustomEvent('loaded', { detail: {triggered: true} });
+          // Dispatch the loaded event for external JS and save to the data layer
+          const eventDetails = {url: url};
+          const changeEvent = new CustomEvent('content-loaded', { detail: eventDetails });
+
           component?.dispatchEvent(changeEvent);
+
+          window.dataLayer = window.dataLayer || [];
+          window.dataLayer.push({'event': 'content-loaded', ...eventDetails});
         }
       };
 

package/assets/ts/components/form/form.component.ts

@@ -1,12 +1,23 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import { searchAjax, filterList, setTag } from '../../modules/dropdown';
-
-trackComponentRegistered('iam-tag');
+import { trackComponentRegistered } from '../_global';
+import {
+  isFormValid,
+  showIf,
+  hideIf,
+  disabledIf,
+  enabledIf,
+  requiredIf,
+  readonlyIf,
+  writeIf,
+  emptyIf,
+  limitCheckboxes
+} from '../../modules/form';
+
+trackComponentRegistered('iam-form');
 
 class iamForm extends HTMLElement {
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
+    const shadowRoot = this.attachShadow({ mode: 'open' });
 
     const template = document.createElement('template');
     template.innerHTML = `
@@ -15,260 +26,90 @@ class iamForm extends HTMLElement {
     </div>
     `;
 
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  isFormValid(form):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;
-  };
-
-  checkConditions = (conditions):boolean => {
-
-    let meetsCondition = true;
-
-    JSON.parse(conditions).forEach((condition) => {
-      if(this.querySelector(`#${condition['if']}`).value != condition['equals'])
-        meetsCondition = false;
-    });
-
-    return meetsCondition;
-  }
-
-  showIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-show-if]')).forEach((element) => {
-
-      if(!this.checkConditions(element.getAttribute('data-show-if')))
-        element.classList.add('d-none');
-      else 
-        element.classList.remove('d-none');
-
-    });
-  }
-
-  hideIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-hide-if]')).forEach((element) => {
-
-      if(this.checkConditions(element.getAttribute('data-hide-if')))
-        element.classList.add('d-none');
-      else 
-        element.classList.remove('d-none');
-
-    });
-  }
-
-  disabledIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-disabled-if]')).forEach((element) => {
-
-      if(this.checkConditions(element.getAttribute('data-disabled-if')))
-        element.setAttribute('disabled','disabled');
-      else 
-        element.removeAttribute('disabled');
-
-    });
-  }
-
-  enabledIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-enabled-if]')).forEach((element) => {
-
-      if(!this.checkConditions(element.getAttribute('data-enabled-if')))
-        element.setAttribute('disabled','disabled');
-      else 
-        element.removeAttribute('disabled');
-
-    });
-  }
-
-  requiredIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-required-if]')).forEach((element) => {
-
-      if(this.checkConditions(element.getAttribute('data-required-if')))
-        element.setAttribute('required','required');
-      else
-        element.removeAttribute('required');
-
-    });
-  }
-
-  readonlyIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-readonly-if]')).forEach((element) => {
-
-      if(this.checkConditions(element.getAttribute('data-readonly-if')))
-        element.setAttribute('readonly','readonly');
-      else
-        element.removeAttribute('readonly');
-
-    });
-  }
-
-  writeIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-write-if]')).forEach((element) => {
-
-      if(!this.checkConditions(element.getAttribute('data-write-if')))
-        element.setAttribute('readonly','readonly');
-      else
-        element.removeAttribute('readonly');
-
-    });
-  }
-
-  emptyIf = ():void => {
-
-    Array.from(this.querySelectorAll('[data-empty-if]')).forEach((element) => {
-
-      if(this.checkConditions(element.getAttribute('data-empty-if')))
-        element.value = "";
-
-    });
-  }
-
-  getCheckboxLimit = (element):number => {
-
-    const limit = parseInt(element.getAttribute('data-checkbox-limit') || '10', 10);
-
-    return !isNaN(limit) && limit > 0 ? limit : 10;
-  }
-
-  limitCheckboxes = (event?:Event):void => {
-
-    
-
-    const target = event?.target instanceof HTMLInputElement ? event.target : null;
-    const changedCheckbox = target?.matches('input[type="checkbox"]') ? target : null;
-    const checkboxLimitGroup = changedCheckbox?.closest('[data-checkbox-limit]');
-    const checkboxLimitGroups = checkboxLimitGroup
-      ? [checkboxLimitGroup]
-      : [
-          ...(this.hasAttribute('data-checkbox-limit') ? [this] : []),
-          ...Array.from(this.querySelectorAll('[data-checkbox-limit]')),
-        ];
-
-    checkboxLimitGroups.forEach((group) => {
-      
-      const limit = this.getCheckboxLimit(group);
-      const checked = Array.from(group.querySelectorAll('input[type="checkbox"]:checked'));
-      const notChecked = Array.from(group.querySelectorAll('input[type="checkbox"]:not(:checked)'));
-
-      notChecked.forEach((checkbox) => {
-
-        checkbox.setAttribute('disabled','disabled');
-      });
-      
-      if(checked.length < limit){
-        notChecked.forEach((checkbox) => {
-
-          checkbox.removeAttribute('disabled');
-        });
-      }
-
-      if(checked.length <= limit)
-        return;
-      
-      
-      if(changedCheckbox?.checked && group.contains(changedCheckbox)) {
-        changedCheckbox.checked = false;
-        return;
-      }
-
-      checked.slice(limit).forEach((checkbox) => {
-
-        checkbox.checked = false;
-      });
-    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
   connectedCallback(): void {
 
-    const form = this.querySelector('form');
+    const form = this.querySelector<HTMLFormElement>('form') ?? this;
 
     if(!form)
-      return false;
+      return;
 
     form.setAttribute('novalidate','true');
 
     // Form validation
-    form.addEventListener('submit', (e) => {
+    form.addEventListener('submit', (event) => {
 
       form.classList.add('was-validated');
 
-      if (!this.isFormValid(form)) {
+      if (!isFormValid(form)) {
 
-        e.preventDefault();
-        form?.querySelector('input:invalid')?.scrollIntoView();
+        event.preventDefault();
+        form.querySelector<HTMLInputElement>('input:invalid')?.scrollIntoView();
       }
     });
 
     // conditional reveal required fields
-    Array.from(form.querySelectorAll('.conditional [required]')).forEach((input) => {
+    form.querySelectorAll<HTMLElement>('.conditional [required]').forEach((input) => {
 
       input.setAttribute('data-conditional-required','true');
       input.removeAttribute('required');
     });
 
     // conditional reveal required fields (for fields inside of components like the address lookup)
-    Array.from(form.querySelectorAll('.conditional [data-required]')).forEach((input) => {
+    form.querySelectorAll<HTMLElement>('.conditional [data-required]').forEach((input) => {
 
       input.setAttribute('data-conditional-data-required','true');
       input.removeAttribute('data-required');
     });
 
-    this.showIf();
-    this.hideIf();
-    this.disabledIf();
-    this.enabledIf();
-    this.requiredIf();
-    this.readonlyIf();
-    this.writeIf();
-    this.emptyIf();
-    this.limitCheckboxes();
-    
+    showIf(this);
+    hideIf(this);
+    disabledIf(this);
+    enabledIf(this);
+    requiredIf(this);
+    readonlyIf(this);
+    writeIf(this);
+    emptyIf(this);
+    limitCheckboxes(null, this);
 
     form.addEventListener('change', (event) => {
 
-      this.showIf();
-      this.hideIf();
-      this.disabledIf();
-      this.enabledIf();
-      this.requiredIf();
-      this.readonlyIf();
-      this.writeIf();
-      this.emptyIf();
-      this.limitCheckboxes(event);
+      showIf(this);
+      hideIf(this);
+      disabledIf(this);
+      enabledIf(this);
+      requiredIf(this);
+      readonlyIf(this);
+      writeIf(this);
+      emptyIf(this);
+      limitCheckboxes(event, form);
 
-      Array.from(form.querySelectorAll('.conditional [data-conditional-required], .conditional [data-conditional-data-required]')).forEach((input) => {
+      form.querySelectorAll<HTMLElement>('.conditional [data-conditional-required], .conditional [data-conditional-data-required]').forEach((input) => {
 
         input.removeAttribute('required');
         input.removeAttribute('data-required');
       });
 
 
-      Array.from(form.querySelectorAll('.conditional [data-conditional-required]')).forEach((input) => {
+      form.querySelectorAll<HTMLElement>('.conditional [data-conditional-required]').forEach((input) => {
 
-        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+        const conditionalElement = input.closest<HTMLElement>('.conditional');
+        if(!conditionalElement) return;
+
+        const conditionalStyles = window.getComputedStyle(conditionalElement);
 
         if(conditionalStyles.getPropertyValue("display") == 'block')
           input.setAttribute('required', 'required');
       });
 
-      Array.from(form.querySelectorAll('.conditional [data-conditional-data-required]')).forEach((input) => {
+      form.querySelectorAll<HTMLElement>('.conditional [data-conditional-data-required]').forEach((input) => {
+
+        const conditionalElement = input.closest<HTMLElement>('.conditional');
+        if(!conditionalElement) return;
 
-        const conditionalStyles = window.getComputedStyle(input.closest('.conditional'));
+        const conditionalStyles = window.getComputedStyle(conditionalElement);
 
         if(conditionalStyles.getPropertyValue("display") == 'block')
           input.setAttribute('data-required', 'true');