@iamproperty/components 7.5.1--beta6 → 7.5.1--beta8

package/assets/sass/elements/details.scss

@@ -127,7 +127,7 @@ $darkMode: 'true' !default;
     &[open] summary :is(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6, .label) {
       &:after {
         content: '\f056';
-        font-weight: 900;
+        font-weight: 400;
       }
     }
 
@@ -147,7 +147,7 @@ $darkMode: 'true' !default;
       font-size: rem(18);
       line-height: var(--line-height);
       padding-bottom: map.get($heading-sizes, 'h3_pb');
-      font-weight: 700;
+      font-weight: 500;
       max-width: 100%;
 
       &:after {
@@ -165,15 +165,13 @@ $darkMode: 'true' !default;
         font-family: 'Font Awesome 6 Pro';
       }
 
-      @include media-breakpoint-up(sm, $mobileOnly) {
-        font-weight: 900;
-      }
+
     }
 
     &[open] summary:not(:has(h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6)) {
       &:after {
         content: '\f056';
-        font-weight: 900;
+        
       }
     }
   }
@@ -182,6 +180,7 @@ $darkMode: 'true' !default;
     --inline-padding: var(--dialog-padding);
 
     margin-inline: calc(var(--dialog-padding) * -1);
+    padding-inline: var(--dialog-padding);
     width: calc(100% + var(--dialog-padding) + var(--dialog-padding));
 
     &:has(summary:is(:hover, :focus-visible)),
@@ -190,6 +189,13 @@ $darkMode: 'true' !default;
       overflow: hidden;
     }
 
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --dialog-padding: #{rem(32)};
+      
+    margin-inline: calc(var(--dialog-padding) * -1);
+    padding-inline: var(--dialog-padding);
+    }
+
     // Fix the border bottom issue
     &:has(+ details[open]),
     &:has(summary:is(:hover, :focus-visible)),
@@ -213,7 +219,6 @@ $darkMode: 'true' !default;
       --inline-padding: 0;
     }
 
-    padding-inline: var(--dialog-padding);
 
     &::before {
       content: '';

package/assets/sass/elements/dialog.scss

@@ -5,7 +5,7 @@ $layers: 'true' !default;
 $mobileOnly: 'false' !default;
 $darkMode: 'true' !default;
 
-@include layer('elements', $layers) {
+@layer elements {
   // non-js fallback
   body:not(.js-enabled) dialog:not([open]):target {
     display: block;
@@ -26,19 +26,60 @@ $darkMode: 'true' !default;
     border-radius: rem(10);
     padding: var(--dialog-padding);
     outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    > :is(p):last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(4px);
+    overscroll-behavior: contain;
   }
 
   dialog[open] {
     display: flex;
     flex-direction: column;
+  }
 
-    > *:last-child {
-      margin-bottom: 0;
+  // TODO: when the old modals are depreciated this selector can be simplified
+  *:not(.dialog__wrapper) > dialog[open]:not([popover]) {
+
+    overflow-y: auto;
+    width: 90vw;
+    max-width: rem(324); // col-width*4
+
+    //height: 90vh;
+    max-height: min(90vh, #{rem(752)});
+    overscroll-behavior: contain;
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      --dialog-padding: #{rem(32)};
+      padding: var(--dialog-padding);
+      min-width: rem(335);
+      width: fit-content;
+      max-width: rem(686);
     }
 
-    > :is(p):last-child {
-      padding-bottom: 0;
+    @include media-breakpoint-up(md, $mobileOnly) {
+      min-width: rem(454);
+      width: fit-content;
+      max-width: rem(736);
     }
+
   }
   // #endregion
+
+
+  details.bg-light {
+    margin-inline: calc(var(--dialog-padding) * -1);
+    padding-inline: var(--dialog-padding);
+  }
+
 }
+

package/assets/sass/elements/forms.scss

@@ -164,6 +164,16 @@ $optionalText: 'true' !default;
     padding: 0;
   }
 
+  ::-moz-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
+  ::-webkit-color-swatch {
+    border-radius: 0;
+    border: none;
+  }
+
   // 1. Inherit font family and line height for file input buttons
   // 2. Correct the inability to style clickable types in iOS and Safari.
 
@@ -279,6 +289,12 @@ $optionalText: 'true' !default;
     }
   }
 
+  input[type='color'] {
+
+    padding: 0!important;
+    max-width: 3rem!important;
+  }
+  
   [disabled] :is(
     input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']),
     textarea,
@@ -369,60 +385,21 @@ $optionalText: 'true' !default;
     }
   }
 
-  // #region colors
-
-  input[type='color'] {
-    width: 3rem !important;
-    flex-shrink: 0 !important;
-    flex-grow: 0 !important;
-    border-start-end-radius: 0 !important;
-    border-end-end-radius: 0 !important;
-    padding: 0 !important;
-    overflow: hidden;
-    cursor: pointer !important;
-
-    &::-moz-color-swatch {
-      border-radius: 0;
-      border: none;
-    }
-
-    &::-webkit-color-swatch {
-      border-radius: 0;
-      border: none;
-    }
-  }
-
-  label :is(div, span, fieldset):has(input[type='color'] + output) {
-    display: flex;
-  }
-
-  input[type='color'] + output {
-    border-left: none !important;
-    border-end-start-radius: 0 !important;
-    border-start-start-radius: 0 !important;
-    margin: 0 !important;
-  }
-
-  output {
-    margin-top: 0.5rem !important;
-    margin-bottom: 0 !important;
-  }
-  // #endregion
 
