@iamproperty/components 7.1.0--beta6 → 7.2.0

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

@@ -0,0 +1,101 @@
+:host {
+  inset: auto;
+  top: anchor(top);
+  left: calc(anchor(right) + var(--menu-offset, 0.25rem));
+  position: fixed;
+  position-try-fallbacks: flip-block, flip-inline;
+  width: max-content;
+  min-width: calc(anchor-size(width) + 2rem);
+
+  max-height: var(--menu-max-height, min-contents);
+  background: var(--menu-bg, canvas);
+  margin: var(--menu-margin, 0);
+  padding: var(--menu-padding, 0.25rem);
+  border: var(--menu-border, 2px solid grey);
+}
+
+:host(:not([popover])) {
+  position: static;
+  display: block;
+}
+
+.menu--inner {
+  display: contents;
+}
+
+::slotted(*:not(iam-menu)) {
+  //all: unset !important;
+  background: unset !important;
+  border: unset !important;
+  color: inherit !important;
+  font-weight: inherit !important;
+  font-family: inherit !important;
+  font-size: 1rem !important;
+  display: block !important;
+  margin: var(--menu-item-margin, 0 0 0.25rem 0) !important;
+  padding: var(--menu-item-padding, 0) !important;
+  width: var(--menu-item-width, 100%) !important;
+  text-align: var(--menu-item-text-align, left) !important;
+  cursor: var(--menu-item-cursor, pointer) !important;
+}
+
+::slotted(details) {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+::slotted(*:not(iam-menu):not([class*='fa-'])):before {
+  display: none !important;
+}
+::slotted(*[class*='fa-']):before {
+  font-family: var(--fa-font-family, 'Font Awesome 6 Pro');
+}
+::slotted(*:not(iam-menu)):after {
+  display: none !important;
+}
+
+::slotted(*:not(iam-menu):focus) {
+  color: var(--menuFocusColor, LinkText) !important;
+}
+::slotted(*:not(iam-menu):not(details):hover) {
+  color: var(--menuHoverColor, LinkText) !important;
+}
+::slotted(*:not(iam-menu):not(details):active) {
+  color: var(--menuActiveColor, ActiveText) !important;
+}
+
+::slotted(hr) {
+  height: 2px !important;
+  background-color: var(--menu-hr-border-color, var(--border-color, grey)) !important;
+  margin-left: calc(var(--menu-padding, 0.25rem) * -1) !important;
+  margin-right: calc(var(--menu-padding, 0.25rem) * -1) !important;
+  width: calc(100% + var(--menu-padding, 0.25rem) * 2) !important;
+  margin-top: var(--menu-hr-margin, 0.75rem) !important;
+  margin-bottom: var(--menu-hr-margin, 1rem) !important;
+  padding: 0 !important;
+}
+
+::slotted([popovertarget]):before {
+  text-align: center;
+  display: inline-block !important;
+  vertical-align: bottom;
+  float: right;
+  color: inherit;
+  height: 1em;
+  width: 1em;
+}
+::slotted([popovertarget]:not([class*='fa-'])):before {
+  content: '' !important;
+  height: 1.2em;
+  width: 1.2em;
+  --icon-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3e%3cpath d='M6.5,2l9,9-9,9' style='fill:none;stroke:%23000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px'/%3e%3c/svg%3e");
+  background: var(--menu-after-bg, currentColor) !important;
+  mask-image: var(--menu-down-icon, var(--icon-arrow));
+  mask-size: 50%;
+  mask-repeat: no-repeat;
+  mask-position: 50% 50%;
+  -webkit-mask-image: var(--menu-down-icon, var(--icon-arrow));
+  -webkit-mask-size: 50%;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: 50% 50%;
+  z-index: 2;
+}

package/assets/sass/components/menu.scss

@@ -0,0 +1,21 @@
+@use '../_func' as *;
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  $menuPadding: 1rem !default;
+  $menuBorder: none !default;
+  $menuBorderRadius: 1rem !default;
+  $menuBoxShadow: 0px 2px 9px rgba(0, 0, 0, 0.1) !default;
+
+  iam-menu:defined {
+    --menu-padding: #{$menuPadding};
+    --border-color: var(--colour-border);
+    --menu-item-margin: 0 0 0.5rem 0;
+    border: #{$menuBorder};
+    border-radius: #{$menuBorderRadius};
+    box-shadow: #{$menuBoxShadow};
+  }
+}

