@iamproperty/components 7.6.4--beta6 → 7.6.4--beta8

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

@@ -19,6 +19,159 @@ $selector: 'iam-table, iam-table-basic, iam-table-no-submit, iam-table-submit, i
 }
 
 
+:is(#{$selector}) iam-actionbar {
+  margin: 0 1.5rem 1rem 1.5rem;
+
+  @container (width < 23.4375em) {
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+  }
+}
+:is(#{$selector}).table--fullwidth:has(iam-actionbar) {
+  padding-top: 0;
+}
+:is(#{$selector}).table--fullwidth iam-actionbar {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+:is(#{$selector}).table--fullwidth iam-actionbar:has(+ table input:checked) {
+  margin: -2rem -2rem 2rem -2rem;
+  box-shadow: none;
+  border-radius: 0;
+}
+
+// Actionbar
+.actionbar__sticky-wrapper {
+  container-type: inline-size;
+
+  @container (width < 23.4375em) {
+    padding: 0 !important;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}):is(.actionbar__sticky-wrapper) > .actionbar__sticky {
+    display: block;
+    position: sticky;
+    left: 0;
+    top: calc(var(--sticky-padding) + #{rem(16)});
+    z-index: var(--index-menu);
+    pointer-events: none;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 100%;
+      height: calc(100vh - #{rem(68 + 24 + 16)});
+      pointer-events: none;
+    }
+
+    & + * {
+      margin-top: calc(-100vh - -6.75rem);
+    }
+  }
+
+  :is(#{$selector}):is(.actionbar__sticky) > iam-actionbar {
+    pointer-events: all !important;
+    display: block;
+    border: none;
+    background: var(--colour-canvas-2);
+    //box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    border-radius: 0.5rem;
+    margin-bottom: rem(24);
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}).table--fullwidth iam-actionbar,
+  :is(#{$selector}) iam-actionbar {
+    margin-left: -2rem;
+    margin-right: -2rem;
+    margin-top: -2rem;
+    margin-bottom: 2rem;
+  }
+}
+// #endregion
+
+// #region Table with actionbar
+
+:is(#{$selector}) {
+  input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+    padding-left: 0 !important;
+    margin: 0 !important;
+
+    &:before,
+    &:after {
+      top: 0.75rem !important;
+      left: 0.25rem !important;
+      --border-radius: 0.25rem;
+    }
+  }
+
+  &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+    .td--fixed [type='checkbox'] {
+      width: 100vw;
+      height: 100%;
+      max-height: var(--row-height);
+      max-width: 100vw;
+      cursor: pointer;
+      pointer-events: all;
+      top: auto;
+      margin: 0;
+      margin-top: 0rem;
+    }
+  }
+
+  @container (width > 23.4375em) {
+    tr:has([type='checkbox']:checked) {
+      height: calc(4.625rem - 2px);
+    }
+  }
+
+  tr:has([type='checkbox']:hover, [type='checkbox']:focus) {
+    --row-bg: #eeeeee;
+  }
+  tr:has([type='checkbox']:hover:checked, [type='checkbox']:focus:checked, [type='checkbox']:checked) {
+    --row-bg: #e0e0e0;
+  }
+}
+
+@container (width < 23.4375em) {
+  :is(#{$selector}) {
+    iam-actionbar {
+
+    }
+    .actionbar__sticky + * {
+      margin-top: 0 !important;
+    }
+  }
+
+  :is(#{$selector}) {
+    input:is([type='radio'], [type='checkbox']) + label:not(.radio--tick) {
+      padding-left: 0 !important;
+      margin: 0 !important;
+      min-height: 2rem;
+
+      &:before,
+      &:after {
+        top: 0.25rem !important;
+        left: 0 !important;
+      }
+    }
+
+    &:has([type='checkbox']:checked) tr:has([type='checkbox']) {
+      [type='checkbox'] {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        max-width: 100%;
+        margin-top: -2rem;
+      }
+    }
+  }
+}
 // #endregion
 
 // #region Expandable tables

package/assets/sass/elements/button__group.css

@@ -8,6 +8,17 @@
     reading-flow: source-order;
     margin-bottom: 1.5rem;
 
