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

package/assets/sass/components/nav.global.scss

@@ -1,19 +1,9 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-
-
 /*  Default colour  */
 :is(iam-nav,.iam-nav) {
 
-  > :not([slot="logo"],[slot="secondary"]) {
-    color-scheme: light;
-  }
-
-  > [slot="secondary"] {
-    color-scheme: light;
-  }
-
   > .nav--menu {
     --colour-heading: var(--colour-primary-theme);
     color-scheme: light;

package/assets/sass/components/notification.global.scss

@@ -1,6 +1,12 @@
 @use '../_func' as *;
 
 .container.notification__holder {
+
+
+  position-anchor: --nav;
+
+  top: anchor(bottom);
+
   position: fixed;
   top: var(--nav-height);
   left: 50%;
@@ -19,6 +25,8 @@
   align-content: flex-end;
   align-items: flex-end;
 
+
+
   :is(.iam-notification, iam-notification) {
     pointer-events: all;
     margin: 0.5rem 0 0.5rem 0;

package/assets/sass/elements/dialog.scss

@@ -33,10 +33,12 @@
       padding-bottom: 0;
     }
   }
+
   dialog[open]:has(iam-modal) {
     --modal-inner-dialog-display: contents;
     place-self: center;
   }
+
   @media (prefers-color-scheme: light) {
     dialog[open]:has(iam-modal) {
       
@@ -47,6 +49,47 @@
     }
   }
 
+/*  Size variants */
+  /*  small */
+  @media screen and (min-width: 36em) {
+
+    *:not(.dialog__wrapper) > dialog[open]:has(.modal--sm)  {
+      
+        min-width: 20.9375rem;
+        width: 20.9375rem;
+        max-width: 20.9375rem;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+    *:not(.dialog__wrapper) > dialog[open]:has(.modal--sm)  {
+        min-width: 28.375rem;
+        width: 28.375rem;
+        max-width: 28.375rem;
+    }
+  }
+
+  /*  large */
+  @media screen and (min-width: 36em) {
+
+    *:not(.dialog__wrapper) > dialog[open]:has(.modal--lg)  {
+        min-width: 42.875rem;
+        width: 42.875rem;
+        max-width: 42.875rem;
+    }
+  }
+
+  @media screen and (min-width: 62em) {
+
+        *:not(.dialog__wrapper) > dialog[open]:has(.modal--lg)  {
+        min-width: 46rem;
+        width: 46rem;
+        max-width: 46rem;
+    }
+  }
+
+
   dialog::backdrop {
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(4px);

package/assets/sass/foundations/colours.scss

@@ -61,30 +61,6 @@
       color: var(--colour-body);
     }
   }
-  
-  @media (prefers-color-scheme: dark) {
-    html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
-
-      --colour-heading: var(--colour-primary-theme);
-      --colour-body: var(--colour-primary-theme);
-      color: var(--colour-primary-theme);
-
-      /*  Apply the light colour scheme not on the background element but just its children so that the background colour isn't overwritten */
-      > * {
-        color-scheme: light;
-      }
-    }
-
-    html:not(.light-theme) .bg-light {
-
-      color-scheme: light;
-      --colour-body: #595959;
-
-      p {
-        color: var(--colour-body);
-      }
-    }
-  }
   /* #endregion */
 
   .invert-colours {

package/assets/sass/foundations/reboot.scss

@@ -226,6 +226,10 @@ $columns: 12;
     grid-template-columns: subgrid;
   }
 
+  nav {
+    anchor-name: --nav;
+  }
+
   *:not(.row) > main:not(:has(.container:last-child)):not(:has(iam-collapsible-side:last-child)) {
     padding-bottom: 1rem;
   }

package/assets/sass/utilities/wordpress.css

@@ -0,0 +1,7 @@
+@layer utilities {
+
+  .has-text-align-center {
+    margin-inline: auto;
+    text-align: center;
+  }
+}

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');

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