@iamproperty/components 5.6.1-beta8 → 5.7.0

package/assets/sass/_components.scss

@@ -80,4 +80,18 @@ iam-table {
       --row-bg: #000000;
     }
   }
+}
+
+iam-pagination {
+  --pagination-link-color: var(--colour-light);
+  --pagination-link-color-active: #E0E0E0;
+}
+
+iam-fileupload::part(file) {
+  @include dark-mode() {
+
+    background: var(--colour-canvas-2);
+    border-color: var(--colour-canvas-2);
+    color: var(--colour-body);
+  }
 }

package/assets/sass/components/address-lookup.scss

@@ -7,6 +7,10 @@ input[name="postcode"] {
   border-color: var(--error-border,var(--colour-primary))!important;
 }
 
+:is([name="postcode"]):is(:focus,.focus):not(:disabled) {
+  border-color: var(--colour-info)!important;
+}
+
 div:has(input[name="postcode"]) .suffix {
 
   border-color: var(--error-border,var(--colour-primary))!important;

package/assets/sass/components/carousel.scss

@@ -130,18 +130,39 @@
 
 // #region carousel controls/pips
 .carousel .carousel__controls {
-
-  text-align: center;
-  width: 10rem;
-  max-height: 1rem;
   overflow: hidden;
   margin-inline: auto;
     
+  &:not(.thumbnails){
+    text-align: center;
+    max-width: 30rem;
+  }
+
+  &.thumbnails {
+    margin-block-start: 2rem;
+  }
+
   @include media-breakpoint-up(sm) {
     width: 100%;
   }
 
   button {
+    padding: 0;
+    margin: 0 0.2rem 0.2rem;
+    border: 3px solid var(--colour-canvas);
+    border-radius: 4px;
+
+    &.has-thumbnail {
+      height: 4.625rem;
+
+      img {
+        height: 100%;
+        width: auto;
+      }
+    }
+  }
+
+  button:not(.has-thumbnail) {
     width: 1rem;
     height: 1rem;
     min-height: 1rem;
@@ -149,10 +170,9 @@
     text-indent: -50rem;
     overflow: hidden;
     background: var(--colour-primary-theme);
-    padding: 0;
     margin: 0 0.5rem 0.5rem 0.5rem;
     border: none;
-
+    
     &:before {
       display: none;
     }
@@ -164,8 +184,12 @@
 }
 
 .carousel__controls > button[aria-current] {
+  --colour-active-thumbnail: var(--colour-info); 
+  border-color: var(--colour-active-thumbnail);
 
-  background: var(--colour-success);
+  &:not(.has-thumbnail) {
+    background: var(--colour-success);
+  }
 }
 
 // #endregion

package/assets/sass/components/fileupload.scss

@@ -50,16 +50,6 @@
     max-width: rem(400)!important;
     position: relative;
 
-
-
-    
-    @include dark-mode() {
-
-      background: var(--colour-canvas-2);
-      border-color: var(--colour-canvas-2);
-      color: var(--colour-body);
-    }
-
     
     @media (forced-colors: active) {
 

package/assets/sass/components/pagination.scss

@@ -35,15 +35,18 @@
   padding-inline: 1rem;
   
   .select--minimal {
-    --select-padding-left: rem(16);
-    height: rem(52);
-    line-height: rem(52);
+    height: calc(3.25rem - 1em);
+    line-height: calc(3.25rem - 1em);
     margin-left: rem(-16);
     font-weight: bold;
   }
 
   div:has(> select){
     margin-bottom: 0;
+    
+    &:after {
+      top: 50%;
+    }
   }
 }
 
@@ -118,7 +121,7 @@
   display: none;
   background: none;
   padding-inline: 1rem;
-
+  color: var(--colour-body);
   
   @include container-up(sm) {
 
@@ -134,21 +137,13 @@
   }
 
   &:is(:hover,:focus):not(:disabled){
-    background-color: var(--colour-light);
+    background-color: var(--pagination-link-color);
+    color: var(--colour-hover);
   }
 
   &:is(:active):not(:disabled){
-    background-color: #E0E0E0;
-  }
-
-  @include dark-mode(){
-    &:is(:hover,:focus):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
-  
-    &:is(:active):not(:disabled){
-      background-color: var(--colour-canvas);
-    }
+    background-color: var(--pagination-link-color);
+    color: var(--colour-active);
   }
 
   &:disabled {

package/assets/sass/components/tabs.scss

@@ -1,5 +1,32 @@
 @use "../_func" as *;
 
+*:has(> iam-tabs){
+  
+  container-type: inline-size;
+}
+
+iam-tabs {
+  details:not([open]) {
+    padding-bottom: 0;
+  }
+}
+
+iam-tabs::part(next-button) {
+  display: none;
+}
+
+iam-tabs.tabs--guided::part(next-button) {
+  @container (width > 62em) {
+    position: absolute;
+    top: rem(150);
+    right: 0;
+    display: block;
+  }
+}
+iam-tabs.tabs--guided::part(next-button):not(:hover) {
+  background: var(--colour-success);
+}
+
 .tabs:not(.admin-panel) {
   position: relative;
 
@@ -12,11 +39,11 @@
       display: block;
       position: absolute;
       left: auto;
-      right: -2.5rem;
+      right: -1.5rem;
       top: 0;
       bottom: 1px;
       width: 2.5rem;
-      background: var(--tabs-gradient, linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1)));
+      background: var(--tabs-gradient, linear-gradient(90deg, color(from var(--colour-canvas) a98-rgb r g b / 0), color(from var(--colour-canvas) a98-rgb r g b / 1)));
       z-index: 1000;
       pointer-events: none;
     }
@@ -44,6 +71,12 @@
   }
 }
 