+    .btn-compact {
+
+      max-width: fit-content;
+      margin-inline: auto;
+    }
+
+  }
+  :where(.btn__group, iam-modal) {
+    
+    reading-flow: source-order;
+    
     .btn {
       margin-inline-end: 0;
       width: 100%;
@@ -15,6 +26,10 @@
       text-align: center;
       white-space: normal;
       margin: 0;
+
+      &:not(:last-child) {
+        margin-right: 0;
+      }
     }
 
     .btn-tertiary {
@@ -30,14 +45,15 @@
     .btn-primary {
       order: 1;
       reading-order: 1;
-    }
-
-    .btn-compact {
+      margin: 0;
 
-      max-width: fit-content;
-      margin-inline: auto;
+      &:not(:last-child) {
+        
+        margin: 0;
+      }
     }
   }
+
   :is(iam-form,form) .btn__group{
     padding-top: 1rem;
   }
@@ -48,35 +64,60 @@
       gap: var(--gap);
       flex-wrap: wrap;
 
-      .btn {
-          
-        max-width: fit-content;
-        white-space: nowrap;
-        margin-block: auto;
-      }
-
-      
       .btn-tertiary {
         max-width: fit-content;
         margin-inline: 0;
         margin-block: auto;
         order: 1;
-        reading-order: 1;
       }
       .btn-secondary {
         order: 2;
-        reading-order: 2;
       }
       .btn-primary {
         order: 3;
-        reading-order: 3;
       }
+
       .btn-compact {
         
         margin-inline: 0;
         margin-block: auto;
       }
     }
+    :where(iam-modal, .btn__group) {
+
+      .btn {
+        max-width: fit-content;
+        white-space: nowrap;
+        margin-block: auto;
+      }
+    }
+    .btn__group {
+      
+      .btn-tertiary {
+        reading-order: 1;
+      }
+      .btn-secondary {
+        reading-order: 2;
+      }
+      .btn-primary {
+        reading-order: 3;
+      }
+    }
+    iam-modal {
+      
+      .btn-tertiary {
+        reading-order: 3;
+        order: 1;
+      }
+      .btn-secondary {
+        order: 2;
+        reading-order: 2;
+      }
+      .btn-primary {
+        order: 3;
+        reading-order: 1;
+      }
+    }
     .btn__group.text-end {
       justify-content: flex-end;
     }

package/assets/sass/elements/buttons--compact.scss

@@ -21,8 +21,8 @@
     min-height: var(--compact-size) !important;
     max-height: var(--compact-size) !important;
 
-        align-content: center;
-        line-height: 1 !important;
+    align-content: center;
+    line-height: 1 !important;
 
     text-indent: -500px;
     overflow: hidden;

package/assets/sass/elements/buttons--special.scss

@@ -15,7 +15,7 @@
       content: '';
 
       display: inline-block;
-      margin-right: -0.5em;
+      margin-right: 0.25em;
       margin-left: 1em;
 
       height: 0.8em;

package/assets/sass/elements/label.scss

@@ -13,5 +13,9 @@
       
       margin-top: 0.25rem!important;
     }
+
+    &.label--sm {
+      --input-max-width: 15rem;
+    }
   }
 }

package/assets/sass/elements/progress.scss

@@ -46,11 +46,11 @@
 
   progress::-webkit-progress-bar {
     background-color: var(--colour-light);
-    border-radius: rem(5);
+    border-radius: var(--border-radius, #{rem(5)});
   }
   progress::-webkit-progress-value {
     background-color: var(--colour, var(--colour-info));
-    border-radius: rem(5);
+    border-radius: var(--border-radius, #{rem(5)});
   }
 
   // #region inline progress

package/assets/sass/foundations/root.scss

@@ -75,10 +75,6 @@
 
     --colour-inverted: #fcfcfc;
 
-    --colour-notification-bg: light-dark(#e9f9fd,var(--colour-canvas-2));
-    --colour-notification-warning-bg: light-dark(#fff6e6,var(--colour-canvas-2));
-    --colour-notification-danger-bg: light-dark(#fcebec,var(--colour-canvas-2));
-    --colour-notification-success-bg: light-dark(#f8fdf6,var(--colour-canvas-2));
     /* #endregion */
     /* #region Wider colours */
     --wider-colour-1: #EEEEEE;

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

@@ -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

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