@iamproperty/components 5.3.0-beta3 → 5.3.0-beta5

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

@@ -76,19 +76,6 @@ nav:has(iam-nav.nav--sticky) {
 }
 // #endregion
 
-// #region before component is loaded
-iam-nav:not(:defined) {
-
-  > *:not([slot="logo"]) {
-    display: none;
-  }
-  
-  &:not(:target) > *:not(.brand) {
-    display: none;
-  }  
-}
-// #endregion
-
 // #region General styles
 iam-nav {
 
@@ -116,6 +103,7 @@ iam-nav {
     padding: 0;
     text-decoration: none;
     min-width: min(var(--svg-width), 14rem);
+    margin-right: auto;
   }
 
   a:not([slot="logo"]):not(.btn):not(:has(iam-card)) {
@@ -167,104 +155,115 @@ iam-nav details {
 
 // #endregion
 
+
 // #region mobile and tablet mega menu
-@media screen and (max-width: 62em) {
-  iam-nav details {
 
-    background-color: var(--colour-canvas);
+@mixin mobDetails() {
+  background-color: var(--colour-canvas);
     
-    @include light-mode() {
-      background-color: #EEEEEE;
-    }
+  @include light-mode() {
+    background-color: #EEEEEE;
+  }
+
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  padding-inline: 1.5rem;
+  width: auto;
+  position: relative;
 
+  summary {
+
+    background-color: var(--colour-white);
+
+          
+    @include dark-mode() {
+      
+      background-color: var(--colour-canvas-2);
+    }
+    display:block;
+    border: none;
+    color: var(--colour-link);
+    margin: 0;
+    
     margin-left: -1.5rem;
     margin-right: -1.5rem;
-    padding-inline: 1.5rem;
-    width: auto;
+    padding: 1.5rem 4rem 1.5rem 1.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    min-height: 1.5rem;
     position: relative;
+    font-weight: normal;
 
-    summary {
+    &:after {
+      content: "\f055";
+      display: block;
+      font-size: rem(24);
+      font-weight: 300;
+      position: absolute;
+      top: 1.5rem;
+      right: 1.5rem;
+      font-family: "Font Awesome 6 Pro";
+      line-height: 1em;
+    }
+  }
 
-      background-color: var(--colour-white);
+  &[open] > summary:after {
+    content: "\f056";
+    font-weight: bold;
+  }
 
-            
-      @include dark-mode() {
-        
-        background-color: var(--colour-canvas-2);
-      }
-      display:block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-      
-      margin-left: -1.5rem;
-      margin-right: -1.5rem;
-      padding: 1.5rem 4rem 1.5rem 1.5rem;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      min-height: 1.5rem;
-      position: relative;
-      font-weight: normal;
+  a {
+    text-decoration: none;
+    display:block;
+    border: none;
+    color: var(--colour-link);
+    margin: 0;
+    margin-left: 3rem;
+    padding: 1.5rem 0 1.5rem 0;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    min-height: 1.5rem;
+    position: relative;
+    font-weight: normal;
 
-      &:after {
-        content: "\f055";
-        display: block;
-        font-size: rem(24);
-        font-weight: 300;
-        position: absolute;
-        top: 1.5rem;
-        right: 1.5rem;
-        font-family: "Font Awesome 6 Pro";
-        line-height: 1em;
-      }
+    &:after {
+      background: var(--colour-border)!important;
+      top: calc(100% - 2px)!important;
+      width: 100%!important;
     }
+  }
 
-    &[open] > summary:after {
-      content: "\f056";
-      font-weight: bold;
-    }
+  // Hide cards
+  a:has(iam-card){ 
+    display: none!important;
+  }
 
-    a {
-      text-decoration: none;
-      display:block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-      margin-left: 3rem;
-      padding: 1.5rem 0 1.5rem 0;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      min-height: 1.5rem;
-      position: relative;
-      font-weight: normal;
+  > div a:last-child {
+    
+    margin-bottom: 0!important;
+  }
 
-      &:after {
-        background: var(--colour-border)!important;
-        top: calc(100% - 2px)!important;
-        width: 100%!important;
-      }
-    }
+  > div a:last-child:after {
+    display: none;
+  }
 
-    // Hide cards
-    a:has(iam-card){ 
-      display: none!important;
-    }
+  &:after {
+    content: "";
+    position: absolute;
+    top: calc(100% - 2px);
+    left: 1.5rem;
+    height: 2px;
+    width: calc(100% - 3rem);
+    display: block;
+    height: 2px;
+    background-color: var(--colour-border) !important;
+  }
+}
 
-    details a:last-child:after {
-      display: none;
-    }
+@media screen and (max-width: 62em) {
+  iam-nav details {
 
-    &:after {
-      content: "";
-      position: absolute;
-      top: calc(100% - 2px);
-      left: 1.5rem;
-      height: 2px;
-      width: calc(100% - 3rem);
-      display: block;
-      height: 2px;
-      background-color: var(--colour-border) !important;
-    }
+    @include mobDetails();
 
     // Sub details 
     details {
@@ -298,30 +297,38 @@ iam-nav details {
     }
   } 
 }
+
 // #endregion
 
 // #region tablet mega menu tweaks
-@media screen and (max-width: 62em) and (min-width: 36em) {
 
-  iam-nav details {
+@mixin tabletDetails() {
+  
+  padding-right: rem(40);
+  margin-right: rem(-40);
+
+  &:after {
+    
+    width: calc(100% - 4rem);
+  }
+  
+  summary {
+      
     padding-right: rem(40);
     margin-right: rem(-40);
 
     &:after {
       
-      width: calc(100% - 4rem);
+      right: 2.5rem;
     }
-    
-    summary {
-        
-      padding-right: 5rem;
-      margin-right: rem(-40);
+  }
+}
 
-      &:after {
-        
-        right: 2.5rem;
-      }
-    }
+@media screen and (max-width: 62em) and (min-width: 36em) {
+
+  iam-nav details {
+
+    @include tabletDetails();
   }
 
   iam-nav details details[open] + details:before {
@@ -330,11 +337,22 @@ iam-nav details {
     margin-right: rem(-40);
   }
 }
+
+@media screen and (min-width: 62em) {
+
+  iam-nav .nav--menu details {
+    
+    @include mobDetails();
+    @include tabletDetails();
+  }
+}
+
 // #endregion
 
 // #region Desktop mega menu
 @include media-breakpoint-up(md) {
-  iam-nav details {
+  iam-nav > details,
+  iam-nav *:not(.nav--menu) > details {
 
     width: auto;
 
@@ -531,7 +549,7 @@ iam-nav details {
       }
     }
 
-    > details > summary {
+    details > summary {
 
       padding-right: 0;
       background: transparent;
@@ -542,7 +560,7 @@ iam-nav details {
     }
 
     details:not(:first-child) > summary {
-      
+        
       margin-left: rem(32);
     }
   }
@@ -565,13 +583,105 @@ iam-nav details {
 
 // #region Dual navbar in desktop
 @include media-breakpoint-up(md) {
-  iam-nav {
+  iam-nav:has([slot="dual"]) {
     .brand:has(~ [slot="dual"]) {
-      margin-right: rem(24);
+      margin-right: rem(24)!important;
+    }
+
+    *:not([slot="dual"]):has(+ [slot="dual"]) + [slot="dual"] {
+      margin-left: auto!important;
+    }
+
+    .btn[slot="dual"] {
+      margin-left: 0;
+    }
+
+    &::part(btn-menu) {
+      margin-left: 1rem!important;
     }
+  }
+}
+// #endregion
+
+// #region compact menus on mobile
+iam-nav > .dialog__wrapper {
+
+  .dialog--list {
+
+    a {
+      font-size: 1rem;
+    }
+  }
+}
+
+@media screen and (max-width: 64em) {
+
+
+  iam-nav > .dialog__wrapper {
+
+    width: 100%;
+
+    .btn-compact {
+      display: none!important;
+    }
+    .dialog--list {
+      
+      display: contents!important;
+
+      a {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  iam-nav > a + :is(.dialog__wrapper, .btn-compact) {
+    margin-top: 1.5rem;
+  }
+
+  iam-nav > .dialog__wrapper .dialog--list a,
+  iam-nav .btn-compact {
+    --compact-size: 2rem;
+    all: unset;
+    display: block!important;
+    font-size: rem(14)!important;
+    line-height: rem(32)!important;
+    height: rem(32)!important;
+    min-height: rem(32)!important;
+    max-height: rem(32)!important;
+    width: 100%!important;
+    margin: 0!important;
+    cursor: pointer;
+    color: var(--colour-link);
+    font-weight: normal!important;
+
+
+    &:where(:hover,:focus,.selected,[aria-current=page]) {
+      text-decoration: underline;
+      text-underline-offset: 0.3em;
+      text-decoration-thickness: 2px;
+      text-decoration-color: var(--colour-underline);
+    }
+
+
+    &:before {
+      display: inline-block;
+      width: auto;
+      position: static;
+      margin-right: 0.5rem;
+      font-size: 0.875rem !important;
+      text-decoration: none!important;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  iam-nav > .dialog__wrapper,
+  iam-nav .btn-compact {
 
-    *:not([slot="dual"]):has(+ [slot="dual"]) {
-      margin-right: auto;
+    &:has(+ *:not(.dialog__wrapper,.btn-compact)){
+      margin-bottom: 1.5rem!important;
     }
   }
 }

package/assets/sass/components/nav.scss

@@ -7,11 +7,6 @@
   align-items: center!important;
 }
 
-::slotted(.brand) {
-
-  margin-right: auto!important;
-}
-
 .btn-menu {
     
   padding: 0;
@@ -88,7 +83,7 @@
 
     width: fit-content;
     height: auto;
-    margin: 0 0 0 3rem!important;
+    margin: 0 0 0 3rem;
     padding: 0!important;
     text-indent: 0;
     padding-right: 0!important;
@@ -101,10 +96,6 @@
       @include light-mode() {
     
         @include reset-colours();
-
-        &:is(:hover,:focus){
-          color: var(--colour-inverted);
-        }
       }
 
       margin: 0!important;
@@ -130,6 +121,15 @@
   }
 }
 
+:host(.bg-primary) .btn {
+  
+
+    &:is(:hover,:focus){
+      color: var(--colour-inverted);
+    }
+  
+}
+
 // #region mobile and tablet menu
 @media screen and (max-width: 62em) {
   :host > .container {
@@ -250,7 +250,7 @@
     }
   }
 
-  ::slotted(a:not([slot="logo"])) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
     display: block!important;
     line-height: rem(20)!important;
     padding: rem(24) 0!important;
@@ -429,9 +429,8 @@
     margin-right: 0!important;
   }
 
-  ::slotted(a:not([slot="logo"])) {
+  ::slotted(a:not([slot="logo"]):not(.btn-compact)) {
 
-    margin-left: rem(32)!important;
     font-size: rem(16)!important;
     font-weight: normal!important;
 
@@ -440,6 +439,11 @@
     }
   }
 
+  ::slotted(a:not([slot="logo"]):not([slot="dual"])) {
+
+    margin-left: rem(32)!important;
+  }
+
   ::slotted(button) {
 
     margin-left: rem(48)!important;
@@ -581,11 +585,11 @@
 
   &:before {
     display: block ;
-    width: 100%;
+    width: calc(100% + 3rem);
     border-top: 2px solid var(--colour-border);
     z-index: 1;
-    padding-block: rem(24);
-    margin: 0;
+    padding: rem(24) 1.5rem;
+    margin: 0 -1.5rem;
     font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: $headings-font-weight;
@@ -599,6 +603,9 @@
   
       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);
     }
   }
 
@@ -606,9 +613,13 @@
     content: attr(data-title);
   }
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(sm) {
 
+    padding-right: 2.5rem !important;
+  }
 
+  @include media-breakpoint-up(md) {
+  
     height: calc(100vh - var(--nav-height));
     top: 100%;
   }
@@ -635,4 +646,25 @@
     backdrop-filter: blur(2px);
   }
 }
-// #endregion
+// #endregion
+
+// #region compressed nav
+@include media-breakpoint-up(md) {
+  :host(.nav--md-compressed) .buttons-holder button {
+    margin-left: 1.5rem!important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn i[class*=fa-] {
+    margin-right: 0.5rem !important;
+    margin-left: -0.5rem !important;
+  }
+
+  :host(.nav--md-compressed) .btn-menu .btn {
+    --btn-padding-inline: 2.5rem;
+  }
+
+  :host(.nav--md-compressed) ::slotted(a:not([slot=logo]):not([slot=secondary])){
+    margin-left: 1.5rem!important;
+  }
+}
+// #endregion

package/assets/sass/elements/buttons.scss

@@ -24,7 +24,7 @@
   }
 
   display: inline-block;
-  font-weight: bold!important;
+  font-weight: bold;
   text-align: left;
   text-decoration: none;
   vertical-align: middle;
@@ -275,6 +275,28 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
       color: var(--colour-inverted);
     }
   }
+
+  &[data-number] {
+    position: relative;
+  }
+  &[data-number]:after {
+    content: attr(data-number);
+    position: absolute;
+    top: 0.5em;
+    z-index: 99;
+    background: var(--colour-danger);
+    height: 1.5em;
+    width: 1.5em;
+    border-radius: 50%;
+    text-indent: 0;
+    left: 50%;
+    font-size: 0.5em;
+    line-height: 1.5em;
+    text-align: center;
+    color: white;
+    letter-spacing: -0.1em;
+    font-family: arial, sans-serif;
+  }
 }
 // #endregion
 

package/assets/sass/elements/dialog.scss

@@ -607,12 +607,27 @@ dialog::backdrop {
         }
       }
 
+      a {
+
+        padding: #{rem(6)};
+
+        &:not(:hover,:focus,:active){
+          border-color: transparent;
+        }
+        margin: 0;
+
+        &:after {
+          display: none;
+        }
+      }
+
       .btn-action {
         &:not(:hover,:focus,:active){
           border-color: transparent;
         }
         margin: 0;
       }
+
     }
 
     dialog[open] {

package/assets/sass/elements/icons.scss

@@ -21,6 +21,6 @@
   font-size: rem(40);
 }
 
-[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid ) {
+[class*="fa-"]:not(.fa-regular,.fa-light, .fa-solid, .btn) {
   font-weight: 400;
 }

package/assets/ts/components/nav/nav.component.ts

@@ -28,7 +28,7 @@ class iamNav extends HTMLElement {
     <div class="container">
       <slot name="logo"></slot>
       <div class="buttons-holder"></div>
-      <button class="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
+      <button class="btn-menu" part="btn-menu">Menu<i class="fa-regular fa-bars"></i><i class="fa-regular fa-xmark-large"></i></button>
 
       <div class="menu__outer">
         <div class="menu closed">
@@ -91,6 +91,7 @@ class iamNav extends HTMLElement {
         const button = document.createElement('button');
         button.setAttribute('slot',title);
         button.classList.add('btn-menu');
+        button.setAttribute('part','btn-menu');
         button.innerHTML = `<span class="btn btn-primary"><span>${title}</span><i class="${iconClass}"></i><i class="fa-regular fa-xmark-large"></i></span>`;
         buttonsHolder.insertAdjacentElement('beforeend',button);
 
@@ -231,7 +232,7 @@ class iamNav extends HTMLElement {
 
       if (event && event.target instanceof HTMLElement && event.target.closest('summary')){
 
-        if(window.innerWidth > 992){
+        if(window.innerWidth > 992 && !event.target.closest('.nav--menu')){
 
           let summary = event.target.closest('summary');
           let details = summary.closest('details');

package/assets/ts/components/search/search.component.ts

@@ -28,7 +28,9 @@ class iamSearch extends HTMLElement {
     input:not(.is-invalid):not(:invalid) {
       background: none!important;
     }
-
+    .optional-text {
+      display: none;
+    }
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <slot></slot>
@@ -83,7 +85,7 @@ class iamSearch extends HTMLElement {
     function checkMatch(){
       
       let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
-      let subMatch = datalist.querySelector(`option[value*='${displayInputField.value}' i]`);
+      let subMatch = datalist.querySelector(`option[value*="${displayInputField.value}" i]`);
 
       if(match){
         inputField.value = match.getAttribute('data-value');
@@ -145,8 +147,11 @@ class iamSearch extends HTMLElement {
               let actualValue = resolvePath(item, valueSchema, '');
               let displayValue = resolvePath(item, displaySchema, '').replace('\n',', ');
 
+              console.log(displayValue);
+
+
               if(!datalist.querySelector(`option[data-value="${actualValue}"]`))
-                listString += `<option value="${displayValue}" data-value='${actualValue}'></option>`;
+                listString += `<option value="${displayValue}" data-value="${actualValue}"></option>`;
             });
           }
           else if (typeof loopValues == 'object'){