@iamproperty/components 7.6.0 → 7.6.2

package/assets/sass/_grid.scss

@@ -2,9 +2,14 @@
 @use 'sass:map';
 @use '_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+$columns: 12;
+$rows-per-page: 20;
+$grid-utility-count: 10;
+
+$breakpoints: (
+  sm: 36em,
+  /* 576 */ md: 62em /* 992 */,
+);
 
 // #region grid mixins
 @mixin grid-utilities($br: '') {
@@ -118,21 +123,16 @@ $darkMode: 'true' !default;
 }
 // #endregion
 
-@include layer('reset', $layers) {
+@layer reset {
   // #region Main grid setup
   body {
-    --excess-space: calc((100% - var(--max-width, #{$max-width})) / 2);
+    --excess-space: calc((100% - var(--max-width)) / 2);
     --col-size: calc(
       (
-          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter, #{$gutter}) - var(
-              --gutter,
-              #{$gutter}
-            ) -
-            (var(--gap, #{$gap}) * (#{$columns - 1}))
-        ) /
-        #{$columns}
+          100% - max(0%, var(--excess-space)) - max(0%, var(--excess-space)) - var(--gutter) - var(--gutter) - (var(--gap) * (#{$columns - 1}))
+        ) / #{$columns}
     );
-    column-gap: var(--gap, #{$gap});
+    column-gap: var(--gap);
     display: grid;
     margin-inline: 0;
     width: 100%;
@@ -146,20 +146,20 @@ $darkMode: 'true' !default;
       $templateColumns: $templateColumns + 'var(--col-size) [col-' + $i + '-end col-'+ ($i + 1)+'-start] ';
     }
     grid-template-columns:
-      [full-width-start container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      [full-width-start container-start] calc(var(--gutter) - var(--gap))
       [content-start col-1-start]
       #{$templateColumns}
-      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+      var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
       [container-end full-width-end];
 
-    @media screen and (min-width: #{em($max-width-px * $max-scale-up)}) {
+    @media screen and (min-width: #{em(1280 * 1.125)}) {
       grid-template-columns:
-        [full-width-start] calc(var(--excess-space) - var(--gap, #{$gap}))
-        [container-start] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
+        [full-width-start] calc(var(--excess-space) - var(--gap))
+        [container-start] calc(var(--gutter) - var(--gap))
         [content-start col-1-start]
         #{$templateColumns}
-        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter, #{$gutter}) - var(--gap, #{$gap}))
-        [container-end] calc(var(--excess-space) - var(--gap, #{$gap})) [full-width-end];
+        var(--col-size) [col-#{$columns}-end content-end] calc(var(--gutter) - var(--gap))
+        [container-end] calc(var(--excess-space) - var(--gap)) [full-width-end];
     }
 
     & * {
@@ -216,10 +216,12 @@ $darkMode: 'true' !default;
   }
 
   @include grid-utilities();
-  @each $br, $value in $breakpoints {
-    @include breakpoint($br) {
-      @include grid-utilities(#{$br + '-'});
-    }
+  
+  @media screen and (min-width: 36em) {
+    @include grid-utilities(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-utilities(#{'md-'});
   }
   // #endregion
 
@@ -248,10 +250,11 @@ $darkMode: 'true' !default;
   }
 
   @include grid-columns();
-  @each $br, $value in $breakpoints {
-    @include breakpoint($br) {
-      @include grid-columns(#{$br + '-'});
-    }
+  @media screen and (min-width: 36em) {
+    @include grid-columns(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-columns(#{'md-'});
   }
   // #endregion
 
@@ -261,10 +264,11 @@ $darkMode: 'true' !default;
   }
 
   @include grid-rows();
-  @each $br, $value in $breakpoints {
-    @include breakpoint($br) {
-      @include grid-rows(#{$br + '-'});
-    }
+  @media screen and (min-width: 36em) {
+    @include grid-rows(#{'sm-'});
+  }
+  @media screen and (min-width: 62em) {
+    @include grid-rows(#{'md-'});
   }
   // #endregion
 
@@ -281,17 +285,25 @@ $darkMode: 'true' !default;
       grid-column: auto / span #{math.floor($count)};
     }
   }
+  
+  @media screen and (min-width: 36em) {
+    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+      $count: math.div($columns, $i);
 
-  @each $br, $value in $breakpoints {
-    @include breakpoint($br) {
-      @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
-        $count: math.div($columns, $i);
+      .sm-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
+      }
+    }
+  }
+  @media screen and (min-width: 62em) {
+    @for $i from 1 to math.floor(math.div($columns, 2)) + 1 {
+      $count: math.div($columns, $i);
 
-        .#{$br}-cols-#{$i} > * {
-          grid-column: auto / span #{math.floor($count)};
-        }
+      .md-cols-#{$i} > * {
+        grid-column: auto / span #{math.floor($count)};
       }
     }
   }
+
   // #endregion
 }

package/assets/sass/_utilities.scss

@@ -1,53 +1,31 @@
 @use 'sass:math';
-@use 'sass:map';
-@use 'sass:meta';
 @use '_func' as *;
 
-$root: ':root' !default;
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
-
-@forward '_functions/variables_old' show $utilities;
-@use '_functions/bs_utilities' as *;
-
-@include layer('utilities', $layers) {
-  // Missing classes that exist as mixins
-  @include clearfix();
-  @include visually-hidden();
-  @include text-truncate();
-  @include ratio();
-  @include fixed();
-  @include sticky();
-  @include max-height();
-  @include js-display();
-  @include line-clamp();
-
-  // Loop over each breakpoint
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    // Generate media query if needed
-    @include media-breakpoint-up($breakpoint, $mobileOnly) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-      // Loop over each utility property
-      @each $key, $utility in $utilities {
-        // The utility can be disabled with `false`, thus check if the utility is a map first
-        // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
-          @include generate-utility($utility, $infix);
-        }
-      }
-    }
-  }
-
-  // Print utilities
-  @media print {
-    @each $key, $utility in $utilities {
-      // The utility can be disabled with `false`, thus check if the utility is a map first
-      // Then check if the utility needs print styles
-      @if meta.type-of($utility) == 'map' and map.get($utility, print) == true {
-        @include generate-utility($utility, '-print');
-      }
-    }
-  }
-}
+@use './utilities/clearfix.scss';
+@use './utilities/visually-hidden.scss';
+@use './utilities/text-truncate.scss';
+@use './utilities/ratio';
+@use './utilities/fixed';
+@use './utilities/sticky';
+@use './utilities/max-height';
+@use './utilities/js-display';
+@use './utilities/line-clamp';
+@use './utilities/align';
+@use './utilities/wider-colours';
+@use './utilities/opacity';
+@use './utilities/overflow';
+@use './utilities/display';
+@use './utilities/position';
+@use './utilities/border';
+@use './utilities/sizes';
+@use './utilities/flex';
+@use './utilities/order';
+@use './utilities/margins';
+@use './utilities/paddings';
+@use './utilities/gap';
+@use './utilities/text';
+@use './utilities/colours';
+@use './utilities/gradients';
+@use './utilities/pointer-events';
+@use './utilities/rounded';
+@use './utilities/visible';

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

@@ -6,9 +6,9 @@
 @use '../elements/dialog.scss' as *;
 @use '../elements/popover.scss' as *;
 
-@include margins();
-@include visually-hidden();
-@include display();
+@use '../utilities/margins.scss' as *;
+@use '../utilities/visually-hidden.scss' as *;
+@use '../utilities/display.scss' as *;
 
 :host {
   background-color: #fcfcfc;
@@ -28,30 +28,30 @@ slot[name='selectall'] {
   display: block;
   position: absolute !important;
   top: 50%;
-  left: rem(24);
+  left: 1.5rem;
   margin-left: 0;
   transform: translate(0, -50%);
   z-index: 10;
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
-    left: rem(32);
+  @media screen and (min-width: 36em) {
+    left: 2rem;
   }
 
   .btn-action:not(:last-child) {
-    margin-right: rem(4) !important;
+    margin-right: 0.25rem !important;
   }
 }
 
 .selectall,
 slot[name='selectall'] {
-  width: rem(40);
+  width: 2.5rem;
   overflow: hidden;
 
   label {
-    height: rem(40);
+    height: 2.5rem;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     width: auto;
     overflow: visible;
   }
@@ -63,13 +63,13 @@ slot[name='selectall'] {
 
 :host([data-search]) .actionbar [data-search] {
   display: block;
-  margin: 0 0 0 rem(16);
+  margin: 0 0 0 1rem;
 }
 
 :is(.actionbar, .actionbar--selected, .actionbar--search) {
   border-top-left-radius: var(--actionbar-radius, #{rem(10)});
   border-top-right-radius: var(--actionbar-radius, #{rem(10)});
-  padding: 0 rem(24);
+  padding: 0 1.5rem;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-items: center;
@@ -80,8 +80,8 @@ slot[name='selectall'] {
     position: absolute;
   }
 
-  @include container-up(sm) {
-    padding: 0 rem(32);
+  @media screen and (min-width: 36em) {
+    padding: 0 2rem;
   }
 }
 
@@ -93,10 +93,7 @@ slot[name='selectall'] {
   background-color: var(--colour-canvas);
   pointer-events: none;
   display: flex;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
+  background-color: #e6eaec;
 
   @supports selector(:has(*)) {
     opacity: 0;
@@ -111,10 +108,7 @@ slot[name='selectall'] {
   position: relative;
   opacity: 0;
   pointer-events: none;
-
-  @include light-mode($darkMode) {
-    background-color: #e6eaec;
-  }
+  background-color: #e6eaec;
 }
 
 // Show selected bar
@@ -156,7 +150,7 @@ slot[name='selectall'] {
 ::slotted(.btn) {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
-  margin-left: rem(16) !important;
+  margin-left: 1rem !important;
   margin-right: 0 !important;
   place-self: unset !important;
 }
@@ -184,13 +178,13 @@ slot[name='selectall'] {
 }
 
 ::slotted(hr) {
-  height: rem(32);
+  height: 2rem;
   color: #9d9d9d !important;
   width: 1px;
   display: none;
   margin-left: 1rem !important;
 
-  @include container-up(md) {
+  @media screen and (min-width: 62em) {
     display: block;
   }
 }
@@ -207,11 +201,11 @@ slot[name='selectall'] {
   overflow: visible;
   position: relative;
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     width: rem(450);
   }
 
-  @include container-up(md) {
+  @media screen and (min-width: 62em) {
     width: rem(750);
   }
 
@@ -223,11 +217,11 @@ slot[name='selectall'] {
 :host([data-large-safe-area]) .safe-area {
   width: rem(260);
 
-  @include container-up(sm) {
+  @media screen and (min-width: 36em) {
     width: rem(620);
   }
 
-  @include container-up(md) {
+  @media screen and (min-width: 62em) {
     width: rem(1048);
   }
 }
@@ -263,7 +257,7 @@ slot[name='selectall'] {
 // #region Search bar
 .actionbar--search .btn {
   margin: 0;
-  margin-left: rem(-12) !important;
+  margin-left: -0.75rem !important;
   margin-right: auto !important;
 }
 
@@ -272,24 +266,24 @@ slot[name='selectall'] {
   max-width: rem(350) !important;
   margin: 0 !important;
 
-  @include container-up(md) {
+  @media screen and (min-width: 62em) {
     max-width: rem(450) !important;
   }
 
   input {
-    padding-top: rem(8);
-    padding-bottom: rem(8);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 
-    min-height: rem(40) !important;
-    max-height: rem(40) !important;
+    min-height: 2.5rem !important;
+    max-height: 2.5rem !important;
   }
 
   :is(.prefix, .suffix) {
-    padding: rem(8) !important;
-    min-height: rem(40) !important;
-    max-height: rem(40) !important;
-    min-width: rem(40) !important;
-    max-width: rem(40) !important;
+    padding: 0.5rem !important;
+    min-height: 2.5rem !important;
+    max-height: 2.5rem !important;
+    min-width: 2.5rem !important;
+    max-width: 2.5rem !important;
     line-height: rem(40 - 8 - 8) !important;
     pointer-events: all !important;
   }
@@ -408,7 +402,7 @@ slot[name="filters"]{
   
   display: none;
   
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     display: contents;
   }
 }

package/assets/sass/components/actionbar.global.scss

@@ -1,6 +1,6 @@
 @use '../_func.scss' as *;
 
-$darkMode: 'true' !default;
+
 
 // #region Default view
 iam-actionbar {
@@ -10,7 +10,7 @@ iam-actionbar {
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
 
-  @container style(--theme: dark) {
+  @media (prefers-color-scheme: dark) {
     background-color: var(--colour-canvas);
   }
 }
@@ -18,7 +18,7 @@ iam-actionbar {
 
 // #region at the top
 main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
-  border-radius: rem(8);
+  border-radius: 0.5rem;
   margin: var(--container-padding);
   margin-bottom: 2rem;
   box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.2);
@@ -27,17 +27,17 @@ main > .actionbar__sticky-wrapper > .actionbar__sticky > iam-actionbar {
     padding-top: 0;
   }
 
-  @include light-mode($darkMode) {
+  @media (prefers-color-scheme: light) {
     background-color: #e6eaec;
   }
 
-  @include media-breakpoint-up(sm, $mobileOnly) {
+  @media screen and (min-width: 36em) {
     box-shadow: none;
     margin-inline: 0;
     border-radius: 0;
   }
 
-  @include media-breakpoint-up(md, $mobileOnly) {
+  @media screen and (min-width: 62em) {
     padding-inline: calc(50% - #{rem(556)} - 2rem);
   }
 }
@@ -62,8 +62,8 @@ iam-actionbar[data-view='small'] ~ [data-view='small'] {
 // #region Child elements
 iam-actionbar {
   .actionbar__text {
-    font-size: rem(18);
-    line-height: rem(40);
+    font-size: 1.125rem; /* 18/16 */
+    line-height: 2.5rem;
     color: var(--colour-heading);
     display: inline-block;
   }

package/assets/sass/components/address-lookup.component.scss

@@ -5,12 +5,7 @@
 @use '../elements/buttons.scss' as *;
 @use '../elements/links.scss' as *;
 
-
-
-@include layer('utilities', $layers) {
-
-  @include margins();
-}
+@use '../utilities/margins.scss' as *;
 
 .bg-light {
   background-color: var(--colour-light);
@@ -52,10 +47,10 @@ input[name='postcode'] {
 input[name='postcode'] {
   background-image: var(--error-bg, none)!important;
   background-repeat: no-repeat;
-  background-position: right var(--input-padding-inline, #{rem(16)}) center;
-  background-size: var(--input-lh, #{rem(20)}) var(--input-lh, #{rem(20)});
+  background-position: right var(--input-padding-inline, 1rem) center;
+  background-size: var(--input-lh, 1.25rem) var(--input-lh, 1.25rem);
   padding-right: calc(
-    var(--input-lh, #{rem(20)}) + var(--input-padding-inline, #{rem(16)}) + var(--input-padding-inline, #{rem(16)})
+    var(--input-lh, 1.25rem) + var(--input-padding-inline, 1rem) + var(--input-padding-inline, 1rem)
   ) !important;
 }
 

package/assets/sass/components/address-lookup.preload.scss

@@ -1,8 +1,8 @@
 @use '../_func' as *;
 
-$layers: 'true' !default;
-$mobileOnly: 'false' !default;
-$darkMode: 'true' !default;
+
+
+
 
 iam-std-address-lookup:not([data-allow-manual]) iam-address-lookup::part(manualButton){
   display: none;
@@ -79,3 +79,13 @@ iam-std-address-lookup.open-results iam-address-lookup::part(list-wrapper){
 iam-std-address-lookup.open-results iam-address-lookup [slot="preloadedList"]{
   display: block;
 }
+
+iam-address-lookup label[slot="actions"]:has([type="checkbox"]){
+  margin-bottom: 0;
+  padding-top: 0;
+
+  &:before,
+  &:after {
+    top: -0.2rem;
+  }
+}

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

@@ -54,7 +54,7 @@
     td {
       // part=value
 
-      height: var(--bar-height, #{rem(24)});
+      height: var(--bar-height, 1.5rem);
       bottom: 0;
       left: var(--bottom, 0%);
       width: var(--comparison, var(--percent));
@@ -68,8 +68,8 @@
       position: static;
       transform: none;
       display: block !important;
-      height: var(--bar-height, #{rem(24)});
-      line-height: var(--bar-height, #{rem(24)});
+      height: var(--bar-height, 1.5rem);
+      line-height: var(--bar-height, 1.5rem);
       max-width: var(--xaxis-max-width, none);
 
       > *:not([popover]) {
@@ -253,7 +253,7 @@
   table {
     width: fit-content !important;
     padding-top: 0;
-    height: var(--chart-height-resp, #{rem(120)});
+    height: var(--chart-height-resp);
   }
 
   tbody {
@@ -264,29 +264,29 @@
     min-width: fit-content;
     width: fit-content;
     max-width: fit-content;
-    padding-right: var(--fc-group-width, #{rem(16)});
+    padding-right: var(--fc-group-width, 1rem);
   }
 
   [part='value'] {
-    min-width: var(--fc-value-width, #{rem(12)});
-    width: var(--fc-value-width, #{rem(12)});
-    max-width: var(--fc-value-width, #{rem(12)});
+    min-width: var(--fc-value-width, 0.75rem);
+    width: var(--fc-value-width, 0.75rem);
+    max-width: var(--fc-value-width, 0.75rem);
   }
 }
 
 :host(.chart--fit-content:not(.chart--horizontal).chart--no-scale) {
   --fc-group-width: #{rem(22)};
-  --fc-value-width: #{rem(24)};
+  --fc-value-width: 1.5rem;
 
   table {
-    height: var(--chart-height-lg-set, #{rem(120)});
+    height: var(--chart-height-lg, #{rem(120)});
   }
 }
 
 .chart__wrapper {
-  @container (min-width: #{em($device-xs-width,16)}) {
+  @container (min-width: 36em) {
     --fc-group-width: #{rem(22)};
-    --fc-value-width: #{rem(24)};
+    --fc-value-width: 1.5rem;
   }
 }
 
@@ -305,7 +305,7 @@ button.tooltip {
   z-index: var(--index-floating);
   background: var(--colour-primary);
   color: var(--colour-white);
-  padding: rem(24);
+  padding: 1.5rem;
 
   border-radius: 0.5rem;
   box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
@@ -329,7 +329,7 @@ button.tooltip {
 
   overflow: visible;
 
-  width: calc(anchor-size(width) + var(--container-padding-x) + var(--container-padding-x) + #{rem(24)}) !important;
+  width: calc(anchor-size(width) + var(--container-padding-x) + var(--container-padding-x) + 1.5rem) !important;
 
   &::after {
     content: '';