@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/utilities/text.scss

@@ -0,0 +1,122 @@
+@layer utilities {
+  .font-monospace {
+    font-family: var(--font-monospace) !important;
+  }
+
+  .font-body {
+    font-family: var(--font-body) !important;
+  }
+
+  .fs-1 {
+    font-size: rfs-fluid-value(2.5rem) !important;
+  }
+
+  .fs-2 {
+    font-size: rfs-fluid-value(2rem) !important;
+  }
+
+  .fs-3 {
+    font-size: rfs-fluid-value(1.75rem) !important;
+  }
+
+  .fs-4 {
+    font-size: rfs-fluid-value(1.5rem) !important;
+  }
+
+  .fs-5 {
+    font-size: rfs-fluid-value(1.25rem) !important;
+  }
+
+  .fs-6 {
+    font-size: rfs-fluid-value(1rem) !important;
+  }
+
+  .fst-italic {
+    font-style: italic !important;
+  }
+
+  .fst-normal {
+    font-style: normal !important;
+  }
+
+  .fw-light {
+    font-weight: 300 !important;
+  }
+
+  .fw-lighter {
+    font-weight: lighter !important;
+  }
+
+  .fw-normal {
+    font-weight: 400 !important;
+  }
+
+  .fw-bold {
+    font-weight: 700 !important;
+  }
+
+  .fw-semibold {
+    font-weight: 600 !important;
+  }
+
+  .fw-bolder {
+    font-weight: bolder !important;
+  }
+
+  .lh-0 {
+    line-height: 0 !important;
+  }
+
+  .lh-1 {
+    line-height: 1 !important;
+  }
+
+  .text-start {
+    text-align: left !important;
+  }
+
+  .text-end {
+    text-align: right !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .text-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .text-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }
+
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .text-wrap {
+    white-space: normal !important;
+  }
+
+  .text-nowrap {
+    white-space: nowrap !important;
+  }
+
+  .text-break {
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+  }
+}

package/assets/sass/utilities/visible.scss

@@ -0,0 +1,9 @@
+@layer utilities {
+  .visible {
+    visibility: visible !important;
+  }
+
+  .invisible {
+    visibility: hidden !important;
+  }
+}

package/assets/sass/utilities/visually-hidden.scss

@@ -0,0 +1,14 @@
+@layer utilities {
+  .visually-hidden,
+  .visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}

package/assets/sass/utilities/wider-colours.scss