package/assets/sass/components/multi-step.component.scss

@@ -1,5 +1,7 @@
 @use '../_func.scss' as *;
 
+$darkMode: 'true' !default;
+
 *,
 *:before,
 *:after {
@@ -18,7 +20,7 @@
   min-height: 100%;
   padding-left: var(--dialog-padding);
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     padding-top: var(--dialog-padding);
     padding-left: calc(var(--dialog-padding) + #{rem(282)}) !important;
     display: flex;
@@ -105,7 +107,7 @@
     }
   }
 
-  @include dark-mode() {
+  @include dark-mode($darkMode) {
     button {
       color: rgba($color: #000000, $alpha: 0.5);
 
@@ -118,7 +120,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     width: rem(282);
     height: 100%;
     flex-direction: column;

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

@@ -1,41 +1,47 @@
 @use '../_func' as *;
 
-iam-multiselect .tag[slot='checked'] {
-  margin-bottom: rem(8);
-  order: var(--order, 1);
-  margin-inline: rem(3);
-}
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
 
-iam-multiselect .tag:not([slot='checked']) {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-  text-align: left;
-  border-radius: 0;
-  padding-inline: 1rem;
-  outline: none;
-  padding-block: 0.5rem;
-
-  &:not(:hover, :focus, :active, :focus-within) {
-    background: none !important;
+@include layer('components', $layers) {
+  iam-multiselect .tag[slot='checked'] {
+    margin-bottom: rem(8);
+    order: var(--order, 1);
+    margin-inline: rem(3);
   }
 
-  &::after {
-    display: none;
+  iam-multiselect .tag:not([slot='checked']) {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    text-align: left;
+    border-radius: 0;
+    padding-inline: 1rem;
+    outline: none;
+    padding-block: 0.5rem;
+
+    &:not(:hover, :focus, :active, :focus-within) {
+      background: none !important;
+    }
+
+    &::after {
+      display: none;
+    }
   }
-}
 
-iam-multiselect:has(label:not([slot='checked']):not([slot='notmatched'])) {
-  --display-panel: block;
-}
+  iam-multiselect:has(label:not([slot='checked']):not([slot='notmatched'])) {
+    --display-panel: block;
+  }
 
-iam-multiselect:has(label[slot='checked']) {
-  --display-button: block;
-}
+  iam-multiselect:has(label[slot='checked']) {
+    --display-button: block;
+  }
 
-@include dark-mode() {
-  iam-multiselect :is(.tag, .badge):not([slot='checked']) {
-    color: var(--colour-heading);
+  @include dark-mode($darkMode) {
+    iam-multiselect :is(.tag, .badge):not([slot='checked']) {
+      color: var(--colour-heading);
+    }
   }
 }

package/assets/sass/components/{nav.scss → nav.component.scss}

@@ -1,5 +1,16 @@
+@use 'sass:map';
+
 @use '../_func' as *;
 
+@use '../bs_grid' as *;
+
+@include margins();
+@include sizes();
+
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
 :host {
   display: flex !important;
   flex-direction: row !important;
@@ -65,7 +76,7 @@
     }
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     margin: 0 0 0 rem(48);
     width: auto;
     padding-right: rem(24 + 6);
@@ -76,7 +87,7 @@
     }
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     width: fit-content;
     height: auto;
     margin: 0 0 0 3rem;
@@ -89,7 +100,7 @@
     }
 
     .btn {
-      @include light-mode() {
+      @include light-mode($darkMode) {
         @include reset-colours();
       }
 
@@ -176,13 +187,13 @@
       flex-shrink: 0;
     }
 
-    @include dark-mode() {
+    @include dark-mode($darkMode) {
       --colour-link: var(--colour-white);
       @include invert-colours();
     }
 
     // The menu is always white unless in dark mode
-    @include light-mode() {
+    @include light-mode($darkMode) {
       background-color: var(--colour-white);
       @include reset-colours();
     }
@@ -228,7 +239,7 @@
     flex-grow: 1;
     position: relative;
 
-    @include light-mode() {
+    @include light-mode($darkMode) {
       background-color: #eeeeee;
     }
 
@@ -289,6 +300,10 @@
     width: 100%;
     margin: 0 0 rem(48) 0 !important;
     flex-shrink: 0;
+
+    > .btn {
+      margin: 0 !important;
+    }
   }
   .dialog__wrapper > .btn {
     display: none;
@@ -320,7 +335,7 @@
 // #endregion
 
 // #region desktop
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :host {
     //max-width: 100%!important;
     padding-block: 0 !important;
@@ -373,12 +388,12 @@
     left: 0;
     width: 100%;
 
-    @include light-mode() {
+    @include light-mode($darkMode) {
       background-color: #eeeeee;
       @include reset-colours();
     }
 
-    @include dark-mode() {
+    @include dark-mode($darkMode) {
       @include invert-colours();
     }
 
@@ -442,6 +457,11 @@
     position: static;
   }
 
+  #search-close,
+  #search-button {
+    margin: 0;
+  }
+
   #search-dialog[open] {
     position: absolute;
     top: auto;
@@ -465,7 +485,7 @@
   :host(.search-open) {
     background: #e6eaec !important;
 
-    @include dark-mode() {
+    @include dark-mode($darkMode) {
       background: var(--colour-canvas-2) !important;
     }
 
@@ -532,13 +552,13 @@
     flex-shrink: 0;
   }
 
-  @include dark-mode() {
+  @include dark-mode($darkMode) {
     --colour-link: var(--colour-white);
     @include invert-colours();
   }
 
   // The menu is always white unless in dark mode
-  @include light-mode() {
+  @include light-mode($darkMode) {
     background-color: var(--colour-white);
     @include reset-colours();
   }
@@ -559,24 +579,24 @@
     font-weight: $headings-font-weight;
     color: $headings-color;
     clear: both;
-    font-size: rem(map-get($heading-sizes, 'h3_fs'));
-    line-height: rem(map-get($heading-sizes, 'h3_lh'));
+    font-size: rem(map.get($heading-sizes, 'h3_fs'));
+    line-height: rem(map.get($heading-sizes, 'h3_lh'));
     max-width: var(--content-max-width);
 
-    @include media-breakpoint-up(sm) {
-      font-size: rem(map-get($heading-sizes, 'h3_fs_sm'));
-      line-height: rem(map-get($heading-sizes, 'h3_lh_sm'));
+    @include media-breakpoint-up(sm, $mobileOnly) {
+      font-size: rem(map.get($heading-sizes, 'h3_fs_sm'));
+      line-height: rem(map.get($heading-sizes, 'h3_lh_sm'));
       margin-right: -2.5rem;
       padding-right: 2.5rem;
       width: calc(100% + 4rem);
     }
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(sm, $mobileOnly) {
     padding-right: 2.5rem !important;
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(md, $mobileOnly) {
     height: calc(100vh - var(--nav-height));
     top: var(--nav-height);
   }
@@ -615,7 +635,7 @@ slot[name='menus'] {
 // #endregion
 
 // #region compressed nav
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :host(.nav--md-compressed) .buttons-holder button {
     margin-left: 1.5rem !important;
   }
@@ -677,7 +697,7 @@ slot[name='menus'] {
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :host(.nav--dual-buttons) {
     slot[name='dual'] {
       display: flex;

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

@@ -48,7 +48,7 @@
   }
 }
 
-@include media-breakpoint-up(md) {
+@include media-breakpoint-up(md, $mobileOnly) {
   :host {
     position: relative;
   }

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)});
     }