+
+.tabs__links {
+  
+  scroll-snap-type: x mandatory;
+}
+
 .tabs__links {
   padding-bottom: 3px;
   position: relative;
@@ -51,7 +84,7 @@
   flex-wrap: nowrap;
   width: auto;
   margin: 0 -1.5rem;
-  overflow-y: hidden;
+  overflow-y: clip;
   overflow-x: auto;
   
   &::-webkit-scrollbar {
@@ -60,6 +93,8 @@
 
   .link {
     white-space: nowrap;
+    scroll-snap-align: start;
+    scroll-margin-left: var(--container-padding);
   }
 
   .link:not(.text-decoration-none):not(.btn) {

package/assets/sass/elements/admin-panel.scss

@@ -28,7 +28,8 @@
     display: none;
   }
 
-  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child {
+
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .admin-panel__heading):first-child {
     
     --gradient-direction: -90deg!important;
     background-color:var(--colour-success);
@@ -37,17 +38,54 @@
       color: var(--colour-primary-theme);
       background-image: linear-gradient(var(--gradient-direction),  var(--colour-info) 0, transparent 100%);
     }
-    
-    font-size: rem(18);
-    line-height: rem(24);
-    font-weight: bold;
-    padding: rem(16) var(--padding-x);
+  
     margin: calc(var(--padding-top) * -1) calc(var(--padding-x) * -1) var(--padding-top) calc(var(--padding-x) * -1);
     display: block;
     border-top-left-radius: rem(8);
     border-top-right-radius: rem(8);
   }
 
+  > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):first-child,
+  .admin-panel__heading > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
+    font-size: rem(18);
+    line-height: rem(24);
+    font-weight: bold;
+    padding: rem(16) var(--padding-x);
+  }
+
+  > :is(.admin-panel__heading):first-child {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    padding: rem(16) var(--padding-x);
+
+    > :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) {
+      padding: 0;
+      margin-inline-end: auto;
+    }
+
+    .btn {
+      --btn-margin: 0;
+    }
+
+    .dialog__wrapper + .btn {
+      --btn-margin: 0.25rem;
+      margin-inline-end: 0;
+    }
+
+    @media (prefers-color-scheme: light) {
+      .btn-action,
+      .dialog__wrapper {
+        --colour-canvas-2: #FFFFFF;
+        --colour-heading: var(--colour-primary);
+        --colour-btn-action-hover-bg: var(--colour-light);
+        --colour-btn-hover: var(--colour-primary);
+        --colour-border: #D8D8D8;
+      }
+    }
+  }
+
   :is(iam-table, .iam-table) {
     margin: 0 0 rem(32) 0;
     padding: 0;

package/assets/sass/elements/dialog.scss

@@ -12,7 +12,7 @@ dialog[open] {
   --dialog-padding: #{rem(24)};
 
   --mh-padding-inline: var(--dialog-padding);
-
+  color: inherit;
   width: fit-content;
   height: fit-content;  
   border: none;

package/assets/sass/elements/forms.scss

@@ -83,7 +83,8 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
 }
 
 textarea {
-  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * 3) + 4px)!important;
+  --textarea-height-scale: 3;
+  min-height: calc(var(--input-padding-block, #{rem(12)}) + var(--input-padding-block, #{rem(12)}) + (var(--input-lh, #{rem(20)}) * var(--textarea-height-scale)) + 4px)!important;
 }
 // #endregion
 
@@ -343,7 +344,7 @@ div:has(> label:first-child):has(> input):has(> :is(.form-control-inline,.input-
 
 // #region word counter
 
-input[maxlength] + span {
+:is(input,textarea)[maxlength] + span {
 
   position: relative;
 

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

@@ -57,19 +57,19 @@ class iamActionbar extends HTMLElement {
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="actionbar__wrapper">
     
-      <div class="actionbar">
+      <div class="actionbar" part="actionbar">
         <slot name="selectall"></slot>
         <div class="safe-area">
           <slot></slot>
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="overflow">
                 <slot name="overflow"></slot>
                 <slot name="menu"></slot>
               </dialog>
             </div>
-            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="">Search</button>
+            <button class="btn btn-secondary btn-compact btn-sm fa-search" data-search="" part="search-btn">Search</button>
           </div>
         </div>
       </div>
@@ -79,7 +79,7 @@ class iamActionbar extends HTMLElement {
           <div class="body">
             <div class="dialog__wrapper dialog__wrapper--right dialog-overflow d-none show">
               <button class="btn btn-secondary btn-compact fa-ellipsis-vertical m-0">More actions</button>
-              <dialog class="dialog--list">
+              <dialog class="dialog--list" part="selected-overflow">
                 <slot name="selected-overflow"></slot>
               </dialog>
             </div>
@@ -89,10 +89,10 @@ class iamActionbar extends HTMLElement {
       <div class="actionbar--search">
         <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
 
-        <div class="search-wrapper">
+        <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>
-          <button class="suffix"><i class="fa-regular fa-search"></i></button>
-          <input type="text" id="search" name="search" required="">
+          <button class="suffix" part="search-btn"><i class="fa-regular fa-search"></i></button>
+          <input type="text" id="search" name="search" required="" part="search-input">
         </div>
 
       </div>

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

@@ -48,6 +48,7 @@ class iamAddressLookup extends HTMLElement {
       <div class="manual-address pb-2 js-hide">
         <slot></slot>
         <button class="btn btn-tertiary switch-to-lookup-btn" type="button">Use postcode lookup</button>
+        <slot name="after"></slot>
       </div>
       <div class="pre-filled pb-2 js-hide">
         <strong class="title text-primary d-block"></strong>
@@ -60,6 +61,7 @@ class iamAddressLookup extends HTMLElement {
 
 	async connectedCallback() {
 
+    const component = this;
     const wrapper = this.shadowRoot.querySelector('.wrapper');
     const lookup = this.shadowRoot.querySelector('[name="postcode"]');
     const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
@@ -202,14 +204,19 @@ class iamAddressLookup extends HTMLElement {
           Object.keys(values).forEach((key, index) => {
 
             let value = values[key];
-            if(this.querySelector(`[data-name="${key}"]`))
+            if(this.querySelector(`[data-name="${key}"]`) && value != '')
               this.querySelector(`[data-name="${key}"]`).value = value;
-            else if(this.querySelector(`[name="${key}"]`))
+            else if(this.querySelector(`[data-name-alt="${key}"]`) && value != '')
+              this.querySelector(`[data-name-alt="${key}"]`).value = value;
+            else if(this.querySelector(`[name="${key}"]`) && value != '')
               this.querySelector(`[name="${key}"]`).value = value;
+            
+            if(this.querySelector(`[data-name-2="${key}"]`))
+              this.querySelector(`[data-name-2="${key}"]`).value += ' '+value;
           });
 
           // Focus on first input
-          this.querySelector('[data-name="address_1"]').focus();
+          this.querySelector('[name]').focus();
 
           Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
             input.setAttribute('required','true');
@@ -268,17 +275,24 @@ class iamAddressLookup extends HTMLElement {
             else {
               let values = JSON.stringify(address);
 
-              let itemString = '';
+              if(component.hasAttribute('data-display-text')){
 
-              for (const [key, value] of Object.entries(address)) {
-
-                if(key == "address_number_name")
-                  itemString += `${value} `;
-                else if(key != "postcode" && key != "address_title")
-                  itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                listString += `<option value="${address[component.getAttribute('data-display-text')]}, ${postcode}" data-values='${values}'></option>`;
+              }
+              else {
+
+                let itemString = '';
+                for (const [key, value] of Object.entries(address)) {
+
+                  if(key == "address_number_name")
+                    itemString += `${value} `;
+                  else if(key != "postcode" && key != "address_title")
+                    itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
+                }
+                
+                listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
               }
               
-              listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
             }
 
 

package/assets/ts/components/card/card.component.ts

@@ -33,21 +33,7 @@ class iamCard extends HTMLElement {
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" part="card">
-    ${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
-      <div class="card__body">
-      ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
-      ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
-      ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
-        <slot></slot>
-      ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
-      </div>
-      ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
-      <slot name="checkbox"></slot>
-      <div class="card__footer">
-        <slot name="footer"></slot>
-        <slot name="btns"></slot>
-        ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
-      </div>
+      ${this.createCardConent()}
     </div>
     `;
     this.shadowRoot.appendChild(template.content.cloneNode(true));
@@ -57,16 +43,42 @@ class iamCard extends HTMLElement {
       document.head.insertAdjacentHTML('beforeend',`<style id="cardGlobal">${loadExtraCSS}</style>`);
   }
 
-	connectedCallback() {
+  const createCardConent () {
+
+    return `${this.hasAttribute('data-image') || this.hasAttribute('data-record') ? `<div class="card__head">${this.hasAttribute('data-image') ? `<img src="${this.getAttribute('data-image')}" alt="" loading="lazy" />` : ``} <div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
+    <div class="card__body" part="body">
+    ${!this.hasAttribute('data-image') && this.querySelector('[slot="badges"]') && this.querySelector('[slot="checkbox"]') ? `<div class="card__badges card__badges--inline"><slot name="badges"></slot></div>` : ''}
+    ${!this.hasAttribute('data-image') && !this.hasAttribute('data-record') && this.querySelector('[slot="badges"]') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
+    ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
+      <slot></slot>
+    ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
+    </div>
+    ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
+    <slot name="checkbox"></slot>
+    <div class="card__footer" part="footer">
+      <slot name="footer"></slot>
+      <slot name="btns"></slot>
+      ${this.hasAttribute('data-cta') ? `<span class="link d-inline-block pt-0 mb-0">${this.getAttribute('data-cta')}</span>` : ''}
+    </div>`;
+  }
 
+	connectedCallback() {
     this.classList.add('loaded');
-    
+
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label, router-link')
     const card = this.shadowRoot.querySelector('.card')
     const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
     const recordType = this.hasAttribute('data-record') ? this.getAttribute('data-record') : '';
 
+    /* 
+      If the parentNode is actually just a div, 
+      we don't want to look for anything or add events 
+    */
+    if (!parentNode) {
+      return false;
+    }
+
     if(parentNode)
       parentNode.setAttribute('tabindex','-1');
     
@@ -182,7 +194,7 @@ class iamCard extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ["data-total","class"];
+    return ["data-total","class","data-image"];
   }
   
   attributeChangedCallback(attrName, oldVal, newVal) {
@@ -193,12 +205,26 @@ class iamCard extends HTMLElement {
         break;
       }
       case "class": {
-        let classList = this.classList.toString();
-            
-        if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
-          classList += ' card--has-icon';
 
-        this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
+        if(oldVal != newVal){
+          let classList = this.classList.toString();
+              
+          if(this.querySelector('*:not(.badge):not(small):not(.btn) > [class*="fa-"]:not(.btn)'))
+            classList += ' card--has-icon';
+
+          this.shadowRoot.querySelector('.card').setAttribute('class',`card ${classList}`);
+
+          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+        }
+
+        break;
+      }
+      case "data-image": {
+
+        if(oldVal != newVal){
+
+          this.shadowRoot.querySelector('.card').innerHTML = this.createCardConent();
+        }
         break;
       }
     }

package/assets/ts/components/carousel/carousel.component.ts

@@ -32,12 +32,12 @@ class iamCarousel extends HTMLElement {
           <slot></slot>
         </div>
  
-        <div class="carousel__controls">
+        <div class="carousel__controls" part="controls">
           
         </div>
 
-        <button class="btn btn-prev" data-go="0" disabled>Prev</button>
-        <button class="btn btn-next" data-go="2">Next</button>
+        <button class="btn btn-prev" data-go="0" disabled  part="prev">Prev</button>
+        <button class="btn btn-next" data-go="2" part="next">Next</button>
 
       </div>
     </div>
@@ -49,6 +49,8 @@ class iamCarousel extends HTMLElement {
     
     const carouselElement = this.shadowRoot.querySelector('.carousel');
     const row = this.querySelector('.row');
+    const thumbnailImages = JSON.parse(this.dataset.thumbnails);
+
     const carouselControls = this.shadowRoot.querySelector('.carousel__controls');
 
     let itemCount = this.querySelectorAll(':scope > .row > .col').length
@@ -61,10 +63,24 @@ class iamCarousel extends HTMLElement {
     if(this.classList.contains('hide-controls'))
       carouselElement.classList.add('hide-controls');
 
+    if (thumbnailImages?.length) {
+      carouselControls.classList.add('thumbnails');
+    }
+
     // populate the pips
     let pips = "";
     for (let i = 1; i <= itemCount; i++) {
-      pips += `<button class="control-${i}" data-slide="${i}" ${i == 1 ? "aria-current":""}>Slide ${i}</button>`;
+      let pipContent = null;
+      let pipClass = '';
+
+      if (thumbnailImages.length) {
+        pipClass = 'has-thumbnail';
+        pipContent = `<img src="${thumbnailImages[i - 1].src}" alt="Slide ${i}" height="148"/>`;
+      } else {
+        pipContent = `Slide ${i}`;
+      }
+
+      pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
     }
     carouselControls.innerHTML = pips;