@iamproperty/components 7.8.2--beta8 → 7.8.2--beta10

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

@@ -188,134 +188,130 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 /* #endregion */
 
 /* #region mobile and tablet mega menu */
-:is(iam-nav,.iam-nav) details {
-  @media screen and (max-width: 62em) {
+
+@mixin mobileMenu(){
+  background-color: #eeeeee;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  padding-inline: 1.5rem;
+  width: auto;
+  position: relative;
+
+  summary {
+    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;
 
-    .section [data-title].section-title {
+    &:after {
+      content: '\f055';
+      display: block;
+      font-size: 1.5rem;
+      font-weight: 300;
+      position: absolute;
+      top: 1.5rem;
+      right: 1.5rem;
+      font-family: var(--fa-family-classic);
+      line-height: 1em;
+    }
+  }
 
-      color: var(--colour-body) !important;
-      font-size: 1rem;
-      font-weight: normal;
-      font-weight: normal;
+  &[open] > summary:after {
+    content: '\f056';
+    font-weight: bold;
+  }
+
+  a {
+    text-decoration: none;
+    display: block;
+    border: none;
+    color: var(--colour-link);
+    margin: 0;
+    margin-left: 3rem!important;
+    padding: 1.5rem 0 1.5rem 0;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    min-height: 1.5rem;
+    position: relative;
+    font-weight: normal;
+
+    &:after {
+      background: var(--colour-border) !important;
+      top: calc(100% - 2px) !important;
+      width: 100% !important;
     }
+  }
 
-    summary {
-      background-color: var(--colour-canvas-2);
+  &: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;
+  }
+}
 
-      /*
-      @container style(--theme: dark) {
-        background-color: var(--colour-canvas-2);
-      }
-        */
-      display: block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
+@media screen and (max-width: 62em) {
 
-      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;
+  :is(iam-nav,.iam-nav) details {
 
-      &:after {
-        content: '\f055';
-        display: block;
-        font-size: 1.5rem;
-        font-weight: 300;
-        position: absolute;
-        top: 1.5rem;
-        right: 1.5rem;
-        font-family: var(--fa-family-classic);
-        line-height: 1em;
-      }
-    }
+    @include mobileMenu();
+  }
 
-    &[open] > summary:after {
-      content: '\f056';
-      font-weight: bold;
+  /* secondary menus */
+  :is(iam-nav,.iam-nav) > details[slot="secondary"] {
+    
+    background-color: transparent;
+
+    summary {
+      background-color: transparent;
     }
+  }
 
-    a {
-      text-decoration: none;
-      display: block;
-      border: none;
-      color: var(--colour-link);
-      margin: 0;
-      margin-left: 3rem!important;
-      padding: 1.5rem 0 1.5rem 0;
-      font-size: 1rem;
-      line-height: 1.5rem;
-      min-height: 1.5rem;
-      position: relative;
-      font-weight: normal;
+  /* sub menus */
+  :is(iam-nav,.iam-nav) {
+    --mobDetails: 'true';
 
-      &:after {
-        background: var(--colour-border) !important;
-        top: calc(100% - 2px) !important;
-        width: 100% !important;
-      }
-    }
+    
+    details .section [data-title].section-title {
 
-    /*  Hide cards */
-    a:has(iam-card) {
-      display: none !important;
+      color: var(--colour-body) !important;
+      font-size: 1rem;
+      font-weight: normal;
+      font-weight: normal;
     }
 
-    > div .lead {
+    details > div .lead {
 
       padding: 1rem 0 0 3rem!important;
     }
 
-    > div a:last-child {
+    details > div a:last-child {
       margin-bottom: 0 !important;
     }
 
-    > div a:last-child:after {
+    details > div a:last-child:after {
       display: none;
     }
 
-    &: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;
-    }
-
-    /* secondary nav */
-
-    &[slot="secondary"] {
-      background-color: transparent;
-
-      summary {
-        background-color: transparent;
-      }
+    /*  Hide cards */
+    details a:has(iam-card) {
+      display: none !important;
     }
-  }
-}
-@media screen and (max-width: 62em) {
-
-  :is(iam-nav,.iam-nav) details {
-
-    background-color: #eeeeee;
-  }
-  :is(iam-nav,.iam-nav) {
-    --mobDetails: 'true';
-
     /*  Sub details */
     details details {
       &:after {
@@ -385,10 +381,35 @@ body[data-direction='down'].past100 nav:has(.nav--sticky) .nav--sticky{
 
 /* #endregion */
 
+/* maintain the mobile mega menu for the account menu on desktop */
+:is(iam-nav,.iam-nav) > details[slot="account"] {
+
+  
+  @include mobileMenu();
+
+  @media screen and (min-width: 36em) {
+    padding-right: 2.5rem;
+    margin-right: -2.5rem;
+
+    &:after {
+      width: calc(100% - 4rem);
+    }
+
+    summary {
+      padding-right: 2.5rem;
+      margin-right: -2.5rem;
+
+      &:after {
+        right: 2.5rem;
+      }
+    }
+  }
+}
+
+
 /* #region Desktop mega menu */
 @media screen and (min-width: 62em) {
-  :is(iam-nav,.iam-nav) > details:not([slot="secondary"]),
-  :is(iam-nav,.iam-nav) *:not(.nav--menu) > details:not([slot="secondary"]) {
+  :is(iam-nav,.iam-nav) > details:not([slot="secondary"]):not([slot="account"]) {
     width: auto;
 
     > summary {

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

@@ -72,7 +72,7 @@
     display: none;
 
     &:not(:hover, :focus) {
-      border-color: transparent!important;
+      outline-color: transparent!important;
       background-color: transparent!important;
     }
   }

package/assets/sass/elements/buttons--global.css

@@ -51,9 +51,12 @@
       background 0.5s,
       color 0.5s;
     height: auto;
-    max-width: fit-content;
+    width: fit-content;
+    max-width: 100%;
     appearance: none;
     white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     @media screen and (min-width: 36em) {
       --btn-margin: 1.5rem;

package/assets/sass/templates/auth.scss

@@ -10,14 +10,11 @@
     flex-direction: row;
     justify-content: center;
     background-color: var(--colour-canvas-2);
-  }
 
-  .template--auth {
-    --padding-top: 1.5rem;
+        --padding-top: 1.5rem;
     --brand-size: 2.25rem;
 
-    display: flex;
-    flex-wrap: wrap;
+    //flex-wrap: wrap;
     max-width: 80rem;
     margin-inline: auto;
 
@@ -26,81 +23,84 @@
       --brand-size: 4rem;
     }
 
-    main {
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-      padding-top: var(--padding-top);
-      padding-bottom: var(--padding-top);
-      padding-inline: var(--container-padding-x);
-
-      @media screen and (min-width: 62em) {
-        flex: 0 0 auto;
-        width: 43.75%;
-        padding-inline-end: calc(var(--container-padding-x) - 1rem);
-      }
+  }
 
-      .brand {
-        font-size: var(--brand-size);
-        padding-top: 0;
-      }
+  .template--auth {
+
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    padding-top: var(--padding-top);
+    padding-bottom: var(--padding-top);
+    padding-inline: var(--container-padding-x);
+
+    @media screen and (min-width: 62em) {
+      flex: 0 0 auto;
+      width: 43.75%;
+      padding-inline-end: calc(var(--container-padding-x) - 1rem);
+    }
+
+    .brand {
+      font-size: var(--brand-size);
+      padding-top: 0;
     }
+  }
 
-    aside {
-      display: none;
-      background-color: var(--colour-primary-theme);
+  body:has(.template--auth) aside {
+    display: none;
+    //background-color: var(--colour-primary-theme);
 
-      @media screen and (min-width: 62em) {
-        display: block;
-        flex: 0 0 auto;
-        width: 56.25%;
-        padding-inline: var(--container-padding-x) !important;
-        padding-block: var(--padding-top);
-        position: relative;
-        overflow: hidden;
-      }
+    @media screen and (min-width: 62em) {
+      display: block;
+      flex: 0 0 auto;
+      width: 56.25%;
+      padding-inline: var(--container-padding-x) !important;
+      padding-block: var(--padding-top);
+      position: relative;
+      overflow: hidden;
+    }
 
-      > figure {
-        position: relative;
+    > figure {
+      position: relative;
+      display: block;
+      margin-top: calc(var(--padding-top) * -1);
+      margin-inline: calc(var(--container-padding-x) * -1);
+      min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
+      margin-bottom: 2.5rem;
+      max-height: 25rem; /* 400 */
+      clip-path: ellipse(70% 80% at 50% 20%);
+      rotate: -5deg;
+
+      &:after {
+        content: '';
+        position: absolute;
         display: block;
-        margin-top: calc(var(--padding-top) * -1);
-        margin-inline: calc(var(--container-padding-x) * -1);
-        min-width: calc(100% + var(--container-padding-x) + var(--container-padding-x));
-        margin-bottom: 2.5rem;
-        max-height: 25rem; /* 400 */
-        clip-path: ellipse(70% 80% at 50% 20%);
-        rotate: -5deg;
 
-        &:after {
-          content: '';
-          position: absolute;
-          display: block;
-
-          right: -2rem;
-          left: -2rem;
-          bottom: -1rem;
-          height: 50%;
-
-          rotate: -5deg;
-          background: linear-gradient(
-            0deg,
-            rgba(0, 49, 60, 1) 0%,
-            rgba(28, 182, 226, 0.45) 40%,
-            rgba(28, 182, 226, 0) 100%
-          );
-          opacity: 0.9;
-        }
-      }
+        right: -2rem;
+        left: -2rem;
+        bottom: -1rem;
+        height: 50%;
 
-      img {
-        margin-inline: -1.5rem;
-        min-width: calc(100% + 1.5rem + 1.5rem);
-        margin-top: -0.75rem;
-        max-height: 26.5rem;
-        object-fit: cover;
-        object-position: 50% 50%;
-        rotate: 5deg;
+        rotate: -5deg;
+        background: linear-gradient(
+          0deg,
+          rgba(0, 49, 60, 1) 0%,
+          rgba(28, 182, 226, 0.45) 40%,
+          rgba(28, 182, 226, 0) 100%
+        );
+        opacity: 0.9;
       }
     }
+
+    img {
+      margin-inline: -1.5rem;
+      min-width: calc(100% + 1.5rem + 1.5rem);
+      margin-top: -0.75rem;
+      max-height: 26.5rem;
+      object-fit: cover;
+      object-position: 50% 50%;
+      rotate: 5deg;
+    }
   }
+
 }

package/assets/ts/components/multiselect/multiselect.component.ts

@@ -131,7 +131,10 @@ class iamMultiselect extends HTMLElement {
 
     search.addEventListener('input', () => {
 
-      if (multiselect.hasAttribute('data-url') && search.value.length == minLength) {
+      if(multiselect.hasAttribute('data-url') && search.value.length == 0){
+
+        search.innerHTML = '';
+      } else if (multiselect.hasAttribute('data-url') && search.value.length == minLength) {
 
         searchAjax(multiselect, search, filterList);
       } else {
@@ -205,7 +208,7 @@ class iamMultiselect extends HTMLElement {
         }
         else{
 
-          multiselect.classList.remove('hover');
+          //multiselect.classList.remove('hover');
         }
       }
     });

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

@@ -22,7 +22,18 @@ class iamSTDNav extends HTMLElement {
 <a href="https://my.iamproperty.com/ic/dashboard" slot="secondary">movebutler</a>
 <a href="https://my.iamproperty.com/auction" slot="secondary">iamsold</a>`;
 
-        document.querySelector(`a[href*='${window.location.hostname}'][slot="secondary"]`)?.classList.add('selected');
+        nav.querySelector(`a[href*='${window.location.hostname}'][slot="secondary"]`)?.classList.add('selected');
+
+        /* For local environments */
+        if(this.hasAttribute('data-product') && this.getAttribute('data-product') == "movebutler")
+          nav.querySelector(`a[href='https://my.iamproperty.com/ic/dashboard'][slot="secondary"]`)?.classList.add('selected');
+
+        if(this.hasAttribute('data-product') && this.getAttribute('data-product') == "crm")
+          nav.querySelector(`a[href='https://crm.iamproperty.com/MyDay'][slot="secondary"]`)?.classList.add('selected');
+
+        if(this.hasAttribute('data-product') && this.getAttribute('data-product') == "iamsold")
+          nav.querySelector(`a[href='https://my.iamproperty.com/auction'][slot="secondary"]`)?.classList.add('selected');
+
       }
       return;
     }

package/assets/ts/modules/dropdown.ts

@@ -59,6 +59,7 @@ export const searchAjax = async (component, search, callback): any => {
       .then((response) => {
 
         let items = '';
+        component.innerHTML = '';
 
         for (let i = 0; i < response['data'].length; i++) {
 
@@ -67,7 +68,7 @@ export const searchAjax = async (component, search, callback): any => {
         }
 
         component.insertAdjacentHTML('beforeend', `${items}`);
-        
+
         callback(component, search);
         return response;
       });
@@ -93,7 +94,7 @@ export const setTag = (tag):void => {
   if(!tags.includes(tag.textContent)){
 
     tags.push(tag.textContent);
-    
+
     localStorage.setItem('tags-'+inputName,JSON.stringify(tags));
   }
 

package/assets/ts/modules/nav.ts

@@ -230,6 +230,10 @@ export const megaMenusEvents = (component,menu,menuButton,accountMenu,accountMen
       const summary = event.target.closest('summary');
       const details = summary.closest('details');
 
+      if(details.hasAttribute('slot') && details.getAttribute('slot') == "account"){
+        return false;
+      }
+
       if (window.innerWidth > 992 && !event.target.closest('.nav--menu')) {