@iamproperty/components 7.6.4--beta2 → 7.6.4--beta4

package/assets/sass/components/tag.component.scss

@@ -1,78 +1,59 @@
 @use '../_func' as *;
 @use '../elements/forms';
-
 @use '../elements/admin-panel.scss' as *;
-
-
+@use '../elements/dropdown.scss' as *;
 @use '../utilities/visually-hidden' as *;
 @use '../utilities/display' as *;
+
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }
 
-
-.wrapper {
-
-  position: relative;
-  display: inline-block;
-  margin-bottom: 1rem;
-
-  input {
-    position: absolute;
-    min-height: unset;
-    top: 50%;
-    left: 0;
-    transform: translate(0,-50%);
-    z-index: -99;
-    opacity: 0;
+@layer components {
+  .wrapper {
+
+    position: relative;
+    display: inline-block;
+    margin-bottom: 1rem;
+
+    input {
+      position: absolute;
+      min-height: unset;
+      top: 50%;
+      left: 0;
+      transform: translate(0,-50%);
+      z-index: -99;
+      opacity: 0;
+    }
   }
-}
-
-::slotted(*) {
-  margin-bottom: 0!important;
-}
-
-
-
-
-input:focus {
- 
-  opacity: 1;
-  z-index: 99;
-}
 
+  ::slotted(*) {
+    margin-bottom: 0!important;
+  }
 
-.dropdown {
-  position: absolute;
-  top: calc(100% + 0.5rem);
-  padding: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  z-index: 99;
-  display: none;
-  max-height: rem(244) !important;
-  overflow: auto;
 
-  &:before {
-    display: none;
+  input:focus {
+  
+    opacity: 1;
+    z-index: 99;
   }
-}
-
-.wrapper:is(:focus-within) .dropdown {
-  display: var(--display-panel, none);
-}
 
-@media (hover: hover) {
-  .wrapper .dropdown:hover {
+  .wrapper:is(:focus-within) .dropdown {
     display: var(--display-panel, none);
   }
-}
 
-@media (hover: none) {
-  :host(.hover) .wrapper .dropdown {
-    display: block;
+  @media (hover: hover) {
+    .wrapper .dropdown:hover {
+      display: var(--display-panel, none);
+    }
+  }
+
+  @media (hover: none) {
+    :host(.hover) .wrapper .dropdown {
+      display: block;
+    }
   }
-}
+
+}

package/assets/sass/components/tag.preload.scss

@@ -2,32 +2,7 @@
 
 
 @layer components {
-  iam-tag .tag[slot='checked'] {
-    //margin-bottom: 0.5rem;
-    order: var(--order, 1);
-    //margin-inline: rem(3);
-  }
-
-  iam-tag .tag:not([slot='checked']) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    text-align: left;
-    border-radius: 0;
-    padding-inline: 1rem;
-    outline: none;
-    padding-block: 0.5rem;
-
-    &:not(:hover, :focus, :active, :focus-within) {
-      background: none !important;
-    }
-
-    &::after {
-      display: none;
-    }
-  }
-
+  
   iam-tag:has(label:not([slot='checked']):not([slot='notmatched'])) {
     --display-panel: block;
   }

package/assets/sass/components/tooltip.component.scss

@@ -11,41 +11,42 @@
   :host {
     display: inline;
     position: relative;
-    text-decoration: underline;
-    text-decoration-style: dashed;
-    text-underline-offset: 0.2em;
     overflow-anchor: none; 
     cursor: pointer;
+    margin-right: 0.25rem;
+  }
+
+  slot {
+    display: inline;
+  }
+
+  :host(:empty) {
     display: inline-block;
     width: 1rem;
     height: 1lh;
     min-height: 1rem;
     vertical-align: text-top;
+    margin-right: 0;
   }
 
   .tooltip__anchor {
 
     anchor-name: --anchor;
-    position: absolute;
-    display: block;
-    inset: 0;
-    height: 100%;
-    width: 100%;
-    min-width: 1rem;
-    left: auto;
-    right: 0;
+    position: relative;
+    display: inline-block;
   }
 
-  :host(:empty) .tooltip__anchor{
+  .tooltip__anchor {
 
     height: 1rem;
     width: 1rem;
     background-color: var(--colour, var(--colour-info));
     border-radius: 50%;
-    top: 50%;
-    translate: 0% -50%;
+    margin-bottom: calc(calc(1lh - 1rem) / 2);
+    vertical-align: bottom;
   }
-  :host(:empty) .tooltip__anchor:after {
+  
+  .tooltip__anchor:after {
     font-family: "Font Awesome 6 Pro";
     font-weight: 900;
     content: "\?";

package/assets/sass/elements/button__group.css

@@ -5,6 +5,8 @@
     display: flex;
     flex-direction: column;
     row-gap: var(--gap);
+    reading-flow: source-order;
+    margin-bottom: 1.5rem;
 
     .btn {
       margin-inline-end: 0;
@@ -15,37 +17,73 @@
       margin: 0;
     }
 
+    .btn-tertiary {
+      max-width: fit-content;
+      margin-inline: auto;
+      order: 3;
+      reading-order: 3;
+    }
     .btn-secondary {
       order: 2;
+      reading-order: 2;
     }
     .btn-primary {
       order: 1;
+      reading-order: 1;
+    }
+
+    .btn-compact {
+
+      max-width: fit-content;
+      margin-inline: auto;
     }
   }
+  :is(iam-form,form) .btn__group{
+    padding-top: 1rem;
+  }
   @container (min-width: 36em) {
     .btn__group {
       flex-direction: row;
       row-gap: 0;
-      column-gap: var(--gap);
-      margin-bottom: 1.5rem;
+      gap: var(--gap);
+      flex-wrap: wrap;
 
       .btn {
           
         max-width: fit-content;
         white-space: nowrap;
+        margin-block: auto;
       }
 
-        
-      .btn-secondary {
+      
+      .btn-tertiary {
+        max-width: fit-content;
+        margin-inline: 0;
+        margin-block: auto;
         order: 1;
+        reading-order: 1;
       }
-      .btn-primary {
+      .btn-secondary {
         order: 2;
+        reading-order: 2;
+      }
+      .btn-primary {
+        order: 3;
+        reading-order: 3;
+      }
+      .btn-compact {
+        
+        margin-inline: 0;
+        margin-block: auto;
       }
     }
     .btn__group.text-end {
       justify-content: flex-end;
     }
+    :is(iam-form,form) .btn__group{
+      justify-content: flex-end;
+      padding-top: 3rem;
+    }
     iam-modal .btn__group:last-child .btn,
     dialog .btn__group:last-child .btn {
       margin-bottom: 0;

package/assets/sass/elements/container.scss

@@ -6,17 +6,22 @@
 
 
 @layer elements {
+  // #region contain
   // #region container
   .container {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    padding: var(--container-padding);
 
-    grid-column: container !important;
     container-type: inline-size;
     width: 100%;
 
+    &:not([class*='col-']){
+
+      grid-column: container !important;
+      padding: var(--container-padding);
+    }
+
     &:not(:has(.row)):has([class*='col-']) {
       display: grid;
       grid-template-columns:

package/assets/sass/elements/dropdown.scss

@@ -0,0 +1,87 @@
+@use '../_func' as *;
+
+@layer elements {
+  
+  // #region Dropdown
+  .dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    padding: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    z-index: 99;
+    display: none;
+    max-height: rem(244) !important;
+    overflow: auto;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  // #endregion
+  
+  // #region Needed for the component files
+  :is(iam-tag,iam-multiselect):has(label:not([slot='checked'])) {
+    --display-panel: block;
+  }
+
+  :is(iam-tag,iam-multiselect):has(label[slot='checked']) {
+    --display-button: block;
+  }
+
+  :is(iam-tag,iam-multiselect)[data-single] .tag[slot='checked'],
+  :is(iam-tag,iam-multiselect)[data-single] .tag[slot='checked'] * {
+    pointer-events: none!important;
+  }
+
+  @container style(--theme: dark) {
+    :host :is(.tag, .badge):not([slot='checked']) {
+      color: var(--colour-heading);
+    }
+  }
+  // #endregion
+
+  // #region Indivitual options
+  .dropdown__option[slot='checked'] {
+    order: var(--order, 1);
+  }
+
+  .dropdown__option:not([slot='checked']) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    text-align: left;
+    border-radius: 0;
+    padding-inline: 1rem;
+    outline: none;
+    padding-block: 0.5rem;
+
+    padding-bottom: 0.25em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    &:not(:hover, :focus, :active, :focus-within) {
+      background: none !important;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    &[data-email] {
+
+      &::after {
+        content: attr(data-email);
+        display: block;
+        line-height: 1;
+        padding-bottom: 0.25em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+  // #endregion
+}

package/assets/sass/elements/forms.scss

@@ -1029,6 +1029,7 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
     padding-right: 3rem;
   }
 
+
   .empty {
     position: absolute;
     bottom: 0.5rem;
@@ -1051,6 +1052,11 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
       font-size: 1.5rem;
     }
   }
+  
+  &:has([name="postcode"][disabled]) .empty{
+
+    display: none;
+  }
 
   &:has(input:is([name$="Alt"]):not([data-value],[data-placeholder])) .empty {
     display: none;

package/assets/sass/foundations/colours.scss

@@ -23,18 +23,21 @@
     }
   }
 
-  :is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
-
-    --colour-heading: var(--colour-white);
-    --colour-body: var(--colour-white);
-    color: var(--colour-white);
+  @scope (:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary)) to ([class*='bg-']) {
+    
+    :scope {
+        
+      --colour-heading: var(--colour-white);
+      --colour-body: var(--colour-white);
+      color: var(--colour-white);
 
-    > * {
+    }
+    
+    :scope > * {
       
       color-scheme: dark;
     }
   }
-
   // #region When the theme is set to dark via the dark mode component
   // OR when the dark mode is set via the browser or device when no component is present
   

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -617,19 +617,26 @@ class iamAddressLookup extends HTMLElement {
     // #endregion
 
     advancedSelect(this, lookup, list, true);
+
+    if (this.hasAttribute('data-disabled'))
+      lookup?.setAttribute('disabled','disabled');
   }
 
   static get observedAttributes(): any {
-    return ['data-url'];
+    return ['data-disabled'];
   }
 
   attributeChangedCallback(attrName, oldVal, newVal): void {
-    const addressComponent = this.querySelector('iam-address-lookup');
+    const lookup = this.shadowRoot.querySelector('[name="postcode"]');
 
     switch (attrName) {
-      case 'data-url': {
-        if (oldVal != newVal && addressComponent) {
-          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+      case 'data-disabled': {
+      console.log(newVal);
+        if (oldVal != newVal && newVal == 'disabled') {
+          lookup?.setAttribute('disabled','disabled');
+        }
+        else if (oldVal != newVal) {
+          lookup?.removeAttribute('disabled');
         }
         break;
       }

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

@@ -43,7 +43,7 @@ class iamModal extends HTMLElement {
     const originalDialog = this.querySelector('dialog');
 
     const id = this.hasAttribute('id') ? this.getAttribute('id') : originalDialog?.getAttribute('id');
-    const dialog = this.shadowRoot?.querySelector('dialog');
+    let dialog = this.shadowRoot?.querySelector('dialog');
     const closeButton = this.shadowRoot?.querySelector('[data-close]');
     const cancelButton = this.shadowRoot?.querySelector('[data-cancel]');
     const agreedButton = this.querySelector('button[slot="agreed-button"]') ? this.querySelector('button[slot="agreed-button"]') : this.shadowRoot?.querySelector('[data-agreed]');

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -1,5 +1,4 @@
-import Cookies from 'js-cookie';
-import { filterList } from '../../modules/dropdown';
+import { searchAjax, filterList, addKeyboardEvents } from '../../modules/dropdown';
 
 // Data layer Web component created
 window.dataLayer = window.dataLayer || [];
@@ -56,6 +55,12 @@ class iamMultiselect extends HTMLElement {
     const ajaxURL = this.getAttribute('data-url');
     innerLabel.innerHTML = multiselect.getAttribute('data-label');
 
+    // Make sure the dropdown options are set
+    Array.from(this.querySelectorAll(':scope > label')).forEach((label) => {
+      label.classList.add('dropdown__option');
+      label?.querySelector('i')?.remove();
+    });
+
     if (multiselect.hasAttribute('placeholder')) {
       search.setAttribute('placeholder', multiselect.getAttribute('placeholder'));
     }
@@ -132,7 +137,7 @@ class iamMultiselect extends HTMLElement {
       if (multiselect.hasAttribute('data-url')) {
       
         if (search.value.length == 3) {
-          searchAjax(search.value);
+          searchAjax(multiselect, search, filterList);
         }
       } else {
           
@@ -222,6 +227,7 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Add some keyboard features to keep it accessible
+    addKeyboardEvents(this, search);
     multiselect.addEventListener('keydown', function (event) {
       const activeElement = document.activeElement;
 
@@ -262,38 +268,6 @@ class iamMultiselect extends HTMLElement {
             if (nextCheckbox) nextCheckbox.focus();
             else search.focus();
           }
-          break;
-        case 'ArrowUp':
-          // Up pressed
-          event.preventDefault();
-
-          if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const arrCheckboxes = multiselect.querySelectorAll(`label:not([slot="checked"]):not([slot="checked"])`);
-
-            const activeIndex = Array.from(arrCheckboxes).indexOf(activeElement.closest('label'));
-            const prevCheckbox = Array.from(arrCheckboxes)[activeIndex - 1];
-
-            if (prevCheckbox) prevCheckbox.focus();
-            else search.focus();
-          }
-
-          break;
-        case 'ArrowDown':
-          // Down pressed
-          event.preventDefault();
-
-          if (activeElement == multiselect) {
-            multiselect.querySelector('label:not([slot="checked"]):not([slot="checked"])').focus();
-          } else if (activeElement.hasAttribute('type') && activeElement.getAttribute('type') == 'checkbox') {
-            const activeValue = activeElement.value;
-
-            const nextCheckbox = multiselect.querySelector(
-              `label:has(input[value="${activeValue}"]) ~ label:not([slot="checked"]):not([slot="checked"])`
-            );
-
-            if (nextCheckbox) nextCheckbox.focus();
-          }
-
           break;
         case 'Enter':
           event.stopPropagation();
@@ -318,6 +292,7 @@ class iamMultiselect extends HTMLElement {
       }
     });
 
+
     function checkLastTag(): Element | null {
       if (order == 0) return false;
 
@@ -368,49 +343,6 @@ class iamMultiselect extends HTMLElement {
       wrapper.removeAttribute('data-mousedown');
     });
 
-    const searchAjax = async (searchterm): any => {
-      const searchAjaxURL = `${ajaxURL}${encodeURI(searchterm)}`;
-
-      // Setup controller vars if not already set
-      if (!window.controller) window.controller = [];
-
-      // Abort if controller already present for this url
-      if (window.controller[searchAjaxURL]) window.controller[searchAjaxURL].abort();
-
-      // Create a new controller so it can be aborted if new fetch made
-      window.controller[searchAjaxURL] = new AbortController();
-      const { signal } = controller[searchAjaxURL];
-
-      try {
-        await fetch(searchAjaxURL, {
-          signal: signal,
-          method: 'get',
-          credentials: 'same-origin',
-          headers: new Headers({
-            'Content-Type': 'application/json',
-            Accept: 'application/json',
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
-          }),
-        })
-          .then((response) => response.json())
-          .then((response) => {
-
-            let items = '';
-
-            for (let i = 0; i < response['data'].length; i++) {
-              items += `<label class="tag"><input type="checkbox" name="${multiselect.hasAttribute('data-name') ? multiselect.getAttribute('data-name') : 'tags'}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
-            }
-
-            multiselect.insertAdjacentHTML('beforeend', `${items}`);
-            
-            filterList(multiselect, search);
-            return response;
-          });
-      } catch (error) {
-        console.log(error);
-      }
-    };
   }
 }