@iamproperty/components 7.1.0--beta6 → 7.2.0

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;
 }
@@ -55,14 +59,13 @@ iam-tabs.tabs--guided::part(next-button):not(:hover) {
   }
 }
 
-.tabs__links {
-  scroll-snap-type: x mandatory;
-
+.tabs:not(.admin-panel) .tabs__links {
   -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
   mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
 }
 
 .tabs__links {
+  scroll-snap-type: x mandatory;
   padding-bottom: 3px;
   position: relative;
   display: flex;
@@ -163,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;
   }
 
@@ -194,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) {
@@ -208,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;

package/assets/sass/components/testimonial.scss

@@ -4,7 +4,7 @@
   --testimonial-padding: 1rem;
   --testimonial-spacing: 1rem;
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     --testimonial-padding: 4rem;
     --testimonial-spacing: 2rem;
   }
@@ -32,10 +32,10 @@
     touch-action: pan-x;
     height: rem(230);
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       height: rem(340);
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       min-height: 100%;
       scroll-snap-type: y mandatory;
       flex-direction: column;
@@ -61,7 +61,7 @@
     left: 50%;
     transform: translate(-50%, 50%);
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       left: auto;
       bottom: auto;
       right: 0;
@@ -75,10 +75,10 @@
   h2 {
     padding: 2rem var(--testimonial-padding) 0 var(--testimonial-padding);
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(sm, $mobileOnly) {
       padding-top: 3rem;
     }
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       padding-top: 9rem;
     }
   }
@@ -88,7 +88,7 @@
     margin: 0 var(--testimonial-padding) var(--testimonial-spacing) var(--testimonial-padding);
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       --display-none: block;
 
       blockquote:not(.largest) {

package/assets/sass/components/timeline.scss

@@ -23,7 +23,7 @@
   .timeline__container:not(.timeline--simple) & {
     align-items: center;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md, $mobileOnly) {
       --img-order: 0;
       --circle-pos: 50%;
       --line-length: 50%;

package/assets/sass/core.scss

@@ -1,5 +1,16 @@
 @charset "UTF-8";
 
+$root: ':root' !default;
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+$optionalText: 'true' !default;
+
 @use '_fonts';
-@use '_corefiles.scss';
-@use '_print';
+@use '_corefiles.scss' with (
+  $root: $root,
+  $layers: $layers,
+  $mobileOnly: $mobileOnly,
+  $darkMode: $darkMode,
+  $optionalText: $optionalText
+);