@iamproperty/components 7.1.0--beta7 → 7.2.0

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,10 @@
     display: flex;
     align-items: center;
   }
+
+  *:has(.prev:disabled):has(.next:disabled) {
+    display: none;
+  }
 }
 
 // #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.global.scss

@@ -1,5 +1,7 @@
 @use '../_func.scss' as *;
 
+$darkMode: 'true' !default;
+
 // #region Container type
 *:has(> iam-table) {
   container-type: inline-size;
@@ -409,7 +411,7 @@ iam-table {
 @container (width < 23.4375em) {
   iam-table:has([slot='before']) {
     iam-actionbar {
-      @include light-mode() {
+      @include light-mode($darkMode) {
         background-color: #e6eaec;
       }
     }
@@ -614,3 +616,57 @@ iam-table.table--fullwidth:not([data-expandable]) {
   }
 }
 // #endregion
+
+// #region sort by column header
+
+$icon-sort: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d='M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-96-96c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L128 370.7 128 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-96 96zm352-333.3c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L448 141.3 448 448c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-306.7-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l96-96c12.5-12.5 32.8-12.5 45.3 0l96 96z'/></svg>");
+
+$icon-sort-asc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M209.4 39.4C204.8 34.7 198.6 32 192 32s-12.8 2.7-17.4 7.4l-168 176c-9.2 9.6-8.8 24.8 .8 33.9s24.8 8.8 33.9-.8L168 115.9 168 456c0 13.3 10.7 24 24 24s24-10.7 24-24l0-340.1L342.6 248.6c9.2 9.6 24.3 9.9 33.9 .8s9.9-24.3 .8-33.9l-168-176z'/></svg>");
+
+$icon-sort-desc: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path d='M174.6 472.6c4.5 4.7 10.8 7.4 17.4 7.4s12.8-2.7 17.4-7.4l168-176c9.2-9.6 8.8-24.8-.8-33.9s-24.8-8.8-33.9 .8L216 396.1 216 56c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 340.1L41.4 263.4c-9.2-9.6-24.3-9.9-33.9-.8s-9.9 24.3-.8 33.9l168 176z'/></svg>");
+
+@mixin column-sort {
+  &:has(th[data-sort]) th,
+  td {
+    padding-block: 0.75rem;
+    padding-left: 0.5rem;
+    padding-right: 2.5rem;
+  }
+
+  th[data-sort] {
+    background-repeat: no-repeat;
+    background-size: 1rem 1rem;
+    background-position: calc(100% - 0.5rem) 50%;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--colour-light);
+      background-image: $icon-sort;
+    }
+  }
+
+  th[data-sort][data-order-by='asc'] {
+    background-image: $icon-sort-asc;
+  }
+  th[data-sort][data-order-by='desc'] {
+    background-image: $icon-sort-desc;
+  }
+}
+
+iam-table {
+  &.table--fullwidth {
+    @include column-sort;
+  }
+
+  @container (width >= 32em) {
+    @include column-sort;
+  }
+}
+
+// #endregion
+
+@for $i from 1 through 30 {
+  iam-table [data-hide-col#{$i}] + table :is(thead, tbody) :is(th, td):nth-child(#{$i}) {
+    display: none;
+  }
+}

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

@@ -0,0 +1,5 @@
+@use '../_func' as *;
+
+:host {
+  background: transparent;
+}

package/assets/sass/components/tabs.scss

@@ -1,5 +1,9 @@
 @use '../_func' as *;
 
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
 *:not(main):has(> iam-tabs) {
   container-type: inline-size;
 }
@@ -162,7 +166,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
     display: none;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     flex-direction: row;
   }
 
@@ -193,7 +197,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
       display: none;
     }
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       margin: 0;
 
       &:not(:first-child) {
@@ -207,7 +211,7 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 // #endregion
-@include media-breakpoint-up(sm) {
+@include media-breakpoint-up(sm, $mobileOnly) {
   :host(.tabs--inline) .tabs__links {
     margin: 0;
     justify-content: center;