@iamproperty/components 7.5.1--beta12 → 7.6.1

package/assets/sass/foundations/root.scss

@@ -17,20 +17,158 @@ $darkMode: 'true' !default;
       #{$var}: #{$value};
     }
 
-    // Wider colours
-    @each $colour, $value in $wider-colours {
-      --wider-colour-#{$colour}: #{$value};
-    }
-    @each $colour, $value in $wider-colours-hover {
-      --wider-colour-#{$colour}-hover: #{$value};
-    }
-    @each $colour, $value in $wider-colours-active {
-      --wider-colour-#{$colour}-active: #{$value};
-    }
+    color-scheme: light dark;
+
+    --colour-black: #000000;
+    --colour-white: #fcfcfc;
+
+    /* #region Theme colours */
+    --colour-primary-theme: #00313c;
+    --colour-primary: light-dark(#00313c,#b3c1c5);
+
+    --colour-secondary-theme: #b4e6a5;
+    --colour-secondary: #b4e6a5;
+    
+    --colour-success-theme: #b4e6a5;
+    --colour-success: #b4e6a5;
+
+    --colour-info-theme: #1ebee6;
+    --colour-info: light-dark(#1ebee6,#35c5e9);
+
+    --colour-warning-theme: #ffa500;
+    --colour-warning: light-dark(#ffa500,#ffb733);
+
+    --colour-danger-theme: #dc3545;
+    --colour-danger: light-dark(#dc3545,#e7727d);
+
+    --colour-light-theme: #eeeeee;
+    --colour-light: #eeeeee;
+
+    --colour-dark-theme: #46003c;
+    --colour-dark: light-dark(#46003c,#b599b1);
+    /* #endregion */
+
+    /* #region functional colours */
+    --colour-muted: #9d9d9d;
+
+    --colour-canvas: light-dark(#fcfcfc,#262626);
+    --colour-canvas-2: light-dark(#ffffff,#313131);
+    --colour-body-default: light-dark(#595959,#bfbfbf);
+    --colour-body: light-dark(#595959,#bfbfbf);
+    --colour-heading: light-dark(var(--colour-primary-theme),var(--colour-primary));
+    --colour-link: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-focus: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-active: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-border: light-dark(#d8d8d8,var(--colour-white));
+    --colour-brand: light-dark(var(--colour-primary-theme),var(--colour-white));
+
+    --colour-btn: var(--colour-primary-theme);
+    --colour-btn-bg: light-dark(var(--colour-warning-theme),var(--colour-white));
+    --colour-btn-border: light-dark(var(--colour-warning-theme),var(--colour-white));
+    --colour-btn-bg-hover: transparent;
+    --colour-btn-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
+
+    --colour-btn-secondary: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-btn-secondary-border: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-btn-secondary-bg: transparent;
+    --colour-btn-secondary-bg-hover: light-dark(var(--colour-primary-theme),var(--colour-white));
+    --colour-btn-secondary-hover: light-dark(var(--colour-inverted),var(--colour-primary-theme));
+    --colour-btn-action-hover-bg: light-dark(var(--colour-light),#313131);
+
+    --colour-activeLink: light-dark(#e8f9fd,#173c45);
+    --colour-activeLinkBorder: light-dark(#1dbde6,#1dbde6);
+
+    --colour-underline: var(--colour-secondary-theme);
+    --colour-selected: var(--colour-info-theme);
+
+    --colour-inverted: #fcfcfc;
+
+    --colour-notification-bg: light-dark(#e9f9fd,var(--colour-canvas-2));
+    --colour-notification-warning-bg: light-dark(#fff6e6,var(--colour-canvas-2));
+    --colour-notification-danger-bg: light-dark(#fcebec,var(--colour-canvas-2));
+    --colour-notification-success-bg: light-dark(#f8fdf6,var(--colour-canvas-2));
+    /* #endregion */
+
+    /* #region Wider colours */
+    --wider-colour-1: #EEEEEE;
+    --wider-colour-2: #EBD7F6;
+    --wider-colour-3: #BEE8F8;
+    --wider-colour-4: #A6DCC7;
+    --wider-colour-5: #FAD0DA;
+    --wider-colour-6: #AFCCF2;
+    --wider-colour-7: #FFD2B4;
+    --wider-colour-8: #CDF0F2;
+    --wider-colour-9: #FFABC2;
+    --wider-colour-10: #DCEAF2;
+    --wider-colour-11: #EEBCB3;
+    --wider-colour-12: #F0BDFF;
+    --wider-colour-13: #FFF8CF;
+    --wider-colour-14: #92E3DF;
+    --wider-colour-15: #FEEAE8;
+    --wider-colour-16: #8BC3A6;
+    --wider-colour-17: #FEF0A6;
+    --wider-colour-18: #FFBDA0;
+    --wider-colour-19: #CBEFE1;
+    --wider-colour-20: #FFDD90;
+    --wider-colour-21: #97DBF2;
+    --wider-colour-22: #FFAF91;
+    --wider-colour-23: #C2DCD9;
+    /* #endregion */
+    /* #region Wider colours hover */
+    --wider-colour-1-hover: #E0E0E0;
+    --wider-colour-2-hover: #DFCCE8;
+    --wider-colour-3-hover: #B6DEED;
+    --wider-colour-4-hover: #98CBB7;
+    --wider-colour-5-hover: #EFC8D1;
+    --wider-colour-6-hover: #A6C1E5;
+    --wider-colour-7-hover: #F4CAAF;
+    --wider-colour-8-hover: #C2E3E5;
+    --wider-colour-9-hover: #F5A2B9;
+    --wider-colour-10-hover: #CFDCE3;
+    --wider-colour-11-hover: #E3B2A9;
+    --wider-colour-12-hover: #E3B2F2;
+    --wider-colour-13-hover: #F0E9C2;
+    --wider-colour-14-hover: #8AD9D6;
+    --wider-colour-15-hover: #F8E1DF;
+    --wider-colour-16-hover: #81B59A;
+    --wider-colour-17-hover: #F2E5A0;
+    --wider-colour-18-hover: #F2B69D;
+    --wider-colour-19-hover: #C2E3D7;
+    --wider-colour-20-hover: #F2D28A;
+    --wider-colour-21-hover: #8FD0E6;
+    --wider-colour-22-hover: #F0A68B;
+    --wider-colour-23-hover: #B9D1CE;
+    /* #endregion */
+    /* #region Wider colours active */
+    --wider-colour-1-active: #D6D6D6;
+    --wider-colour-2-active: #D4C2DD;
+    --wider-colour-3-active: #ABD1DF;
+    --wider-colour-4-active: #95C6B3;
+    --wider-colour-5-active: #E1BBC4;
+    --wider-colour-6-active: #9EB8DA;
+    --wider-colour-7-active: #E6BDA2;
+    --wider-colour-8-active: #B9D8DA;
+    --wider-colour-9-active: #E69AAF;
+    --wider-colour-10-active: #C6D3DA;
+    --wider-colour-11-active: #D6A9A1;
+    --wider-colour-12-active: #D8AAE6;
+    --wider-colour-13-active: #E6DFBA;
+    --wider-colour-14-active: #83CCC9;
+    --wider-colour-15-active: #F4E0DE;
+    --wider-colour-16-active: #7DB095;
+    --wider-colour-17-active: #FEF0A6;
+    --wider-colour-18-active: #E6AA90;
+    --wider-colour-19-active: #CBEFE1;
+    --wider-colour-20-active: #E6C782;
+    --wider-colour-21-active: #88C5DA;
+    --wider-colour-22-active: #E69E83;
+    --wider-colour-23-active: #AFC6C3;
+    /* #endregion */
+
 
     // Extra vars needed
     --content-max-width: #{$content-max-width};
-    --colour-brand: var(--colour-primary);
 
     // Cards variables
     --card-top-padding: 2rem;
@@ -97,64 +235,82 @@ $darkMode: 'true' !default;
     }
   }
 
-  // Dark mode; functional colours get updated
-  @media screen and (prefers-color-scheme: light) {
-    :root {
-      --theme: light;
-      --body-theme: light;
-    }
+  .light-theme{
+    color-scheme: light;
+  }
+  .dark-theme{
+    color-scheme: dark;
   }
-  @media screen and (prefers-color-scheme: dark) {
-    :root {
-      --theme: dark;
-      --body-theme: dark;
+
+
+  // On any background colour we change the default text colour to our primary colour to stand out more
+  [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.invert-colours):not(iam-header):not(iam-notification):not(.bg-primary, .bg-danger, .bg-dark) {
+    
+    --colour-heading: var(--colour-primary-theme);
+    --colour-body: var(--colour-primary-theme);
+    color: var(--colour-primary-theme);
+    
+    > * {
+      
+      color-scheme: light;
     }
   }
 
 
   :is(.bg-primary, .bg-danger, .bg-dark) {
-    --theme: dark;
+
+    --colour-heading: var(--colour-white);
+    --colour-body: var(--colour-white);
+    color: var(--colour-white);
 
     > * {
-      color: var(--colour-heading);
+      
+      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
+  .dark-theme :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
 
-  @container style(--theme: dark) {
-    * > *,
-    [class*='bg-'] {
-      @each $color, $value in $dark-mode-colors {
-        --colour-#{$color}: #{$value};
-      }
-      @each $color, $value in $dark-mode-functional-colors {
-        --colour-#{$color}: #{$value};
-      }
+    --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;
     }
   }
 
-  @container style(--body-theme: dark) {
-
+  .dark-theme .bg-light {
+    color-scheme: light;
+  }
+  
+  @media (prefers-color-scheme: dark) {
+    html:not(.light-theme) :is(.bg-primary, .bg-danger, .bg-dark):not(iam-header) {
 
-    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.ds-header):not(iam-header) {
-      --theme: light;
+      --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: var(--colour-heading);
+        color-scheme: light;
       }
-    }    
+    }
 
-  }
+    html:not(.light-theme) .bg-light {
 
+      color-scheme: light;
+    }
+  }
+  // #endregion
 
-  @container style(--theme: light) {
-    * > * {
-      @each $color, $value in $theme-colors {
-        --colour-#{$color}: #{$value};
-      }
-      @each $color, $value in $non-theme-colors {
-        --colour-#{$color}: #{$value};
-      }
+  .invert-colours {
+    > * {
+      color-scheme: dark;
+      color: var(--colour-white);
     }
   }
 

package/assets/sass/templates/auth.scss

@@ -60,10 +60,6 @@ $darkMode: 'true' !default;
         overflow: hidden;
       }
 
-      @include light-mode($darkMode) {
-        background-color: #e9f9fd;
-      }
-
       > figure {
         position: relative;
         display: block;

package/assets/sass/templates/form.scss

@@ -9,9 +9,7 @@ $darkMode: 'true' !default;
 
 @include layer('templates', $layers) {
   body:has(.template--form) {
-    @include light-mode($darkMode) {
-      background-color: #e9f9fd;
-    }
+    background-color: #e9f9fd;
   }
 
   .template--form {
@@ -42,9 +40,8 @@ $darkMode: 'true' !default;
       max-width: var(--content-max-width);
     }
 
-    @include light-mode($darkMode) {
-      background-color: #e9f9fd;
-    }
+    background-color: #e9f9fd;
+    
 
     .form-panel {
       display: block;

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 = () => {
+      
+      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 = () => {
+
+      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/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

@@ -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>` : ''}
@@ -1731,6 +1731,7 @@ class iamSTDAddressLookup extends HTMLElement {
       addressComponent.dispatchEvent(updateEvent);
 
       languageToggle.focus();
+
     });
 
 
@@ -1753,6 +1754,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/components/tabs/tabs.component.ts

@@ -23,10 +23,6 @@ class iamTabs extends HTMLElement {
     <style>
     
     ${loadCSS}
-
-    :host(.admin-panel){
-      display: contents!important;
-    }
     
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>