@iamproperty/components 7.4.0 → 7.5.0

package/assets/sass/foundations/root.scss

@@ -95,78 +95,68 @@ $darkMode: 'true' !default;
     }
   }
 
-  .reset-colours {
-    @each $color, $value in $theme-colors {
-      --colour-#{$color}: #{$value};
+  // Dark mode; functional colours get updated
+  @media screen and (prefers-color-scheme: light) {
+    :root {
+      --theme: light;
+      --body-theme: light;
+    }
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    :root {
+      --theme: dark;
+      --body-theme: dark;
     }
-    @include reset-colours();
   }
 
-  // Dark mode; functional colours get updated
-  @include dark-mode($darkMode) {
-    #{$root} {
-      @each $color, $value in $dark-mode-colors {
-        --colour-#{$color}: #{$value};
-      }
-      @include invert-colours();
+
+  :is(.bg-primary, .bg-danger, .bg-dark) {
+    --theme: dark;
+
+    > * {
+      color: var(--colour-heading);
     }
   }
 
-  @include light-mode($darkMode) {
-    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-    html:not(.dark-theme)
-      [class*='bg-']:not(.bg-primary):not(.bg-dark):not(.bg-danger):not(.bg-white):not(.bg-admin):not(.bg-canvas):not(
-        .bg-canvas-2
-      ):not(.invert-colours) {
-      @each $color, $value in $theme-colors {
+
+  @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};
       }
-      @include reset-colours();
-      --colour-body: rgb(89, 89, 89);
-      color: var(--colour-body);
     }
+  }
 
-    // Override the colours when on a dark background, similiar to dark mode but on a module level
-    [class*='bg-']:not(.bg-info):not(.bg-success):not(.bg-light):not(.bg-warning):not(.bg-white):not(.bg-admin):not(
-        .bg-canvas
-      ):not(.bg-canvas-2):not(.prevent-invert),
-    .invert-colours {
-      @include invert-colours();
+  @container style(--body-theme: dark) {
 
-      color: #{$colour-inverted};
-    }
-  }
 
-  @include dark-mode($darkMode) {
-    // Reset the colours of lighter backgrounds to make sure they aren't over written by dark mode. Some other tweaks to colours are applied
-    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light) {
-      @include reset-colours();
-      --colour-body: #{$primary};
-      color: var(--colour-body);
-    }
+    [class*='bg-']:not(.bg-canvas):not(.bg-canvas-2):not(.bg-light):not(.ds-header):not(iam-header) {
+      --theme: light;
 
-    @each $color, $value in $theme-colors {
-      .bg-#{$color}[class*='gradient-'] {
-        background-color: var(--colour-#{$color}-theme) !important;
+      > * {
+        color: var(--colour-heading);
       }
-    }
+    }    
+
+  }
 
-    [class*='bg-'][class*='gradient-']:not(.bg-primary):not(.bg-dark):not(.bg-danger) {
+
+  @container style(--theme: light) {
+    * > * {
       @each $color, $value in $theme-colors {
         --colour-#{$color}: #{$value};
       }
-      @include reset-colours();
-      --colour-body: var(--colour-primary-theme);
-      color: var(--colour-body);
-    }
-
-    [class*='bg-'][class*='gradient-']:not(.bg-info):not(.bg-success):not(.bg-warning):not(.prevent-invert) {
-      @include invert-colours();
-
-      color: #{$colour-inverted};
+      @each $color, $value in $non-theme-colors {
+        --colour-#{$color}: #{$value};
+      }
     }
   }
 
+
   @media (forced-colors: active) {
     #{$root} {
       --contrast-outline-width: 1px;

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

@@ -1,14 +1,6 @@
-// Data layer Web component created
-declare global {
-  interface Window {
-    dataLayer: Array<object>;
-  }
-}
-window.dataLayer = window.dataLayer || [];
-window.dataLayer.push({
-  event: 'customElementRegistered',
-  element: 'accordion',
-});
+import { trackComponent, trackComponentRegistered } from '../_global';
+
+trackComponentRegistered('iam-accordion');
 
 class iamAccordion extends HTMLElement {
   constructor() {
@@ -23,29 +15,34 @@ class iamAccordion extends HTMLElement {
       : `${assetLocation}/css/core.min.css`;
 
     const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    @import "${coreCSS}";
+    template.innerHTML = /* HTML */ `
+      <style>
+        @import '${coreCSS}';
 
-    :host {
-      margin-bottom: 2.5rem;
-      display: block;
-    }
-    
-    ::slotted(details) {
-      --border-radius: 0!important;
-      padding-bottom: 0!important;
-    }    
-    </style>
+        :host {
+          margin-bottom: 2.5rem;
+          display: block;
+        }
+
+        ::slotted(details) {
+          --border-radius: 0 !important;
+          padding-bottom: 0 !important;
+        }
+      </style>
       <slot></slot>
     `;
     this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
   connectedCallback(): void {
-    if (!this.classList.contains('accordion--keep-open')) {
-      const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const accordionComponent = this;
+
+    trackComponent(accordionComponent, 'iam-accordion', ['accordion-item-closed', 'accordion-item-opened']);
+
+    const details: NodeListOf<HTMLElement> = this.querySelectorAll(':scope > details');
 
+    if (!this.classList.contains('accordion--keep-open')) {
       // Add the toggle listeners.
       details.forEach((targetDetail) => {
         targetDetail.addEventListener('toggle', () => {
@@ -58,6 +55,30 @@ class iamAccordion extends HTMLElement {
         });
       });
     }
+
+    // Fire tracking events
+    details.forEach((targetDetail) => {
+      const summaryEle = targetDetail.querySelector('summary');
+      const summaryText = summaryEle?.innerText;
+
+      targetDetail.addEventListener('toggle', () => {
+        if (targetDetail?.hasAttribute('open')) {
+          itemInteractionEvent('accordion-item-opened', summaryText);
+        } else {
+          itemInteractionEvent('accordion-item-closed', summaryText);
+        }
+      });
+    });
+
+    const itemInteractionEvent = function (eventName: string, itemSummary: string): void {
+      const customEvent = new CustomEvent(eventName, {
+        detail: {
+          title: itemSummary,
+        },
+      });
+
+      accordionComponent.dispatchEvent(customEvent);
+    };
   }
 }
 

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

@@ -102,6 +102,7 @@ class iamActionbar extends HTMLElement {
           <label for="search" class="visually-hidden">Input field label</label>
           <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
           <input type="text" id="search" name="search" required="" part="search-input">
+          <button class="empty btn btn-action"><i class="fa-light fa-times me-0" aria-hidden="true"></i></button>
         </div>
 
       </div>
@@ -277,6 +278,15 @@ class iamActionbar extends HTMLElement {
         this.dispatchEvent(submitEvent);
       }
     });
+
+    const clearBtn = searchBar.querySelector('.empty');
+    const searchInput = searchBar.querySelector('#search');
+
+    clearBtn.addEventListener('click', function (e) {
+      searchInput.removeAttribute('placeholder');
+      searchInput.removeAttribute('data-value');
+      searchInput.value = '';
+    });
     // #endregion
 
     // #region Reponsive safe area

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

@@ -28,10 +28,8 @@ class iamAddressLookup extends HTMLElement {
     const template = document.createElement('template');
     template.innerHTML = `
     <style>
-    @import "${coreCSS}";
     ${loadCSS}
     
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <div class="wrapper">
@@ -40,25 +38,25 @@ class iamAddressLookup extends HTMLElement {
         <div>
         <label class="mb-2">Search <span class="title text-lowercase"></span> <span class="optional">(Optional)</span>
           <span>
-          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" />
-          <span class="suffix fa-regular fa-search"></span>
+          <input type="text" name="postcode" list="address-lookup__addressess" autocomplete="off" aria-autocomplete="none" placeholder="Postcode" part="input" />
+          <span class="suffix fa-regular fa-search" part="suffix"></span>
           </span>
           <span class="invalid-feedback">Required Adddress fields missing</span>
         </label>
 
         </div>
-        <button class="btn btn-tertiary switch-to-manual-btn" type="button">Or enter address manually</button>
+        <button class="btn btn-tertiary switch-to-manual-btn" type="button" part="button">Or enter address manually</button>
       </div>
       <datalist id="address-lookup__addressess"></datalist>
 
       <div class="manual-address pb-2 js-hide">
-        <slot></slot>
-        <button class="btn btn-tertiary switch-to-lookup-btn" type="button">Use postcode lookup</button>
+        <slot part="contents"></slot>
+        <button class="btn btn-tertiary switch-to-lookup-btn" type="button" part="button">Use postcode lookup</button>
         <slot name="after"></slot>
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
-        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button"><i class="fa-regular fa-pen-to-square"></i><span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
+        <p><span class="pre-filled-address"></span><button class="text-primary text-decoration-none ms-1 cursor-pointer" type="button" part="edit-button"><i class="fa-regular fa-pen-to-square"></i> <span class="visually-hidden">Edit</span></button><slot name="prefilled"></slot></p>
       </div>
     </div>
     `;