@iamproperty/components 7.1.0--beta7 → 7.2.0

package/assets/sass/components/inline-edit.preload.scss

@@ -1,131 +1,137 @@
 @use '../_func' as *;
 
-iam-inline-edit {
-  .optional-text {
-    display: none;
-  }
+$layers: 'true' !default;
+$mobileOnly: 'false' !default;
+$darkMode: 'true' !default;
+
+@include layer('components', $layers) {
+  iam-inline-edit {
+    .optional-text {
+      display: none;
+    }
 
-  label,
-  textarea {
-    margin: 0;
+    label,
+    textarea {
+      margin: 0;
+    }
   }
-}
-
-iam-inline-edit:focus-within {
-  position: relative;
-  z-index: 99;
-  --display-status: none;
-}
 
-// Inactive state
-iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
-  --display-btns: none;
-
-  input,
-  textarea,
-  select {
-    border: none;
-    background: none;
-    margin-left: -1rem;
-    width: calc(100% + 1rem);
-    max-width: calc(100% + 1rem);
-    box-shadow: none;
+  iam-inline-edit:focus-within {
+    position: relative;
+    z-index: 99;
+    --display-status: none;
   }
-}
 
-iam-inline-edit:defined:focus-within:has(select),
-iam-inline-edit:defined[data-saving]:has(select) {
-  --display-btns: none;
-}
+  // Inactive state
+  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)) {
+    --display-btns: none;
 
-// Hover state
-iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
-  input,
-  textarea,
-  select {
-    border: none;
-    background: var(--colour-light);
+    input,
+    textarea,
+    select {
+      border: none;
+      background: none;
+      margin-left: -1rem;
+      width: calc(100% + 1rem);
+      max-width: calc(100% + 1rem);
+      box-shadow: none;
+    }
   }
-}
 
-// Multi select
-
-iam-inline-edit:has(iam-multiselect label[slot='checked']) {
-  --display-btns: none;
-}
+  iam-inline-edit:defined:focus-within:has(select),
+  iam-inline-edit:defined[data-saving]:has(select) {
+    --display-btns: none;
+  }
 
-iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
-  --display-button: none;
-}
+  // Hover state
+  iam-inline-edit:defined:not(:focus-within):not([data-saving]):not(.was-validated:has(:invalid)):hover {
+    input,
+    textarea,
+    select {
+      border: none;
+      background: var(--colour-light);
+    }
+  }
 
-iam-inline-edit iam-multiselect .tag[slot='checked'] {
-  outline: none;
-}
+  // Multi select
 
-// Error message
-
-iam-inline-edit.was-validated
-  label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
-  position: absolute;
-  right: 0;
-  bottom: 100%;
-  padding: 0.85rem;
-  width: min-content;
-  white-space: nowrap;
-
-  color: var(--colour-heading);
-
-  display: block;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
-  background: var(--colour-canvas-2);
-  border-radius: 0.5rem;
-  margin: 0 0 -1rem 0;
-  outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
-}
-
-// #region preview element
+  iam-inline-edit:has(iam-multiselect label[slot='checked']) {
+    --display-btns: none;
+  }
 
-iam-inline-edit:has(.preview) {
-  position: relative;
+  iam-inline-edit:not(:focus-within) iam-multiselect:has(label[slot='checked']) {
+    --display-button: none;
+  }
 
-  label {
-    opacity: 0;
-    margin-top: -0.75rem;
+  iam-inline-edit iam-multiselect .tag[slot='checked'] {
+    outline: none;
   }
 
-  .preview {
+  // Error message
+
+  iam-inline-edit.was-validated
+    label:has(:is(input:not([type='radio']):not([type='checkbox']), select)):has(:is(:invalid, .is-invalid)):after {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    pointer-events: none;
-    padding: 0.75rem;
-    margin-top: -0.75rem;
-    margin-left: -0.75rem;
+    right: 0;
+    bottom: 100%;
+    padding: 0.85rem;
+    width: min-content;
+    white-space: nowrap;
+
+    color: var(--colour-heading);
+
+    display: block;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background: var(--colour-canvas-2);
+    border-radius: 0.5rem;
+    margin: 0 0 -1rem 0;
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
   }
 
-  .preview:empty {
-    &:before {
-      content: attr(data-placeholder);
+  // #region preview element
+
+  iam-inline-edit:has(.preview) {
+    position: relative;
+
+    label {
+      opacity: 0;
+      margin-top: -0.75rem;
     }
-  }
 
-  &:hover,
-  &:focus {
     .preview {
-      border: none;
-      background: var(--colour-light);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      pointer-events: none;
+      padding: 0.75rem;
+      margin-top: -0.75rem;
+      margin-left: -0.75rem;
     }
-  }
 
-  &:focus-within {
-    label {
-      opacity: 1;
+    .preview:empty {
+      &:before {
+        content: attr(data-placeholder);
+      }
     }
-    .preview {
-      opacity: 0;
+
+    &:hover,
+    &:focus {
+      .preview {
+        border: none;
+        background: var(--colour-light);
+      }
+    }
+
+    &:focus-within {
+      label {
+        opacity: 1;
+      }
+      .preview {
+        opacity: 0;
+      }
     }
   }
-}
 
-// #endregion
+  // #endregion
+}

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