@@ -0,0 +1,10 @@
+@layer utilities {
+  @for $i from 1 through 23 {
+    .wider-colour-#{$i} {
+      --wider-colour: var(--wider-colour-#{$i} );
+      --wider-colour-hover: var(--wider-colour-#{$i}-hover);
+      --wider-colour-active: var(--wider-colour-#{$i}-active);
+      color: #262626 !important;
+    }
+  }
+}

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

@@ -101,7 +101,7 @@ class iamActionbar extends HTMLElement {
       </div>
 
       <div class="actionbar--search">
-        <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
+        <button data-search class="btn btn-compact fa-xmark-large btn-secondary mb-0" >Close</button>
 
         <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>

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

@@ -51,7 +51,7 @@ class iamAddressLookup extends HTMLElement {
           </span>
         </label>
     
-          <span class="invalid-feedback mb-2">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
+          <span class="invalid-feedback mb-2" id="invalid-feedback-address-lookup">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
 
           <div class="datalist__wrapper ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
             <slot name="beforeList"></slot>
@@ -103,7 +103,7 @@ class iamAddressLookup extends HTMLElement {
     const preFilledAddressRemoveBtn = this.shadowRoot.querySelector('[part="remove-button"]');
     const dataDisplayText = this.hasAttribute('data-display-text');
     const postcodeSubmit = this.shadowRoot?.querySelector('#postcode__submit');
-    const errorMsg = this.shadowRoot?.querySelector('.invalid-feedback');
+    const errorMsg = this.shadowRoot?.querySelector('#invalid-feedback-address-lookup');
     const paginationWrapper = this.shadowRoot?.querySelector('#paginationWrapper');
     const minChars = this.hasAttribute('data-min-chars') ? parseInt(this.getAttribute('data-min-chars')) : 3;
     let pageNumber = 1;
@@ -201,7 +201,7 @@ class iamAddressLookup extends HTMLElement {
 
 
     const fillInputs = (values): void => {
-
+  
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
@@ -506,6 +506,9 @@ class iamAddressLookup extends HTMLElement {
       if (![40,38,13].includes(e.keyCode) && lookup.value.length >= minChars){
         const valid = await search(lookup.value);
 
+        console.log(errorMsg)
+        console.log(valid)
+
         if(valid != true){
           lookup?.classList.add('is-invalid');
           errorMsg?.innerHTML = valid;
@@ -650,6 +653,24 @@ class iamAddressLookup extends HTMLElement {
 
     advancedSelect(this, lookup, list, true);
   }
+
+  static get observedAttributes(): any {
+    return ['data-url'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+
+    const addressComponent = this.querySelector('iam-address-lookup');
+
+    switch (attrName) {
+      case 'data-url': {
+        if (oldVal != newVal && addressComponent) {
+          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+        }
+        break;
+      }
+    }
+  }
 }
 
 export default iamAddressLookup;

package/assets/ts/components/bento-grid/bento-grid.component.ts

@@ -45,6 +45,7 @@ class iamBentoGrid extends HTMLElement {
 
     Array.from(arrDetails).forEach((details: HTMLDetailsElement) => {
       details.classList.add('bg-primary');
+      details.classList.add('invert-colours');
       const summary = details.querySelector('summary');
 
       summary?.classList.add('h3');

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -30,58 +30,77 @@ class iamDarkMode extends HTMLElement {
   }
 
   connectedCallback(): void {
-    const label = this.querySelector('label');
 
     const storedTheme = localStorage.getItem('user-theme');
-
-    console.log(storedTheme);
+    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
     // Work from local storage first then look at the media preferences
-    label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
-    if (storedTheme == 'dark-theme') {
-      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+    this?.innerHTML = `<label class="toggle"><input type="checkbox" name="dark-mode" /> <span style="all: unset!important;">Light mode</span></label>`;
+
+    const label = this.querySelector('label');
+    const input = this.querySelector('input');
+    const span = this.querySelector('span');
+
+    const setDark = (): void => {
+      
+      document.documentElement.classList.add('dark-theme');
+      document.documentElement.classList.remove('light-theme');
+
+      input.checked = true;
+      span?.innerHTML = `Dark mode`;
       label?.classList.add('dark-theme');
-      document.documentElement.className = 'dark-theme';
-    } else if (storedTheme == 'light-theme') {
-      label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
-      label?.classList.remove('dark-theme');
-      document.documentElement.className = 'light-theme';
     }
 
-    const hasDarkPreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (hasDarkPreference) {
-      label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+    const unsetDark = (): void => {
+
+      document.documentElement.classList.remove('dark-theme');
+      document.documentElement.classList.add('light-theme');
+
+      input.checked = false;
+      span?.innerHTML = `Light mode`;
       label?.classList.remove('dark-theme');
     }
 
-    this.addEventListener('click', (event) => {
-      if (label?.querySelector('input:checked')) {
-        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
+    if (storedTheme == 'light-theme') {
+      document.documentElement.classList.add('light-theme');
+    }
+    else if (storedTheme == 'dark-theme') {
+      setDark();
+    }
+    else if(hasDarkPreference) {
+      setDark();
+    }
+
+    input.addEventListener('change', () => {
+      
+      if(input.checked){
         localStorage.setItem('user-theme', 'dark-theme');
-        document.documentElement.className = 'dark-theme';
-        label?.classList.add('dark-theme');
-      } else {
-        label?.innerHTML = `<input type="checkbox" name="dark-mode" /> Light mode`;
+        setDark();
+      }
+      else {
         localStorage.setItem('user-theme', 'light-theme');
-        document.documentElement.className = 'light-theme';
-        label?.classList.remove('dark-theme');
+        unsetDark();
       }
-    });
 
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
-      if (matches) {
-        label?.innerHTML = `<input type="checkbox" name="dark-mode" checked="checked" /> Dark mode`;
-        label?.classList.add('dark-theme');
-        document.documentElement.className = 'dark-theme';
-      }
+      // Dispatch event so other toggles can then detect it
+      const customEvent = new CustomEvent('theme-change');
+      document.dispatchEvent(customEvent);
     });
 
-    window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', ({ matches }) => {
-      if (matches) {
-        label?.innerHTML = `<input type="checkbox" name="dark-mode"  /> Light mode`;
-        label?.classList.remove('dark-theme');
-        document.documentElement.className = 'light-theme';
-      }
+    // Detect if the theme has been changed outside of this toggle; i.e. another toggle or via other javascript
+    document.addEventListener('theme-change', () => {
+
+      if(document.documentElement.classList.contains('dark-theme'))
+        setDark();
+      else
+        unsetDark();
+    })
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => {
+      if (matches)
+        setDark();
+      else 
+        unsetDark();
     });
   }
 }

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

@@ -40,7 +40,7 @@ class iamInput extends HTMLElement {
       this.classList.add('mb-0');
 
 
-    const setIcon = (inputType) => {
+    const setIcon = (inputType): void => {
         
       // Pre set the icons
       switch (inputType) {
@@ -65,7 +65,7 @@ class iamInput extends HTMLElement {
     setIcon(inputType);
 
 
-    const setCurrencyRules = () => {
+    const setCurrencyRules = (): void => {
       
       input.setAttribute('type','text');
       input?.setAttribute('data-value',input.value);
@@ -188,7 +188,7 @@ class iamInput extends HTMLElement {
         return `${year}-${month}-${day}`;
       }
 
-      const checkDayAllowed = (input,allowedDays) => {
+      const checkDayAllowed = (input,allowedDays): void => {
 
         const day = new Date(input.value).getUTCDay();
 

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

@@ -58,7 +58,7 @@ class iamModal extends HTMLElement {
 
 
 
-    const openModal = () => {
+    const openModal = (): void => {
       dialog?.showModal();
       dialog?.focus();
 
@@ -109,7 +109,7 @@ class iamModal extends HTMLElement {
       this.moveBefore(element, originalDialog);
     });
 
-    const closeModal = () => {
+    const closeModal = (): void => {
       dialog?.close();
       
       const closeEvent = new CustomEvent('modal-closed', {

package/assets/ts/components/multi-step-modal/multi-step-modal.component.ts

@@ -44,7 +44,7 @@ class iamMultiStepModal extends HTMLElement {
     const steps = this.shadowRoot.querySelector('.steps');
     const form = this.querySelector('form');
 
-    const openModal = () => {
+    const openModal = (): void => {
       dialog?.showModal();
       dialog?.focus();
 
@@ -97,7 +97,7 @@ class iamMultiStepModal extends HTMLElement {
       });
     });
 
-    const closeModal = () => {
+    const closeModal = (): void => {
       dialog?.close();
       
       const closeEvent = new CustomEvent('modal-closed', {

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

@@ -127,7 +127,7 @@ class iamMultiselect extends HTMLElement {
     });
 
     // Filter list
-    const filterList = () => {
+    const filterList = (): void => {
 
       Array.from(multiselect.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
         const checkbox = label.querySelector('input');

package/assets/ts/components/nav/nav.component.ts

@@ -40,7 +40,7 @@ class iamNav extends HTMLElement {
           </div>
           <div class="dialog__wrapper d-none" id="search-wrapper"></div>
           <slot name="actions"></slot>
-          <div class="menu__secondary">
+          <div class="menu__secondary bg-light">
             <div class="container">
             <slot name="secondary"></slot>
             </div>

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

@@ -1551,7 +1551,7 @@ class iamSTDAddressLookup extends HTMLElement {
     const currentContent = this.innerHTML;
     this.innerHTML = `<iam-address-lookup 
     class="${this.getAttribute('class')}" 
-    data-url="/standardaddress.json?search_query=" 
+    ${this.hasAttribute('data-url') ? `data-url='${this.getAttribute('data-url')}?search_query='` : `data-url='/stand-ardaddress.json?search_query='`}
     data-postcode="true" 
     data-min-chars="5" 
     ${this.hasAttribute('data-title') ? `data-title='${this.getAttribute('data-title')}'` : `data-title='Find an address by postcode'`}
@@ -1604,7 +1604,7 @@ class iamSTDAddressLookup extends HTMLElement {
       <option></option>  
       ${countiesString}
     </select></label>
-    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="postcode" type="text" required data-required data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
+    <label>Postcode${this.hasAttribute('data-show-required') ? '*' : ''} <input name="postcode" type="text" ${!this.hasAttribute('data-required') || this.hasAttribute('data-required') && this.getAttribute('data-required') == 'false' ? 'required data-required' : ''} data-readonly maxlength="8" ${this.hasAttribute('data-required') ? ' required' : ''}/></label>
     <label>Country${this.hasAttribute('data-show-required') && this.hasAttribute('data-country-required') ? '*' : (!this.hasAttribute('data-show-required') && !this.hasAttribute('data-county-required') ? ' (optional)' : '')} 
       <select name="region" data-readonly ${this.hasAttribute('data-country-required') ? 'data-required' : ''}>
         <option value=""></option>
@@ -1661,7 +1661,7 @@ class iamSTDAddressLookup extends HTMLElement {
     </fieldset>
 
     <button slot="actions" type="button" id="overseasToggle" class="link toggleOverseas">Use overseas address</button>` : ''}
-
+    ${this.hasAttribute('data-address-unknown') ? `<label slot="actions"><input type="checkbox" value="true" name="${this.getAttribute('data-address-unknown')}" ${this.hasAttribute('data-address-unknown-checked') ? 'checked="checked"' : '' }/> Address unknown</label>` : ``}
     <div class="bg-light text-center px-3" slot="afterList">
       <p class="p-2">Can't find an address? Check details with the <br/><a href="" class="fa-new"><i class="fa-regular fa-arrow-up-right-from-square"></i>Royal mail address finder</a></p>
       ${this.hasAttribute('data-allow-overseas') ? `<hr/><p class="p-2">If the address doesn’t exist you can enter manually <br /><button type="button" id="overseasToggleInline" class="mt-1 mb-0 btn btn-action"><i class="fa-regular fa-edit me-1"></i>Enter address manually</button></p>` : ''}
@@ -1679,8 +1679,7 @@ class iamSTDAddressLookup extends HTMLElement {
     const atleastone = this.querySelector('.overseas-atleastone');
     const overseasFields = this.querySelector('.overseas');
 
-
-    const openOverseas = () => {
+    const openOverseas = (): void => {
       const updateEvent = new CustomEvent('open-manual');
       addressComponent.dispatchEvent(updateEvent);
       this.classList.add('show-overseas');
@@ -1731,6 +1730,7 @@ class iamSTDAddressLookup extends HTMLElement {
       addressComponent.dispatchEvent(updateEvent);
 
       languageToggle.focus();
+
     });
 
 
@@ -1753,6 +1753,39 @@ class iamSTDAddressLookup extends HTMLElement {
       }
     });
 
+
+    // If the address unknown checkbox if checked then remove any required fields so you can post the form
+    if(this.hasAttribute('data-address-unknown')){
+      const addressUnknownInput = this.querySelector(`[name="${this.getAttribute('data-address-unknown')}"]`);
+
+      if(addressUnknownInput && addressUnknownInput.checked) {
+        
+        Array.from(this.querySelectorAll('[required]')).forEach(element => {
+          element.removeAttribute('required');
+          element.setAttribute('data-not-unknown-required','true');
+        });
+      }
+
+      addressUnknownInput?.addEventListener('change',(event) => {
+        if(addressUnknownInput.checked) {
+          Array.from(this.querySelectorAll('[required]')).forEach(element => {
+            element.removeAttribute('required');
+            element.setAttribute('data-not-unknown-required','true');
+          });
+
+          const updateEvent = new CustomEvent('address-unknown');
+          this.dispatchEvent(updateEvent);
+        }
+        else {
+          Array.from(this.querySelectorAll('[data-not-unknown-required')).forEach(element => {
+            element.setAttribute('required','true');
+          });
+          
+          const updateEvent = new CustomEvent('address-known');
+          this.dispatchEvent(updateEvent);
+        }
+      });
+    }
   }
 }
 

package/assets/ts/modules/advanced-select.ts

@@ -117,7 +117,7 @@ function advancedSelect(advancedSelect, displayInputField, datalist, isSearch =
     );
 
 
-  const emptyField = () => {
+  const emptyField = (): void => {
 
     displayInputField.removeAttribute('placeholder');
 

package/assets/ts/modules/applied-filters.ts

@@ -94,7 +94,7 @@ function createAppliedFilters(container, filters): void {
     }
   };
 
-  const checkForChecked = (setFilter = false) => {
+  const checkForChecked = (setFilter = false): void => {
 
     filters.innerHTML = '';
     Array.from(
@@ -126,7 +126,7 @@ function createAppliedFilters(container, filters): void {
   });
 
 
-  const filterClicked = (filter) => {
+  const filterClicked = (filter): void => {
 
     if(!filter?.hasAttribute('data-name'))
       return false;

package/assets/ts/modules/chart.module.ts

@@ -13,7 +13,7 @@ export const addClasses = (chartElement: any, chartOuter: any): boolean => {
 
     Array.from(chartOuter.querySelectorAll(`[data-colour-${i}]`)).forEach((element: HTMLElement) => {
       const colour = element.getAttribute(`data-colour-${i}`);
-      element.style.setProperty(`--chart-colour-${i}-set`, `var(--chart-colour-${colour})`);
+      element.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);
       element.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
     });
   }