@iamproperty/components 7.6.4--beta7 → 7.7.0

package/assets/sass/templates/auth.scss

@@ -14,16 +14,16 @@
 
   .template--auth {
     --padding-top: 1.5rem;
-    --brand-size: #{rem(36)};
+    --brand-size: 2.25rem;
 
     display: flex;
     flex-wrap: wrap;
-    max-width: rem(1280);
+    max-width: 80rem;
     margin-inline: auto;
 
     @media screen and (min-width: 62em) {
       --padding-top: 2.5rem;
-      --brand-size: #{rem(64)};
+      --brand-size: 4rem;
     }
 
     main {
@@ -67,7 +67,7 @@
         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: rem(400);
+        max-height: 25rem; /* 400 */
         clip-path: ellipse(70% 80% at 50% 20%);
         rotate: -5deg;
 
@@ -93,10 +93,10 @@
       }
 
       img {
-        margin-inline: rem(-24);
+        margin-inline: -1.5rem;
         min-width: calc(100% + 1.5rem + 1.5rem);
-        margin-top: rem(-12);
-        max-height: rem(424);
+        margin-top: -0.75rem;
+        max-height: 26.5rem;
         object-fit: cover;
         object-position: 50% 50%;
         rotate: 5deg;

package/assets/sass/templates/form.scss

@@ -13,21 +13,21 @@
   }
 
   .template--form {
-    --input-max-width: #{rem(450)};
-    --select-max-width: #{rem(500)};
+    --input-max-width: 28.125rem;
+    --select-max-width: 31.25rem
 
     .container {
 
-      max-width: #{rem(1280)} !important;
+      max-width: 80rem !important;
     }
 
     @supports selector(:has(*)) {
       label:has(> :is(.suffix, .prefix)) {
-        --input-max-width: #{rem(500)};
+        --input-max-width: 31.25rem
         max-width: var(--input-max-width);
       }
       div:has(> :is(.suffix, .prefix)) {
-        --input-max-width: #{rem(500)};
+        --input-max-width: 31.25rem
         max-width: var(--input-max-width);
       }
     }
@@ -64,9 +64,9 @@
 
     @media screen and (min-width: 62em) {
       .form-panel {
-        max-width: rem(924); // Guess
+        max-width: 57.75rem; /* 924 */  // Guess
         border-radius: 0.5rem;
-        padding-inline: rem(94);
+        padding-inline: 5.875rem;
         padding-block: 2.5rem;
         margin-bottom: 2rem;
       }
@@ -80,7 +80,7 @@
     @media screen and (min-width: 62em) {
       .container--form {
         padding-inline: 0;
-        max-width: rem(924) !important;
+        max-width: 57.75rem !important;
       }
 
       .form-panel .btn__group {

package/assets/sass/utilities/border.scss

@@ -59,23 +59,11 @@
     --border-width: 5px;
   }
 
-  .border-opacity-10 {
-    --border-opacity: 0.1;
-  }
-
-  .border-opacity-25 {
-    --border-opacity: 0.25;
-  }
-
-  .border-opacity-50 {
-    --border-opacity: 0.5;
-  }
-
-  .border-opacity-75 {
-    --border-opacity: 0.75;
-  }
-
-  .border-opacity-100 {
-    --border-opacity: 1;
+  .border-gradient {
+    
+    
+    background: linear-gradient(white, white) padding-box, linear-gradient(to right, var(--colour-primary-theme), var(--colour-info)) border-box;
+    //border-radius: 50em;
+    border: var(--border-width) solid transparent;
   }
 }

package/assets/sass/utilities/font-awesome-iso-fallbacks.scss

@@ -35,4 +35,10 @@
   .fa-edit {
     --iso: '\270e';
   }
+  .fa-envelope {
+    --iso: '\2709';
+  }
+  .fa-calendar {
+    --iso: '\2636';
+  }
 }

package/assets/sass/utilities/shadow.scss

@@ -0,0 +1,7 @@
+// #region no shadow
+@layer utilities {
+  .shadow-none {
+    box-shadow: none!important;
+  }
+}
+// #endregion

package/assets/sass/utilities/wider-colours.scss

@@ -3,8 +3,6 @@
     .wider-colour-#{$i} {
       --colour: var(--wider-colour-#{$i} );
       --wider-colour: var(--wider-colour-#{$i} );
-      --wider-colour-hover: var(--wider-colour-#{$i}-hover);
-      --wider-colour-active: var(--wider-colour-#{$i}-active);
       color: #262626 !important;
     }
   }

package/assets/ts/components/actionbar/actionbar.component.ts

@@ -54,7 +54,7 @@ class iamActionbar extends HTMLElement {
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
       <div class="actionbar" part="actionbar">
@@ -208,20 +208,20 @@ class iamActionbar extends HTMLElement {
       const viewList = this.getAttribute('data-switchviews')?.split(',');
 
       viewList?.forEach((view) => {
-        let icon = 'fa-grid-2';
+        let icon = 'fa-grid';
 
-        if (view == 'list') icon = 'fa-grip-lines';
-        else if (view == 'small') icon = 'fa-bars';
+        if (view == 'list') icon = 'fa-list';
+        else if (view == 'small') icon = 'fa-table';
 
-        btns += `<button class="btn btn-action btn-compact btn-sm mb-0 fa-regular ${icon}">${view}</button>`;
+        btns += `<button class="tag tag--toggle mb-0" data-view="${view}"><i class="fa-regular ${icon} m-0"></i><span class="visually-hidden">${view}</span></button>`;
       });
 
       actionbarWrapper?.insertAdjacentHTML('afterbegin', `<div class="views m-0">${btns}</div>`);
       const views = this.shadowRoot?.querySelector('.views');
 
       views?.addEventListener('click', (event) => {
-        if (event && event.target instanceof HTMLElement && event.target.closest('.btn-action')) {
-          const btn = event.target.closest('.btn-action');
+        if (event && event.target instanceof HTMLElement && event.target.closest('.tag--toggle')) {
+          const btn = event.target.closest('.tag--toggle');
 
           this.setAttribute('data-view', btn.textContent);
 
@@ -249,6 +249,7 @@ class iamActionbar extends HTMLElement {
       if (event && event.target instanceof HTMLElement && event.target.closest('button[data-search]')) {
         searchBar.classList.toggle('show');
         searchBtn.toggleAttribute('aria-expanded');
+        searchInput.focus();
       }
     });
 

package/assets/ts/components/address-lookup/address-lookup.component.ts

@@ -31,7 +31,7 @@ class iamAddressLookup extends HTMLElement {
     ${loadCSS}
 
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <div class="wrapper">
 
       <div class="matched d-none">
@@ -315,12 +315,27 @@ class iamAddressLookup extends HTMLElement {
             addresses.forEach((address) => {
               // Deal with agent platform response
               if (typeof address.attributes == 'object' && address.attributes.label) {
+                const attributes = {};
+
                 if (address.id) address.attributes.id = address.id;
 
                 if (address.relationships)
                   address.attributes = Object.assign(address.attributes, address.relationships);
 
-                const values = JSON.stringify(address.attributes);
+                Object.keys(address.attributes).forEach((key) => {
+
+                  const attribute = address.attributes[key];
+
+                  if(typeof attribute == 'object'){
+                    attributes[key] = attribute?.id;
+                  }
+                  else {
+                    attributes[key] = attribute;
+                  }
+                });
+
+                const values = JSON.stringify(attributes);
+
                 listString += `<option data-values='${values}' >${address.attributes.label}</option>`;
               } else if (typeof address.value == 'object') {
                 if (address.id) address.attributes.id = address.id;

package/assets/ts/components/advanced-select/advanced-select.component.ts

@@ -37,7 +37,7 @@ class iamAdvancedSelect extends HTMLElement {
       display: none !important;
     }
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
     <slot></slot>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));

package/assets/ts/components/collapsible-side/collapsible-side.component.ts

@@ -21,7 +21,7 @@ class iamCollapsibleSideMenu extends HTMLElement {
     <style class="styles">
     ${loadCSS}
     </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
       <div class="container" part="container">
 
         <div class="side-menu" part="side-menu">