@iamproperty/components 7.1.0--beta7 → 7.2.1--beta1

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

@@ -1,6 +1,8 @@
 @use 'sass:math';
 @use '../_func' as *;
 
+$darkMode: 'true' !default;
+
 body:has(iam-nav.open:not(.nav--sticky):not(.nav--xs-sticky)) {
   max-height: 100vh;
   overflow: hidden;
@@ -34,7 +36,7 @@ nav:has(iam-nav) {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   nav:has(iam-nav a[slot='secondary']) {
     min-height: #{rem(96 + 40)};
   }
@@ -59,7 +61,7 @@ nav:has(iam-nav.nav--sticky) {
   }
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(sm, $mobileOnly) {
   body:has(iam-nav.open:not(.nav--sticky)) {
     max-height: 100vh;
     overflow: hidden;
@@ -165,7 +167,7 @@ iam-nav details {
 @mixin mobDetails() {
   background-color: var(--colour-canvas);
 
-  @include light-mode() {
+  @include light-mode($darkMode) {
     background-color: #eeeeee;
   }
 
@@ -178,7 +180,7 @@ iam-nav details {
   summary {
     background-color: var(--colour-white);
 
-    @include dark-mode() {
+    @include dark-mode($darkMode) {
       background-color: var(--colour-canvas-2);
     }
     display: block;
@@ -346,7 +348,7 @@ iam-nav details {
 // #endregion
 
 // #region Desktop mega menu
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   iam-nav > details,
   iam-nav *:not(.nav--menu) > details {
     width: auto;
@@ -399,11 +401,11 @@ iam-nav details {
       ) !important;
       box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 
-      @include light-mode() {
+      @include light-mode($darkMode) {
         background: var(--colour-white);
         @include reset-colours();
       }
-      @include dark-mode() {
+      @include dark-mode($darkMode) {
         @include invert-colours();
       }
     }
@@ -411,7 +413,7 @@ iam-nav details {
     &[open] > div:has(details) {
       background: var(--colour-canvas-2);
 
-      @include light-mode() {
+      @include light-mode($darkMode) {
         background: #eeeeee;
       }
 
@@ -449,7 +451,7 @@ iam-nav details {
     &[open] > div:not(:has(details)) {
       background: var(--colour-canvas);
 
-      @include light-mode() {
+      @include light-mode($darkMode) {
         background: var(--colour-white);
         --colour-canvas-2: white;
       }
@@ -590,7 +592,7 @@ iam-nav details {
 // #endregion
 
 // #region Search
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   iam-nav {
     &.search-open {
       > *:not([slot='logo']):not([slot='secondary']):not([slot='search']) {
@@ -602,7 +604,7 @@ iam-nav details {
 // #endregion
 
 // #region Dual navbar in desktop
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   iam-nav:has([slot='dual']) {
     .brand:has(~ [slot='dual']) {
       margin-right: rem(24) !important;

package/assets/sass/components/nav.old.scss

@@ -4,17 +4,14 @@
 .nav .nav__mobile-bar {
   background: var(--colour-primary);
   color: white;
-
-  @if $compatible != 'true' {
-    @include invert-colours();
-  }
-
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   width: rem(375);
 
-  @include media-breakpoint-up(sm) {
+  @include invert-colours();
+
+  @include media-breakpoint-up(sm, $mobileOnly) {
     width: 100%;
   }
 
@@ -55,7 +52,7 @@
   .brand {
     font-size: rem(36);
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       font-size: rem(60);
     }
   }
@@ -65,7 +62,7 @@
   height: rem(36);
   width: auto;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     height: rem(60);
     width: auto;
   }
@@ -194,7 +191,7 @@
 
 // #region nav search
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav__menu--search {
     display: none;
   }
@@ -382,7 +379,7 @@ nav + main > *:first-child {
   width: 100%;
   overscroll-behavior: contain;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     width: rem(375);
   }
 }
@@ -403,12 +400,12 @@ nav + main > *:first-child {
   overflow-x: auto;
   left: 0;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     left: calc(100% - #{rem(375)});
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   #showAccount ~ .nav__menu--account {
     display: none;
   }
@@ -451,7 +448,7 @@ nav + main > *:first-child {
   }
 }
 
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(sm, $mobileOnly) {
   #showMenu:checked ~ .nav__bg {
     content: ' ';
     position: absolute;
@@ -464,7 +461,7 @@ nav + main > *:first-child {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav__bg {
     display: none;
   }
@@ -473,7 +470,7 @@ nav + main > *:first-child {
 // #endregion
 
 // #region Desktop nav
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav .nav__mobile-bar {
     display: none;
   }
@@ -585,7 +582,7 @@ nav + main > *:first-child {
 // #endregion
 
 // #region Nav secondary DESKTOP
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav__menu--secondary {
     background-color: var(--colour-primary);
     @include invert-colours();
@@ -689,7 +686,7 @@ nav + main > *:first-child {
 
 // #region Nav account Desktop
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav__menu--account {
     > .container:first-child {
       display: none;
@@ -733,7 +730,7 @@ nav + main > *:first-child {
 
 // #region Mega menu
 .nav .list-unstyled > li details.nav__mega-menu {
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     position: static;
 
     height: 4.5rem;
@@ -745,12 +742,12 @@ nav + main > *:first-child {
 
     [class*='bg-'] {
       --bs-bg-opacity: 0;
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(md, $mobileOnly) {
         --bs-bg-opacity: 1;
       }
     }
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       --bs-bg-opacity: 1;
       position: absolute;
       top: 100%;
@@ -807,7 +804,7 @@ nav + main > *:first-child {
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     .nav__menu > .list-unstyled {
       text-align: left;
       margin-right: 0 !important;
@@ -841,7 +838,7 @@ nav + main > *:first-child {
 // #endregion
 
 // #region nav admin
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   .nav--admin {
     .nav__logo {
       height: 3rem;
@@ -862,7 +859,7 @@ nav + main > *:first-child {
     display: none !important;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     .nav__menu,
     .nav__account-btn {
       display: block !important;
@@ -877,7 +874,7 @@ nav + main > *:first-child {
     pointer-events: none;
     background: transparent;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       width: rem(375);
       left: calc(100% - #{rem(375)});
     }

package/assets/sass/components/nav.preload.scss

@@ -1,47 +1,53 @@
 @use 'sass:math';
 @use '../_func' as *;
 
-nav:has(iam-nav) {
-  grid-column: container;
-}
-iam-nav {
-  display: block;
-  padding: var(--container-padding);
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  max-width: 100%;
-  margin-inline: auto;
-  column-grid: container;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-  .brand {
-    font-size: rem(48);
-    height: rem(48);
-    padding: 0;
-    text-decoration: none;
-    min-width: min(var(--svg-width), 14rem);
+@include layer('components', $layers) {
+  nav:has(iam-nav) {
+    grid-column: container;
   }
+  iam-nav {
+    display: block;
+    padding: var(--container-padding);
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+    max-width: 100%;
+    margin-inline: auto;
+    column-grid: container;
 
-  @include media-breakpoint-up(md) {
-    padding-inline: max(
-      var(--padding-inline),
-      calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
-    ) !important;
-  }
-}
-
-@media (scripting: enabled) {
-  iam-nav:not(:defined) {
-    > *:not([slot='logo']) {
-      display: none;
+    .brand {
+      font-size: rem(48);
+      height: rem(48);
+      padding: 0;
+      text-decoration: none;
+      min-width: min(var(--svg-width), 14rem);
     }
 
-    &:not(:target) > *:not(.brand) {
-      display: none;
+    @include media-breakpoint-up(md, $mobileOnly) {
+      padding-inline: max(
+        var(--padding-inline),
+        calc((100% - var(--container-max-width)) / 2 + var(--padding-inline))
+      ) !important;
     }
+  }
+
+  @media (scripting: enabled) {
+    iam-nav:not(:defined) {
+      > *:not([slot='logo']) {
+        display: none;
+      }
+
+      &:not(:target) > *:not(.brand) {
+        display: none;
+      }
 
-    @include media-breakpoint-up(md) {
-      &:has([slot='secondary']) {
-        padding-top: rem(64);
+      @include media-breakpoint-up(md, $mobileOnly) {
+        &:has([slot='secondary']) {
+          padding-top: rem(64);
+        }
       }
     }
   }

package/assets/sass/components/notification.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+$darkMode: 'true' !default;
+
 :host,
 .iam-notification {
   display: block;
@@ -9,14 +11,16 @@
   margin-bottom: 1rem;
   font-size: rem(15);
   border: rem(2) solid var(--colour, var(--colour-info));
+  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
 
-  @include light-mode() {
+  @include light-mode($darkMode) {
     background: #e9f9fd;
   }
 
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-
-  ::slotted(i),
+  &::slotted(strong) {
+    color: green;
+  }
+  &::slotted(i),
   i {
     color: var(--colour, currentColor);
   }
@@ -86,7 +90,7 @@
   display: flex;
   flex-wrap: nowrap;
 
-  @include light-mode() {
+  @include light-mode($darkMode) {
     color: var(--colour-heading);
   }
 

package/assets/sass/components/pagination.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@include margins();
+
 :host {
   container-type: inline-size;
   display: block;
@@ -19,6 +21,11 @@
     display: flex;
     align-items: center;
   }
+
+  &:has(.prev:disabled):has(.next:disabled) {
+    display: none;
+    padding: 0;
+  }
 }
 
 // #region page jump and per page

package/assets/sass/components/property-searchbar.scss

@@ -5,7 +5,7 @@
   fieldset {
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       position: relative;
       padding-right: 1.5rem;
 
@@ -26,7 +26,7 @@
   .form-control__wrapper {
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       margin-bottom: 0;
     }
   }
@@ -37,7 +37,7 @@
     text-transform: uppercase;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     .row .row {
       .form-label {
         display: none;
@@ -64,7 +64,7 @@
     right: 0.5rem;
     width: 5rem;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       right: 1.5rem;
     }
 
@@ -78,7 +78,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     .property-searchbar__btn {
       align-items: flex-end;
     }
@@ -88,7 +88,7 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       margin: 0;
       padding-left: 3.5rem;
       padding-right: 3.5rem;
@@ -109,7 +109,7 @@
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 24%);
   position: relative;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     border-radius: rem(48);
     padding: 1.5rem 2.5rem;
 

package/assets/sass/components/slider.scss

@@ -1,5 +1,7 @@
 @use '../_func' as *;
 
+@use '../bs_grid' as *;
+
 .row {
   align-items: center;
 }

package/assets/sass/components/snapshot.scss

@@ -11,13 +11,13 @@
     position: relative;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 25%;
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     > .row > .col:nth-child(8) ~ .col {
       max-width: 12.5%;
     }

package/assets/sass/components/stepper.scss

@@ -8,7 +8,7 @@
   border: 1px solid var(--colour-canvas);
   overflow: hidden;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     flex-wrap: nowrap;
     overflow-x: auto;
   }
@@ -21,7 +21,7 @@
     width: 100%;
     overflow: auto;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       display: flex;
       flex-grow: 1;
       padding-right: calc(2rem + 1px);
@@ -31,7 +31,7 @@
       clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
     }
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       overflow: initial;
     }
 
@@ -41,14 +41,14 @@
       background: var(--colour-canvas);
       padding: 1px;
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up(sm, $mobileOnly) {
         &:first-child a {
           padding-left: 1rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%);
         }
       }
 
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(md, $mobileOnly) {
         &:first-child a {
           padding-left: 2rem;
         }
@@ -64,7 +64,7 @@
         position: relative;
         color: var(--colour-primary);
 
-        @include media-breakpoint-up(sm) {
+        @include media-breakpoint-up(sm, $mobileOnly) {
           margin-right: -2rem;
           padding: 2rem 3rem 2rem 3rem;
           clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 0 100%, 2rem 50%);
@@ -144,7 +144,7 @@
       display: none;
     }
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       width: max-content;
       padding: 2rem 2rem;
 

package/assets/sass/components/{table.scss → table-basic.component.scss}

@@ -1,7 +1,16 @@
 @use '../_func.scss' as *;
 
-// #region Table wrapper - Add via JS if needed, provides a safe space to scroll
+@include max-height();
+
+$darkMode: 'true' !default;
+
+// #region Table container - Add via JS if needed, provides a safe space to scroll
 :host {
+  container-type: inline-size;
+  display: block;
+}
+
+.table__container {
   --wrapper-padding: #{rem(32)};
   --bg-colour: #ffffff;
   display: block;
@@ -26,8 +35,14 @@
   }
 }
 
-::slotted(table) {
-  margin-bottom: 0 !important;
+:host(.mh-sm) {
+  max-height: none !important;
+}
+:host(.mh-md) {
+  max-height: none !important;
+}
+:host(.mh-lg) {
+  max-height: none !important;
 }
 
 .table__wrapper {
@@ -41,23 +56,22 @@
 
 // #region Tables are only stacked on mobile
 @container (width < 23.4375em) {
-  :host(:not(.table--fullwidth)) {
+  :host(:not(.table--fullwidth)) .table__container {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
     margin-bottom: 0;
     background: var(--colour-canvas-2);
     border-radius: 0;
-
-    .table__wrapper:not(.table--fullwidth) {
-      overflow: hidden;
-      max-height: none !important;
-    }
-
     background: none;
     padding: 0;
     box-shadow: none;
     overflow: visible;
 
+    .table__wrapper {
+      overflow: hidden;
+      max-height: none !important;
+    }
+
     ::slotted(table) {
       overflow: visible !important;
       margin-inline: 1.5rem;
@@ -102,6 +116,7 @@
 // #region Max height tables
 .table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
   position: relative;
+  overflow: auto;
 
   &::before {
     top: calc(100% - 1.2rem);
@@ -111,61 +126,3 @@
     margin-bottom: -1.2rem;
   }
 }
-
-// If table CTA class is set then undo max-height
-.table--cta > .table__wrapper:is(.mh-sm, .mh-md, .mh-lg) {
-  max-height: none;
-  position: static;
-
-  &::before {
-    display: none;
-  }
-}
-//#endregion
-
-// #region Table with actionbar
-@container (width < 23.4375em) {
-  .table__wrapper.has-actionbar {
-    margin-top: calc(-100vh - -6.75rem) !important;
-  }
-}
-// #endregion
-
-// #region Loading via ajax
-:host(.table--loading) {
-  pointer-events: none;
-  position: relative;
-
-  ::slotted(table) {
-    min-height: 20rem;
-    opacity: 0.5;
-  }
-
-  &::after {
-    content: 'Loading...';
-    position: absolute;
-    top: rem(100);
-    left: 50%;
-    transform: translate(-50%, 0);
-    font-weight: bold;
-    color: var(--colour-heading);
-    font-size: 1.5rem;
-    text-shadow: 0px 0px 10px var(--colour-canvas-2);
-    padding-inline: 2rem;
-    text-shadow: 0px 0px 10px var(--colour-canvas-2);
-    background: radial-gradient(var(--colour-canvas-2), transparent);
-  }
-}
-// #endregion
-
-// #region pagination
-@container (width < 23.4375em) {
-  .pagination--table {
-    margin-inline: rem(24);
-    width: auto;
-  }
-  :host(.table--fullwidth) .pagination--table {
-    margin-inline: 0;
-  }
-}
-// #endregion