-  div:has(> :is(.form-control-sm, .input--sm)) {
+  *:has(> :is(.form-control-sm, .input--sm)) {
     --input-fs: #{rem(14)};
     --input-lh: #{rem(16)};
     --input-padding-block: #{rem(10)};
     --input-padding-inline: #{rem(14)};
   }
-  div:has(> :is(.form-control-lg, .input--sm)) {
+  *:has(> :is(.form-control-lg, .input--lg)) {
     --input-fs: #{rem(24)};
     --input-lh: #{rem(29)};
     --input-padding-block: #{rem(20)};
     --input-padding-inline: #{rem(22)};
   }
 
-  div:has(> label:first-child):has(> input):has(> :is(.form-control-inline, .input--inline)) {
+  *:has(> label:first-child):has(> input):has(> :is(.form-control-inline, .input--inline)) {
     label {
       flex-shrink: 0;
       white-space: nowrap;
@@ -456,119 +433,10 @@ $optionalText: 'true' !default;
   // #endregion
 
   // #region prefix
-  :is(.prefix, .suffix) {
-    display: none;
-  }
-  
-  :not(button):is(.prefix, .suffix) {
-    pointer-events: none;
-  }
   
   @supports selector(:has(*)) {
-    :is(.prefix, .suffix) {
-      display: inline-block;
-      width: auto;
-      padding: var(--input-padding-block, #{rem(12)}) var(--input-padding-block, #{rem(16)});
-      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-top: 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;
-
-      min-height: calc(
-        var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-          4px
-      );
-      max-height: calc(
-        var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + var(--input-lh, #{rem(20)}) +
-          4px
-      );
-      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;
-    }
+    
+    
 
     .suffix
       ~ :is(
@@ -680,26 +548,6 @@ $optionalText: 'true' !default;
     --error-hide: none;
   }
 
-  // Password checker
-  .pwd-checker {
-    display: block;
-    background-repeat: no-repeat !important;
-    background-position: left center;
-    background-size: 1em 1em;
-    padding-left: 1.5rem !important;
-  }
-  .pwd-checker.invalid-feedback {
-    background-image: escape-svg($icon-error);
-  }
-
-  .pwd-checker:not(.invalid-feedback) {
-    background-image: escape-svg($icon-tick) !important;
-  }
-  label:has(.pwd-checker.invalid-feedback):after {
-    display: none !important;
-  }
-  // #endregion
-
   // #region radio/checkbox field
   @supports selector(:has(*)) {
     input:is([type='radio'], [type='checkbox']) {
@@ -827,6 +675,15 @@ $optionalText: 'true' !default;
       }
     }
 
+    fieldset:has(label > input:is([type="radio"],[type="checkbox"])){
+
+      label {
+        margin-bottom: 0!important;
+      }
+
+      margin-bottom: 1.5rem;
+    }
+
     input:is([type='radio'], [type='checkbox']):checked + label,
     label:not(.tag):has(input:is([type='radio'], [type='checkbox']):checked) {
       --tick-colour: var(--colour-info);
@@ -1145,7 +1002,8 @@ $optionalText: 'true' !default;
     }
 
     :is(input, select) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)),
-    span:has(> :is(input, select)) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)) {
+    span:has(> :is(input, select)) ~ span:not(:is(.suffix, .prefix, .invalid-feedback)),
+    .hint-text {
       all: initial;
       font-family: var(--font-body);
       color: var(--colour-body);
@@ -1298,25 +1156,31 @@ $optionalText: 'true' !default;
   // #endregion
 
   // #region Date and time fields
-  :is(input[type='date'], input[type='time']) {
+  :is(input[type='date'],input[type='datetime-local'],input[type='year'],input[type='month'],input[type='week'], input[type='time']) {
     position: relative;
     margin-right: -3rem;
     padding-right: 3rem !important;
     background-position: right 4rem center;
     border-radius: 0.5rem !important;
   }
-  :is(input[type='date'], input[type='time'])::-webkit-calendar-picker-indicator {
+  ::-webkit-calendar-picker-indicator {
     background: transparent;
     bottom: 0;
     color: transparent;
     cursor: pointer;
     height: auto;
-    left: 4em;
+    left: 0;
     position: absolute;
     right: 0;
     top: 0;
     width: auto;
     order: 3;
+    z-index: 98;
+  }
+  ::-webkit-datetime-edit {
+    position: relative;
+    z-index: 99;
+    max-width: fit-content;
   }
   // #endregion
 }

package/assets/sass/elements/hr.scss

@@ -27,7 +27,7 @@ $darkMode: 'true' !default;
     }
   }
 
-  hr:not(.border-0) {
+  hr[class*="border-"] {
     border-bottom:  var(--border-width) var(--border-style) var(--border-color);
   }
 

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');
       }
     });