@iamproperty/components 7.5.1--beta5 → 7.5.1--beta7

package/assets/sass/components/multi-step-modal.global.scss

@@ -0,0 +1,92 @@
+@use '../_func.scss' as *;
+
+// #region Multi step modal
+@layer components {
+  iam-multi-step-modal {
+    
+
+    :is(.h1, .h2, .h3, .h4, .h5, .h6) {
+      padding-right: calc(var(--dialog-padding) * 3);
+      padding-bottom: var(--dialog-padding);
+    }
+
+    form {
+      overflow: auto;
+      padding-bottom: var(--dialog-padding);
+        padding-top: var(--dialog-padding);
+      max-height: calc(min(90vh, 47rem) - 6rem);
+    }
+
+    fieldset {
+      > :last-child {
+        margin-bottom: var(--dialog-padding) !important;
+      }
+
+      > p:last-child {
+        padding-bottom: 0 !important;
+        margin-bottom: var(--dialog-padding) !important;
+      }
+    }
+
+    fieldset:not(.active) {
+      display: none;
+    }
+
+    @include media-breakpoint-up(sm, $mobileOnly) {
+
+
+      .btn--wrapper {
+        margin-top: auto;
+        text-align: right;
+      }
+
+      form {
+        height: calc(100vh - 6rem);
+        padding-left: 0 !important;
+        padding-right: var(--dialog-padding) !important;
+      }
+    }
+
+    @include media-breakpoint-up(md, $mobileOnly) {
+
+      form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      fieldset {
+
+        &.active {
+          
+          display: flex;
+        }
+        flex-direction: column;
+        flex-grow: 1;
+        position: relative;
+
+        overflow: auto;
+        margin-bottom: calc(var(--dialog-padding) * -1);
+        padding-right: calc(var(--dialog-padding) - 10px);
+        margin-right: calc((var(--dialog-padding) * -1) + 10px);
+
+        max-height: rem(370);
+
+        &::before {
+          content: '';
+          top: 100%;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: var(--dialog-padding);
+          min-height: var(--dialog-padding);
+          position: sticky;
+          display: block;
+          background: linear-gradient(180deg, transparent 0%, var(--colour-canvas-2) 100%);
+          z-index: 2;
+          margin-bottom: calc(var(--dialog-padding) * -1);
+        }
+      }
+    }
+  }
+}
+  // #endregion

package/assets/sass/components/multiselect.scss

@@ -3,6 +3,8 @@
 
 @use '../elements/forms.scss' as *;
 @use '../elements/admin-panel.scss' as *;
+@use '../elements/buttons.scss' as *;
+@use '../elements/buttons--action.scss' as *;
 
 
 *, *::before, *::after {
@@ -124,10 +126,8 @@ label {
 
 button {
   position: absolute;
-  top: 0.75rem;
   right: 0.5rem;
   border: none;
-  background: none;
   padding-inline: 0.5rem;
   display: var(--display-button, none);
 

package/assets/sass/components/password.component.scss

@@ -0,0 +1,60 @@
+@use '../func' as *;
+@use '../elements/prefix.scss' as *;
+
+$icon-error: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-8.8 0-16 7.2-16 16V272c0 8.8 7.2 16 16 16s16-7.2 16-16V144c0-8.8-7.2-16-16-16zm24 224a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z' fill='#dc3545'/></svg>");
+
+$icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z' fill='#0f9d58' /></svg>");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.wrapper {
+  display: flex;
+      margin-top: 0.5rem;
+}
+
+:host {
+  display: block;
+}
+
+::slotted(input) {
+  margin: 0!important;
+
+  border-start-end-radius: 0!important;
+  border-end-end-radius: 0!important;
+}
+
+// Password checker
+.invalid-feedback {
+  color: var(--colour-danger);
+  margin-top: rem(8);
+  background-image: escape-svg($icon-error);
+  background-repeat: no-repeat;
+  background-position: left top 1px;
+  background-size: var(--input-fs, #{rem(16)}) var(--input-fs, #{rem(16)});
+  padding-left: calc(var(--input-fs, #{rem(16)}) + #{rem(8)});
+  //display: none;
+}
+
+.pwd-checker {
+  display: block;
+  background-repeat: no-repeat !important;
+  background-position: left center;
+  background-size: 1em 1em;
+  padding-left: 1.5rem !important;
+  margin-top: 0.5rem;
+}
+.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

package/assets/sass/components/tabs.config.scss

@@ -142,7 +142,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       height: 3px;
       width: 100%;
       transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
-      background: var(--colour-tab-underline);
+      background: var(--colour-tab-underline, var(--colour-info));
       transition: transform 0.4s;
     }
 
@@ -155,7 +155,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     }
 
     &:not(.disabled) {
-      &:is([aria-pressed='true'], :active, .current):after {
+      &:is([aria-pressed='true'], :active, .current, .active):after {
         transform: translate(-50%, 0) scale(1, 1);
       }
     }

package/assets/sass/elements/badge-tag.scss

@@ -74,7 +74,6 @@ $darkMode: 'true' !default;
     }
   }
 
-  .tag.tag--not-set,
   iam-multiselect:not(:defined) .tag,
   .tag.tag--toggle {
     background: var(--colour-canvas);

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