@iamproperty/components 7.4.0 → 7.5.1--beta1

package/assets/sass/elements/forms.scss

@@ -283,7 +283,6 @@ $optionalText: 'true' !default;
     }
 
     &:is(:focus, .focus):not(:disabled):not(:invalid) {
-      
       box-shadow: 0 0 0 0.1rem rgba(30, 190, 230, 0.25);
     }
     // Add some height to date inputs on iOS
@@ -573,36 +572,30 @@ $optionalText: 'true' !default;
 
     .suffix
       ~ :is(
-        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not([type='time']),
+        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+            [type='time']
+          ),
         textarea,
         output
       ),
     :is(
-        input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not([type='time']),
-        textarea,
-        output
-      ):has(~ .suffix) {
+      input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='date']):not(
+          [type='time']
+        ),
+      textarea,
+      output
+    ):has(~ .suffix) {
       order: 1;
 
       border-start-end-radius: 0 !important;
       border-end-end-radius: 0 !important;
     }
-  }
-
-  // #endregion
-
-  // #region word counter
-
-  :is(input, textarea)[maxlength] + span {
-    position: relative;
 
-    &:before {
-      counter-reset: variable var(--char-count) var(--maxlength);
-      counter-reset: variable2 var(--maxlength);
-      content: attr(data-count) ' / ' counter(variable2);
-      float: right;
-
-      margin: 0 0 1em 1em;
+    :is(
+        input
+      ):has(~ iam-password-indicator) {
+      border-start-end-radius: 0 !important;
+      border-end-end-radius: 0 !important;
     }
   }
 
@@ -1016,7 +1009,7 @@ $optionalText: 'true' !default;
 
   // #region Select
 
-  select:not(.btn) {
+  select:not(.select--minimal, .btn) {
     $form-select-indicator-new: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/></svg>") !default;
 
     background:
@@ -1340,20 +1333,19 @@ $optionalText: 'true' !default;
   }
 
   .empty {
-
     position: absolute;
     bottom: 0.5rem;
     right: 3.5rem;
     margin: 0;
     aspect-ratio: 1 / 1;
-    
+
     width: 2rem;
     height: 2rem;
-    
+
     text-align: center;
     line-height: 1;
 
-    &:not(:hover,:focus){
+    &:not(:hover, :focus) {
       border-color: transparent;
       background-color: transparent;
     }
@@ -1370,14 +1362,16 @@ $optionalText: 'true' !default;
   }
 }
 
-.was-validated :is(iam-advanced-select, iam-search) label:has(:is(input:not([type=radio]):not([type=checkbox]), select)){
+.was-validated
+  :is(iam-advanced-select, iam-search)
+  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)) {
   margin-bottom: 2.5rem;
 
   input {
-    background: none!important;
+    background: none !important;
   }
 
-  &:has(:invalid, .is-invalid) .hint-text { 
+  &:has(:invalid, .is-invalid) .hint-text {
     display: none;
   }
 }
@@ -1428,12 +1422,10 @@ $optionalText: 'true' !default;
       background: rgba(224, 224, 224, 1) !important;
       border-radius: 0.25rem !important;
     }
-
   }
 }
 
 iam-advanced-select datalist {
-  
   option {
     &.active {
       border-left: 4px solid var(--colour-info) !important;

package/assets/sass/elements/hr.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('elements', $layers) {
+  
+  hr {
+    --border-style: solid;
+    --border-color: var(--colour-border);
+    border: 0;
+    color: transparent;
+    margin: 0;
+    border-bottom: none;
+    background-color: currentColor;
+    opacity: 1;
+    clear: both;
+
+    &:after {
+      display: table;
+      clear: both;
+      content: '';
+    }
+  }
+
+  hr:not(.border-0) {
+    border-bottom:  var(--border-width) var(--border-style) var(--border-color);
+  }
+
+  .hr--vertical {
+
+    height: calc(100% + 0.5rem);
+    margin-left: 0.5rem;
+    margin-right: 1rem;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+    background-color: var(--colour-muted);
+    width: 1px;
+  }
+
+  .btn-action + .hr--vertical {
+    height: 2.5rem;
+  }
+}

package/assets/sass/elements/icons.scss

@@ -28,4 +28,9 @@ $darkMode: 'true' !default;
   [class*='fa-']:not(.fa-regular, .fa-light, .fa-solid, .btn) {
     font-weight: 400;
   }
+
+  .rounded-circle[class*='fa-'][class*='bg-'] {
+    aspect-ratio: 1 / 1;
+    width: calc(1lh + 1rem);
+  }
 }

package/assets/sass/elements/links.scss

@@ -56,7 +56,7 @@ $darkMode: 'true' !default;
     line-height: rem(24);
     min-height: rem(24);
     position: relative;
-    font-weight: bold;
+    font-weight: 500;
 
     &:not(.text-decoration-none) {
       &:after {
@@ -314,7 +314,7 @@ iam-collapsible-side {
       li:first-of-type {
         a::before {
           content: '\f056';
-          font-weight: bold;
+          font-weight: 500;
         }
       }
 

package/assets/sass/elements/lists.scss

@@ -271,7 +271,7 @@ $darkMode: 'true' !default;
       background-color: var(--colour-success);
       border-color: var(--colour-success);
 
-      @include dark-mode($darkMode) {
+      @container style(--theme: dark) {
         background-color: var(--colour-complete);
         border-color: var(--colour-complete);
       }

package/assets/sass/elements/modal.scss

@@ -146,7 +146,7 @@ $darkMode: 'true' !default;
   *:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
     text-align: center;
 
-    &:before {
+    &:not(.hide-icon):before {
       content: '\f05a';
       font-weight: 300;
       -moz-osx-font-smoothing: grayscale;
@@ -214,10 +214,6 @@ $darkMode: 'true' !default;
       }
     }
 
-    form > :is(button, a) {
-      margin-bottom: 0;
-    }
-
     @include media-breakpoint-up(sm, $mobileOnly) {
       :is(button, .btn):has(~ :is(button, .btn):last-child),
       :is(button, .btn):last-child {

package/assets/sass/elements/toggle-button.scss

@@ -9,6 +9,7 @@ $darkMode: 'true' !default;
   .toggle {
     --outline-width: 0.25rem !important;
     padding-left: 3.25rem !important;
+    max-width: fit-content !important;
   }
 
   .toggle:before {

package/assets/sass/elements/type.scss

@@ -21,7 +21,7 @@ $darkMode: 'true' !default;
     margin-bottom: 0;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
-    font-weight: bold;
+    font-weight: 500;
 
     line-height: round(calc(1em * var(--type-scale)), 0.25rem);
     padding-bottom: round(calc(1em * var(--type-scale)), 0.25rem);
@@ -40,12 +40,12 @@ $darkMode: 'true' !default;
 
   :is(.h1, h1) {
     font-size: map.get($heading-sizes, 'h1_fs');
-    font-weight: 900;
+    font-weight: 700;
   }
 
   :is(h2, .h2) {
     font-size: map.get($heading-sizes, 'h2_fs');
-    font-weight: 900;
+    font-weight: 500;
   }
 
   :is(h3, .h3) {
@@ -83,7 +83,7 @@ $darkMode: 'true' !default;
     line-height: rem(map.get($heading-sizes, 'lead_lh'));
     padding-bottom: rem(map.get($heading-sizes, 'lead_pb'));
     max-width: var(--content-max-width);
-    font-weight: 700;
+    font-weight: 500;
   }
 
   small,
@@ -117,7 +117,7 @@ $darkMode: 'true' !default;
   }
 
   strong {
-    font-weight: bolder;
+    font-weight: 500;
     font-family: var(--font-heading);
     color: var(--colour-heading);
   }
@@ -130,9 +130,6 @@ $darkMode: 'true' !default;
     line-height: inherit;
   }
 
-  blockquote {
-  }
-
   blockquote {
     margin: 0;
     quotes: '“' '”' '‘' '’';
@@ -156,7 +153,7 @@ $darkMode: 'true' !default;
       font-size: rem(18);
       line-height: rem(32);
       padding-bottom: 0;
-      font-weight: bold;
+      font-weight: 500;
       font-style: normal;
     }
   }

package/assets/sass/foundations/reboot.scss

@@ -117,12 +117,19 @@ $darkMode: 'true' !default;
     color-scheme: light dark;
     @include var(background, --colour-canvas);
     @include var(font-family, --font-body);
-    @include var(color, --colour-body);
+
     width: 100%;
     line-height: 1.2;
     min-height: 100%;
     -webkit-text-size-adjust: 100%; // 3
     -webkit-tap-highlight-color: rgba($black, 0); // 4
+
+    @container style(--theme: dark) {
+      color: var(--colour-body);
+    }
+    @container style(--theme: light) {
+      color: var(--colour-body);
+    }
   }
 
   // #region scrollbars
@@ -165,23 +172,7 @@ $darkMode: 'true' !default;
     outline: 2px auto -webkit-focus-ring-color;
   }
 
-  hr {
-    --border-style: solid;
-    --border-color: var(--colour-border);
-    border: 0;
-    color: transparent;
-    margin: 0;
-    border-bottom: none;
-    background-color: currentColor;
-    opacity: 1;
-    clear: both;
-
-    &:after {
-      display: table;
-      clear: both;
-      content: '';
-    }
-  }
+
 
   [hidden] {
     display: none !important;
@@ -223,3 +214,8 @@ $darkMode: 'true' !default;
     width: 100%;
   }
 }
+
+
+#app {
+  display: contents;
+}

package/assets/sass/foundations/root.scss

@@ -86,87 +86,79 @@ $darkMode: 'true' !default;
 
       &:has(.nav--large) {
         --container-max-width: #{rem(1920)} !important;
+        --max-width: #{rem(1920)} !important;
         --padding-inline: #{rem(56)} !important;
         --container-padding-x-md: #{rem(56)} !important;
         --container-padding-md: var(--container-padding-top) var(--container-padding-x-md)
           var(--container-padding-bottom) var(--container-padding-x-md);
         --container-padding: var(--container-padding-md);
+        --gutter: 3.5rem;
       }
     }
   }
 
-  .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/sass/templates/form.scss

@@ -18,6 +18,11 @@ $darkMode: 'true' !default;
     --input-max-width: #{rem(450)};
     --select-max-width: #{rem(500)};
 
+    .container {
+
+      max-width: #{rem(1280)} !important;
+    }
+
     @supports selector(:has(*)) {
       label:has(> :is(.suffix, .prefix)) {
         --input-max-width: #{rem(500)};

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

@@ -1,51 +1,40 @@
-// 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() {
     super();
     this.attachShadow({ mode: 'open' });
 
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-    const coreCSS = document.body.hasAttribute('data-core-css')
-      ? document.body.getAttribute('data-core-css')
-      : `${assetLocation}/css/core.min.css`;
-
     const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    @import "${coreCSS}";
+    template.innerHTML = /* HTML */ `
+      <style>
 
-    :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 +47,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);
+    };
   }
 }