@iamproperty/components 7.5.1--beta5 → 7.5.1--beta7

package/assets/sass/elements/modal.scss

@@ -8,8 +8,12 @@ $darkMode: 'true' !default;
 @include layer('elements', $layers) {
   // #region modal styling
 
-  *:not(.dialog__wrapper) > dialog[open] {
-    overflow-y: hidden;
+  *:not(.dialog__wrapper) > dialog[open] { // change this selector to be a dialog without a popover attribute
+    
+
+    &:has(.mh-lg){
+      overflow-y: hidden!important;
+    }
     width: 90vw;
     max-width: rem(324); // col-width*4
 
@@ -17,6 +21,19 @@ $darkMode: 'true' !default;
     max-height: min(90vh, #{rem(752)});
     overscroll-behavior: contain;
 
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --dialog-padding: #{rem(32)};
+      min-width: rem(335);
+      width: fit-content;
+      max-width: rem(686);
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(454);
+      width: fit-content;
+      max-width: rem(736);
+    }
+
     // Close button
     > form:first-child {
       position: static;
@@ -83,19 +100,6 @@ $darkMode: 'true' !default;
       }
     }
 
-    @include media-breakpoint-up(sm, $mobileOnly) {
-      --dialog-padding: #{rem(32)};
-      min-width: rem(335);
-      width: fit-content;
-      max-width: rem(686);
-    }
-
-    @include media-breakpoint-up(md, $mobileOnly) {
-      min-width: rem(454);
-      width: fit-content;
-      max-width: rem(736);
-    }
-
     &:has(.youtube-embed) {
       padding: 0 !important;
     }
@@ -134,12 +138,6 @@ $darkMode: 'true' !default;
       }
     }
   }
-
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.3);
-    backdrop-filter: blur(4px);
-    overscroll-behavior: contain;
-  }
   // #endregion
 
   // #region Transactional

