@iamproperty/components 7.4.0 → 7.5.1--beta1

package/assets/sass/_functions/utility-mixins.scss

@@ -456,7 +456,6 @@ $new_utilities: map.merge(
 );
 
 @mixin display() {
-
   .d-inline {
     display: inline !important;
   }
@@ -1056,6 +1055,16 @@ $new_utilities: map.merge(
       margin-right: #{$value} !important;
     }
 
+    .mx-minus-#{$key} {
+      margin-left: -#{$value} !important;
+      margin-right: -#{$value} !important;
+    }
+
+    .my-minus-#{$key} {
+      margin-top: -#{$value} !important;
+      margin-bottom: -#{$value} !important;
+    }
+
     .my-#{$key} {
       margin-top: #{$value} !important;
       margin-bottom: #{$value} !important;
@@ -1317,12 +1326,23 @@ $new_utilities: map.merge(
       color: var(--colour-#{$color}) !important;
     }
 
+    .text-heading {
+      
+      color: var(--colour-heading) !important;
+    }
+
     .bg-#{$color} {
       --bg-opacity: 1;
       --bg-colour: var(--colour-#{$color}) !important;
       background-color: var(--colour-#{$color}) !important;
     }
 
+    .hover-#{$color}:is(:hover,:focus,:focus-within) {
+      --bg-opacity: 1;
+      --bg-colour: var(--colour-#{$color}) !important;
+      background-color: var(--colour-#{$color}) !important;
+    }
+
     .colour-#{$color} {
       --colour: var(--colour-#{$color}) !important;
     }

package/assets/sass/_functions/variables.scss

@@ -746,6 +746,20 @@ $table-padding-px: 32;
 $table-padding: #{rem($table-padding-px)};
 // #endregion
 
+// #region rounded borders
+$vars: map.merge(
+  (
+    --border-radius-sm: 0.25rem,
+    --border-radius: 0.5rem,
+    --border-radius-lg: 1rem,
+    --border-radius-xl: 1.5rem,
+    --border-radius-2xl: 3rem,
+
+  ),
+  $vars
+);
+// #endregion
+
 $vars-responsive: (
   'sm': (
     'gutter': 2.5rem,

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

@@ -264,7 +264,7 @@ slot[name='selectall'] {
   margin-right: auto !important;
 }
 
-.search-wrapper {
+.show .search-wrapper {
   width: calc(100% - #{rem(44 + 8)});
   max-width: rem(350) !important;
   margin: 0 !important;
@@ -290,6 +290,28 @@ slot[name='selectall'] {
     line-height: rem(40 - 8 - 8) !important;
     pointer-events: all !important;
   }
+  .empty {
+    position: absolute;
+    bottom: 0.25rem;
+    right: 3rem;
+    margin: 0;
+    aspect-ratio: 1 / 1;
+
+    width: 2rem;
+    height: 2rem;
+
+    text-align: center;
+    line-height: 1;
+
+    &:not(:hover, :focus) {
+      border-color: transparent;
+      background-color: transparent;
+    }
+
+    i {
+      font-size: 1.5rem;
+    }
+  }
 }
 // #endregion
 
@@ -370,4 +392,19 @@ slot[name='selectall'] {
   min-height: 15rem;
 }
 
+::slotted(.tag){
+  margin-bottom: 0!important;
+}
+
+slot[name="filters"]{
+  
+  display: none;
+  
+  @include media-breakpoint-up(md, $mobileOnly) {
+    display: contents;
+  }
+}
+
+
+
 // #endregion

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

@@ -10,7 +10,7 @@ iam-actionbar {
   border-top-left-radius: rem(10);
   border-top-right-radius: rem(10);
 
-  @include dark-mode($darkMode) {
+  @container style(--theme: dark) {
     background-color: var(--colour-canvas);
   }
 }

package/assets/sass/components/{address-lookup.scss → address-lookup.component.scss}

@@ -1,9 +1,19 @@
 @use '../_func.scss' as *;
 
+@use '../elements/forms.scss' as *;
+@use '../elements/buttons.scss' as *;
+
 .js-hide {
   display: none !important;
 }
 
+.ms-1 {
+  margin-inline-start: 0.5rem !important;
+}
+.pb-2 {
+  padding-bottom: 1rem !important;
+}
+
 :host {
   margin-bottom: 1rem;
   display: block;

package/assets/sass/components/applied-filters.scss

@@ -1,4 +1,5 @@
 @use '../_func.scss' as *;
+@use '../elements/badge-tag.scss' as *;
 
 .applied-filters {
   &:not(.applied-filters--compact):not(:empty):before {