package/assets/sass/elements/prefix.scss

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+
+@layer elements{
+  :is(.prefix, .suffix) {
+    display: none;
+  }
+  
+  :is(.prefix, .suffix) {
+    --fa-display: flex;
+    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    padding: 0 rem(12);
+    font-size: var(--input-fs, #{rem(16)});
+    line-height: var(--input-lh, #{rem(20)});
+    color: var(--colour-body);
+    background-color: var(--colour-primary-theme);
+    border: 2px solid var(--colour-primary);
+    color: var(--colour-white);
+    margin: 0 !important;
+    //margin-bottom: 1rem;
+    border-end-start-radius: rem(8);
+    border-start-start-radius: rem(8);
+    min-width: calc(#{rem(20 + 12 + 12)} + 4px);
+    overflow: hidden;
+    white-space: nowrap;
+    text-align: center;
+    text-overflow: ellipsis;
+    position: relative;
+    height: stretch;
+
+    flex-shrink: 0;
+
+    &:after {
+      display: inline-block;
+      max-width: rem(20);
+    }
+
+    &[class*='fa-'] {
+      width: calc(#{rem(20 + 12 + 12)} + 4px);
+      padding-inline: 0;
+    }
+
+    select {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    span {
+      display: none;
+    }
+
+    select:has(option:nth-child(1):checked) ~ span:nth-of-type(1),
+    select:has(option:nth-child(2):checked) ~ span:nth-of-type(2),
+    select:has(option:nth-child(3):checked) ~ span:nth-of-type(3),
+    select:has(option:nth-child(4):checked) ~ span:nth-of-type(4),
+    select:has(option:nth-child(5):checked) ~ span:nth-of-type(5),
+    select:has(option:nth-child(6):checked) ~ span:nth-of-type(6),
+    select:has(option:nth-child(7):checked) ~ span:nth-of-type(7),
+    select:has(option:nth-child(8):checked) ~ span:nth-of-type(8),
+    select:has(option:nth-child(9):checked) ~ span:nth-of-type(9),
+    select:has(option:nth-child(10):checked) ~ span:nth-of-type(10) {
+      display: block;
+    }
+
+    select ~ span:after {
+      content: ' \f078';
+      font-family: 'Font Awesome 6 Pro';
+      font-size: 0.8em;
+      display: inline-block;
+      padding-left: 1em;
+    }
+
+    select:focus-visible ~ span:after {
+      content: '\f077';
+    }
+  }
+
+  .prefix {
+      border-right: none;
+    }
+
+    .suffix {
+      border-left: none;
+      border-end-start-radius: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: rem(8) !important;
+      border-end-end-radius: rem(8) !important;
+      order: 2;
+    }
+
+    .prefix span {
+      display: none;
+
+      small {
+        font-size: 0.8em;
+      }
+    }
+
+    .prefix
+      ~ :is(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']), textarea, output) {
+      border-end-start-radius: 0 !important;
+      border-start-start-radius: 0 !important;
+    }
+
+}

package/assets/ts/components/accordion/accordion.component.ts

@@ -34,7 +34,7 @@ class iamAccordion extends HTMLElement {
 
     const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
 
-    if (!this.classList.contains('accordion--keep-open')) {
+    if (!this.classList.contains('accordion--keep-open') && !this.querySelector('details[name]')) {
       // Add the toggle listeners.
       details.forEach((targetDetail) => {
         targetDetail.addEventListener('toggle', () => {

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -266,25 +266,18 @@ class iamActionbar extends HTMLElement {
       this.dispatchEvent(changeEvent);
     });
 
-    console.log(searchBar);
-
     searchBar.addEventListener('click', (event) => {
 
-      console.log(event);
-
-      console.log(event.target.closest('button.suffix'));
-
       if (event && event.target instanceof HTMLElement && event.target.closest('button.suffix')) {
 
-        
-
         const submitEvent = new CustomEvent('search-submit', {
           detail: { search: searchBar.querySelector('input').value },
         });
 
-console.log(this)
-
         this.dispatchEvent(submitEvent);
+
+        searchBar.classList.toggle('show');
+        searchBtn.toggleAttribute('aria-expanded');
       }
     });
 

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

@@ -34,6 +34,14 @@ class iamAddressLookup extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
 
+      <div class="matched d-none">
+        <div class="inner">
+          <p><span class="matched-address"></span></p>
+          <button class="link use-matched">Yes, use this address</button>
+          <button class="link use-entered">No, use the address I entered</button>
+        </div>
+        <span class="invalid-feedback">We found a matching address based on the details you entered. Is this address correct?</span>
+      </div>
       <div class="postcode-lookup was-validated">
         <div>
         <label class="mb-1"><span class="title text-lowercase"></span>
@@ -101,6 +109,11 @@ class iamAddressLookup extends HTMLElement {
     let pageNumber = 1;
     const atleastone = this.querySelector('.atleastone');
 
+    const matchedAddress = this.shadowRoot.querySelector('.matched-address');
+    const matchedAddressWrapper = this.shadowRoot.querySelector('.matched');
+    const matchedAddressUse = this.shadowRoot.querySelector('.matched .use-matched');
+    const matchedAddressEntered = this.shadowRoot.querySelector('.matched .use-entered');
+
     Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement) => {
       titleElement.innerHTML = title;
     });
@@ -588,6 +601,53 @@ class iamAddressLookup extends HTMLElement {
     });
     // #endregion
 
+    // #region Matched address
+
+    if(this.hasAttribute('data-matched')){
+
+      matchedAddressWrapper?.classList.remove('d-none');
+
+
+      if(this.hasAttribute('data-matched-label'))
+        matchedAddress?.innerHTML = this.getAttribute('data-matched-label');
+
+      matchedAddressEntered?.addEventListener('click', () => {
+
+        matchedAddressWrapper?.remove();
+
+        const useCheckbox = this.shadowRoot?.querySelector('[name="use"]');
+        useCheckbox.checked = true;
+
+        lookupWrapper.classList.add('js-hide');
+        manualWrapper.classList.remove('js-hide');
+
+        const values = JSON.parse(this.getAttribute('data-use'));
+        
+        Object.keys(values).forEach((key) => {
+          const value = values[key];
+          if (this.querySelector(`[data-name="${key}"]`)) this.querySelector(`[data-name="${key}"]`).value = value;
+          else if (this.querySelector(`[name="${key}"]`)) this.querySelector(`[name="${key}"]`).value = value;
+        });
+        
+        checkFilled(this);
+      });
+
+      
+      matchedAddressUse?.addEventListener('click', () => {
+
+        matchedAddressWrapper?.remove();
+
+        const values = JSON.parse(this.getAttribute('data-matched'));
+
+        fillInputs(values);
+        checkFilled(this);
+      });
+    }
+    else {
+      matchedAddressWrapper?.remove();
+    }
+    // #endregion
+
     advancedSelect(this, lookup, list, true);
   }
 }

package/assets/ts/components/applied-filters/applied-filters.component.ts

@@ -21,9 +21,7 @@ class iamAppliedFilters extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    
     ${loadCSS}
-    
     </style>
     <div class="applied-filters ${classList}"></div>
     <slot></slot>

package/assets/ts/components/filter-card/filter-card.component.ts

@@ -74,6 +74,33 @@ class iamFilerCard extends HTMLElement {
 
     trackComponent(cardComponent, 'iam-filter-card', ['select-card', 'unselect-card']);
   }
+
+  static get observedAttributes(): any {
+    return ['data-total'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+
+    
+
+    switch (attrName) {
+      case 'data-total': {
+        if (oldVal != newVal) {
+           
+          const cardBody = this.shadowRoot.querySelector('.card__body');
+
+          if(!cardBody?.querySelector('.card__total'))
+            cardBody.insertAdjacentHTML('beforeend',`<div class="card__total">${newVal}</div>`);
+          else {
+            cardBody?.querySelector('.card__total')?.innerHTML = newVal;
+          }
+
+
+        }
+        break;
+      }
+    }
+  }
 }
 
 export default iamFilerCard;

package/assets/ts/components/input/input.component.ts

@@ -0,0 +1,168 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-iamPrefix');
+class iamInput 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/input.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="wrapper" part="wrapper">
+      <span part="prefix"><slot name="prefix"></slot></span>
+      <slot></slot>
+      <slot part="suffix"><slot name="suffix"></slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const component = this;
+    const input = this.querySelector('input');
+    const inputType = input?.hasAttribute('type') ? input?.getAttribute('type') : 'text';
+    const prefixIcon = this.shadowRoot?.querySelector('[part="prefix"]');
+    const suffixIcon = this.shadowRoot?.querySelector('[part="suffix"]');
+
+    
+    if(this.closest('label'))
+      this.classList.add('mb-0');
+
+
+    const setIcon = (inputType) => {
+        
+      // Pre set the icons
+      switch (inputType) {
+        case "date":
+        case "datetime-local":
+        case "year":
+        case "month":
+        case "week":
+          this.setAttribute('data-suffix-icon','calendar') ;
+          suffixIcon?.setAttribute('role','button');
+          break;
+        case "time":
+          this.setAttribute('data-suffix-icon','clock') ;
+          suffixIcon?.setAttribute('role','button');
+          break;
+        default:
+          this.removeAttribute('data-suffix-icon') ;
+          suffixIcon?.removeAttribute('role');
+          break;
+      }
+    }
+    setIcon(inputType);
+
+    // Colour input field
+    if(input?.matches('[type="color"]')){
+      this.insertAdjacentHTML('beforeend', `<output></output>`);
+
+      input.addEventListener('input', () => {
+
+        input.nextElementSibling.value = input.value;
+      });
+    }
+
+
+    if(this.hasAttribute('data-prefix-icon')){
+      prefixIcon?.className = `prefix fa-${this.hasAttribute('data-prefix-weight') ? this.getAttribute('data-prefix-weight') : 'regular'} fa-${this.getAttribute('data-prefix-icon')}`;
+      this.querySelector('input')?.classList.add('has-prefix');
+    }
+    if(this.hasAttribute('data-suffix-icon')){
+      suffixIcon?.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;
+      this.querySelector('input')?.classList.add('has-suffix');
+    }
+
+    if(this.shadowRoot.querySelector('[name="prefix"]')?.assignedElements().length){
+      this.shadowRoot.querySelector('[name="prefix"]')?.classList.add('prefix');
+      this.querySelector('input')?.classList.add('has-prefix');
+    }
+
+    if(this.shadowRoot.querySelector('[name="suffix"]')?.assignedElements().length){
+      this.shadowRoot.querySelector('[name="suffix"]')?.classList.add('suffix');
+      this.querySelector('input')?.classList.add('has-suffix');
+    }
+
+
+    // Change type
+
+    if(this.querySelector('[data-change-type]')){
+      const select = this.querySelector('[data-change-type]');
+
+      select.addEventListener('change', () => {
+        
+        input.setAttribute('type', select.value);
+
+        setIcon(select.value);
+        if(this.getAttribute('data-suffix-icon')){
+            
+          suffixIcon?.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;
+          input?.classList.add('has-suffix');
+        }
+        else {
+          suffixIcon?.removeAttribute('class');
+          input?.classList.remove('has-suffix');
+        }
+      });
+    }
+    
+
+    
+    // #region Date restrictions
+      const today = new Date();
+
+      function formatDate(date, type = "date"): string {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+
+        if(type == "datetime-local")
+          return `${year}-${month}-${day}T00:00:00`;
+
+        return `${year}-${month}-${day}`;
+      }
+
+      const checkDayAllowed = (input,allowedDays) => {
+
+        const day = new Date(input.value).getUTCDay();
+
+        if (allowedDays.includes(day)) input.setCustomValidity('');
+        else input.setCustomValidity('That day of the week is not allowed');
+      }
+
+      if(input?.matches('[type="date"], [type="datetime-local"]') && this.hasAttribute('data-allowed-days')){
+        const allowedDays = JSON.parse(`[${this.getAttribute('data-allowed-days')}]`);
+        
+        checkDayAllowed(input,allowedDays);
+        input.addEventListener('input', () => { checkDayAllowed(input,allowedDays); });
+      }
+    // #endregion
+
+    suffixIcon.addEventListener('click', function () {
+      
+      if(!component?.querySelector('select[data-change-type][slot="suffix"]'))
+        input.showPicker();
+    });
+    
+    prefixIcon.addEventListener('click', function () {
+      
+      if(!component?.querySelector('select[data-change-type][slot="prefix"]'))
+        input.showPicker();
+    });
+    
+
+  }
+}
+
+export default iamInput;

package/assets/ts/components/input-range/input-range.component.ts

@@ -0,0 +1,78 @@
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-iamPrefix');
+class iamDaterange 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/input-range.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+      ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <div class="wrapper" part="wrapper">
+      <slot></slot>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  connectedCallback(): void {
+    
+    const inputs = this.querySelectorAll('input,select');
+
+    if(inputs.length > 1){
+        
+      const setMinMax = ():void => {
+
+        const min = inputs[0].value;
+        let max = inputs[1].value;
+      
+        // Make sure the second input/select is always higher than the first input/select
+        if(parseInt(inputs[1].value) < parseInt(inputs[0].value)){
+          max = min;
+          inputs[1].value = min;
+        }
+
+        // First input/select
+        if(inputs[0].matches('input'))
+          inputs[0].setAttribute('max',max);
+
+        if(inputs[0].matches('select')){
+          Array.from(inputs[0].querySelectorAll('option')).forEach((option) => {
+
+            if (parseInt(option.getAttribute('value')) > max) option.classList.add('d-none');
+            else option.classList.remove('d-none');
+          });
+        }
+
+        // Second input/select
+        if(inputs[1].matches('input'))
+          inputs[1].setAttribute('min',min);
+
+        Array.from(inputs[1].querySelectorAll('option')).forEach((option) => {
+
+          if (parseInt(option.getAttribute('value')) < min) option.classList.add('d-none');
+          else option.classList.remove('d-none');
+        });
+      }
+      setMinMax();
+
+      this.addEventListener('change', () => {
+
+        setMinMax();
+      });
+    }
+    
+  }
+}
+
+export default iamDaterange;