@iamproperty/components 4.1.0-beta-2 → 4.1.0

package/assets/sass/components/tabs.scss

@@ -1,27 +1,70 @@
 @use "../_func" as *;
 
 .tabs:not(.admin-panel) {
-
   position: relative;
+
+  .tabs__links__wrapper {
+    position: relative;
+    margin: 0 auto 2rem;
+
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: auto;
+      right: -2.5rem;
+      top: 0;
+      bottom: 1px;
+      width: 2.5rem;
+      background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
+      z-index: 1000;
+      pointer-events: none;
+    }
+  
+    &:after {
+      content: "";
+      left: 50%;
+      position: relative;
+      height: 1px;
+      width: 100vw;
+      background-color: var(--colour-border);
+      transform: translate(-50%,0);
+      display: block;
+      clear: both;
+    }
+
+    @media screen and (prefers-color-scheme: dark) {
+      &:before {
+        background: linear-gradient(90deg, rgba(38,38,38,0), rgba(38,38,38,1));
+      }
+    }
+  }
+}
+
+.tabs.admin-panel {
+  .tabs__links__wrapper {
+    &:after {
+      display: none;
+    }
+  }
 }
 
 .tabs__links {
-  margin-bottom: 1.5rem;
-  overflow: visible;
-  padding-bottom: 2px;
+  padding-bottom: 3px;
   position: relative;
-  display: block;
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+  margin: 0 -1.5rem;
+  overflow-y: hidden;
+  overflow-x: auto;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
-  &:after {
-    content: "";
-    left: 50%;
-    position: relative;
-    height: 3px;
-    width: 100vw;
-    border-bottom: 1px solid var(--colour-border);
-    transform: translate(-50%,0);
-    display: block;
-    clear: both;
+  .link {
+    white-space: nowrap;
   }
 
   .link:not(.text-decoration-none):not(.btn) {
@@ -30,10 +73,15 @@
     font-family: var(--font-heading);
     font-size: rem(18);
     cursor: pointer;
-    margin: 0.5rem 1.5rem 0 0;
-    padding: 0;
+    margin: 0;
+    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
     display: inline-block;
 
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
     &:last-child {
       margin-inline-end: 0;
     }
@@ -41,26 +89,29 @@
     &:after {
       position: absolute;
       content: "";
-      top: 100%;
-      left: 50%;
-      height: 2px;
-      transform: translate(-50%,0);
+      bottom: 0;
+      left: 50%; // half way across
+      height: 3px;
+      width: 100%;
+      transform: translate(-50%, 0) scale(0, 0); // translate pulls this left so it's centered
       background: var(--colour-info);
-      transition: width 0.5s;
-      width: 0%;
+      transition: transform 0.4s;
     }
 
-    &:hover:after,
-    &:focus:after,
-    &.focus:after {
-
-      width: 60%;
+    &:not(.disabled) {
+      &:hover:after,
+      &:focus:after,
+      &.focus:after {
+        transform: translate(-50%, 0) scale(0.6, 1);
+      }
     }
     
-    &[aria-pressed="true"]:after,
-    &:active:after,
-    &.active:after {
-      width: 100%;
+    &:not(.disabled) {
+      &[aria-pressed="true"]:after,
+      &:active:after,
+      &.active:after {
+        transform: translate(-50%, 0) scale(1, 1);
+      }
     }
 
     &[aria-pressed="true"],
@@ -70,3 +121,15 @@
     }
   }
 }
+
+@media (min-width: 576px) {
+  .tabs__links {
+    .link:not(.text-decoration-none):not(.btn) {
+      padding: 2rem 2rem 0.5rem 2rem;
+    }
+  }
+
+  .tabs__links__wrapper {
+    margin: 0 auto 2.5rem;
+  }
+}

package/assets/sass/foundations/brand.scss

@@ -25,6 +25,10 @@
     --svg-width: #{em(475,89)};
   }
 
+  &--crm {
+    --svg-width: #{em(250,89)};
+  }
+
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;

package/assets/sass/foundations/buttons.scss

@@ -314,22 +314,24 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
   }
 
   select {
+    all: unset!important;
     
-    padding: calc(rem(12) - 2px) calc(rem(40) - 2px);
-    margin: calc(rem(-12)) calc(rem(-40));
+    padding: calc(rem(12) - 2px) calc(rem(40) - 2px)!important;
+    margin: calc(rem(-12)) calc(rem(-40))!important;
     
-    padding-right: rem(56);
-    margin-right: rem(-56);
-    border-radius: rem(24);
-    appearance: none;
-    background: none;
+    padding-right: rem(56)!important;
+    margin-right: rem(-56)!important;
+    border-radius: rem(24)!important;
+    appearance: none!important;
+    background: none!important;
     border: none!important;
-    color: inherit;
+    color: currentColor!important;
     display: block;
-    min-width: calc(100% + rem(40) + rem(56));
+    max-width: 100%!important;
     outline: none;
     font-weight: bold;
-    
+    font-size: 1.125rem!important;
+    line-height: 1.5rem!important;
     option {
       padding: 0;
       text-align: left;
@@ -340,8 +342,8 @@ a:is(:hover, :focus, .hover, :active, .active):not([disabled]) .btn-secondary,
 
   &:after {
     position: absolute;
-    top: rem(8);
-    right: rem(40);
+    top: rem(10);
+    right: rem(32);
 
     content: "";
     height: rem(24);

package/assets/sass/foundations/links.scss

@@ -106,6 +106,7 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   padding:0;
   display: flex;
 
+
   &:not([class*="col"]){
     margin: 0 0 rem(24) 0;
   }
@@ -123,7 +124,7 @@ a:where(:not(.btn):not(.brand):not(:has(.card)):not(:has(iam-card))),
   }
 }
 
-.col > :is(a,button):has(.card, iam-card):first-child:last-child{
+:is(.col,[class*="col-"]) > :is(a,button):has(.card, iam-card):first-child:last-child{
   min-height: calc(100% - rem(24));
 }
 // #endregion

package/assets/sass/helpers/dynamic.scss

@@ -0,0 +1,3 @@
+.js-hide {
+  display: none!important;
+}

package/assets/sass/templates/form.scss

@@ -0,0 +1,84 @@
+@use "../_func" as *;
+
+body:has(.template--form) {
+  
+  @include light-mode(){
+    
+    background-color: #e9f9fd;
+  }
+}
+
+.template--form {
+
+  --input-max-width: #{rem(450)};
+  --select-max-width: #{rem(500)};
+
+  @supports selector(:has(*)){
+
+    label:has(> :is(.suffix,.prefix)) {
+
+      --input-max-width: #{rem(500)};
+      max-width: var(--input-max-width);
+    }
+    div:has(> :is(.suffix,.prefix)) {
+
+      --input-max-width: #{rem(500)};
+      max-width: var(--input-max-width);
+    }
+  }
+
+
+
+  // Make H2's look like H3's
+  :is(h2, .h2) {
+    font-size: rem(map-get($heading-sizes,"h3_fs"));
+    line-height: rem(map-get($heading-sizes,"h3_lh"));
+    padding-bottom: rem(map-get($heading-sizes,"h3_pb"));
+    max-width: var(--content-max-width);
+  
+    @include media-breakpoint-up(sm) {
+  
+      font-size: rem(map-get($heading-sizes,"h3_fs_sm"));
+      line-height: rem(map-get($heading-sizes,"h3_lh_sm"));
+      padding-bottom: rem(map-get($heading-sizes,"h3_pb_sm"));
+    }
+  }
+
+  @include light-mode(){
+    
+    background-color: #e9f9fd;
+  }
+
+  .form-panel {
+
+    display: block;
+    padding: 2rem;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
+    background-color: var(--colour-canvas-2);
+    margin-bottom: 1.5rem;
+    outline: var(--contrast-outline-width, 0px) solid var(--colour-primary);
+    
+    @include media-breakpoint-up(sm) {
+
+      max-width: calc(100% - 5rem); // Guess
+      margin-inline: auto;
+    }
+
+    @include media-breakpoint-up(md) {
+
+      max-width: rem(924); // Guess
+      border-radius: 0.5rem;
+      padding-inline: rem(94);
+      padding-block: rem(40);
+      margin-bottom: rem(32);
+    }
+
+    > *:last-child {
+      margin-bottom: 0!important;
+    }
+  }
+
+  [data-loading] {
+    opacity: 0.5;
+  }
+}

package/assets/svg/logo.svg

@@ -46,4 +46,11 @@
     <use xlink:href="#logo-divider"/>
     <path d="M662.042411,79.21875 L655.513393,79.21875 C654.787946,79.21875 654.352679,78.7834821 654.0625,78.0580357 L646.082589,53.2477679 C645.792411,52.2321429 646.227679,51.6517857 647.243304,51.6517857 L652.611607,51.6517857 C653.337054,51.6517857 653.917411,52.0870536 654.0625,52.8125 L658.995536,70.5133929 L663.783482,52.8125 C664.073661,52.0870536 664.508929,51.6517857 665.234375,51.6517857 L671.183036,51.6517857 C671.908482,51.6517857 672.488839,52.0870536 672.633929,52.8125 L677.421875,70.5133929 L682.354911,52.8125 C682.645089,52.0870536 683.080357,51.6517857 683.805804,51.6517857 L688.59375,51.6517857 C689.464286,51.6517857 690.044643,52.3772321 689.754464,53.2477679 L681.774554,78.0580357 C681.484375,78.9285714 680.904018,79.21875 680.178571,79.21875 L673.939732,79.21875 C673.069196,79.21875 672.488839,78.7834821 672.34375,78.0580357 L667.991071,61.5178571 L663.638393,78.0580357 C663.348214,78.7834821 662.767857,79.21875 662.042411,79.21875 M644.051339,64.7098214 L644.051339,66.015625 C644.051339,66.8861607 643.616071,67.3214286 642.745536,67.3214286 L623.013393,67.3214286 C623.448661,71.2388393 626.495536,73.8504464 630.267857,73.8504464 C632.879464,73.8504464 635.055804,72.8348214 636.796875,70.9486607 C637.377232,70.3683036 637.8125,70.2232143 638.247768,70.6584821 L641.875,73.125 C642.455357,73.5602679 642.600446,74.140625 642.165179,74.7209821 C639.408482,78.3482143 635.345982,80.0892857 630.122768,80.0892857 C621.5625,80.0892857 615.46875,73.8504464 615.46875,65.5803571 C615.46875,57.3102679 621.5625,50.78125 630.122768,50.78125 C638.392857,50.9263393 644.051339,57.0200893 644.051339,64.7098214 M629.977679,56.875 C626.640625,56.875 623.883929,58.4709821 623.158482,60.9375 L636.796875,60.9375 C636.071429,58.3258929 633.314732,56.875 629.977679,56.875 M602.265625,43.2366071 C602.265625,40.7700893 604.296875,38.59375 606.908482,38.59375 C609.375,38.59375 611.551339,40.7700893 611.551339,43.2366071 C611.551339,45.703125 609.520089,47.8794643 606.908482,47.8794643 C604.296875,47.8794643 602.265625,45.8482143 602.265625,43.2366071 M604.441964,79.21875 C603.716518,79.21875 603.28125,78.6383929 603.28125,78.0580357 L603.28125,52.6674107 C603.28125,51.9419643 603.861607,51.5066964 604.441964,51.5066964 L609.375,51.5066964 C610.100446,51.5066964 610.535714,52.0870536 610.535714,52.6674107 L610.535714,77.9129464 C610.535714,78.4933036 609.955357,79.0736607 609.375,79.0736607 L604.441964,79.21875 L604.441964,79.21875 Z M581.662946,79.3638393 C580.9375,79.3638393 580.357143,78.9285714 580.066964,78.203125 L571.361607,53.3928571 C570.926339,52.5223214 571.506696,51.6517857 572.522321,51.6517857 L578.035714,51.6517857 C578.761161,51.6517857 579.196429,52.0870536 579.486607,52.8125 L585.725446,71.8191964 L591.529018,52.8125 C591.674107,52.0870536 592.254464,51.6517857 592.979911,51.6517857 L598.203125,51.6517857 C599.073661,51.6517857 599.654018,52.5223214 599.363839,53.3928571 L590.513393,78.0580357 C590.223214,78.9285714 589.787946,79.21875 589.0625,79.21875 L581.662946,79.3638393 L581.662946,79.3638393 L581.662946,79.3638393 Z M560.189732,64.7098214 C560.189732,60.2120536 557.723214,57.6004464 553.515625,57.6004464 C549.308036,57.6004464 546.551339,60.5022321 546.551339,64.7098214 L546.551339,78.0580357 C546.551339,78.6383929 545.970982,79.21875 545.390625,79.21875 L540.3125,79.21875 C539.732143,79.21875 539.151786,78.6383929 539.151786,78.0580357 L539.151786,52.6674107 C539.151786,51.9419643 539.732143,51.5066964 540.3125,51.5066964 L545.390625,51.5066964 C545.970982,51.5066964 546.551339,52.0870536 546.551339,52.6674107 L546.551339,54.84375 C548.4375,52.0870536 551.484375,50.78125 555.691964,50.78125 C562.946429,50.78125 567.589286,55.7142857 567.589286,62.8236607 L567.589286,78.203125 C567.589286,78.7834821 567.008929,79.3638393 566.428571,79.3638393 L561.495536,79.3638393 C560.915179,79.3638393 560.334821,78.9285714 560.334821,78.203125 L560.334821,64.7098214 L560.189732,64.7098214 L560.189732,64.7098214 Z M535.089286,64.7098214 L535.089286,66.015625 C535.089286,66.8861607 534.654018,67.3214286 533.783482,67.3214286 L514.051339,67.3214286 C514.486607,71.2388393 517.533482,73.8504464 521.305804,73.8504464 C523.917411,73.8504464 526.09375,72.8348214 527.834821,70.9486607 C528.415179,70.3683036 528.850446,70.2232143 529.285714,70.6584821 L532.912946,73.125 C533.493304,73.5602679 533.638393,74.140625 533.203125,74.7209821 C530.446429,78.3482143 526.383929,80.0892857 521.160714,80.0892857 C512.600446,80.0892857 506.506696,73.8504464 506.506696,65.5803571 C506.506696,57.3102679 512.600446,50.78125 521.160714,50.78125 C529.285714,50.9263393 535.089286,57.0200893 535.089286,64.7098214 M521.015625,56.875 C517.678571,56.875 514.921875,59.0513393 514.196429,62.6785714 L527.834821,62.6785714 C527.109375,58.90625 524.352679,56.875 521.015625,56.875 M489.241071,50.78125 C496.785714,50.78125 502.879464,56.7299107 502.879464,65.4352679 C502.879464,74.140625 496.785714,80.0892857 489.095982,80.0892857 C485.613839,80.0892857 482.131696,78.6383929 480.535714,76.171875 L480.535714,90.5357143 C480.535714,91.1160714 479.955357,91.6964286 479.375,91.6964286 L474.296875,91.6964286 C473.716518,91.6964286 473.136161,91.1160714 473.136161,90.5357143 L473.136161,52.8125 C473.136161,52.0870536 473.716518,51.6517857 474.296875,51.6517857 L479.229911,51.6517857 C479.810268,51.6517857 480.390625,52.2321429 480.390625,52.8125 L480.390625,54.9888393 C482.131696,52.3772321 485.323661,50.78125 489.241071,50.78125 M493.303571,70.9486607 C496.205357,67.9017857 496.205357,62.96875 493.303571,59.921875 C490.401786,56.875 485.613839,56.875 482.712054,59.921875 C479.810268,62.96875 479.810268,67.9017857 482.712054,70.9486607 C485.613839,73.9955357 490.401786,73.9955357 493.303571,70.9486607 M453.694196,50.78125 C461.964286,50.78125 468.638393,57.1651786 468.638393,65.4352679 C468.638393,73.7053571 462.109375,80.0892857 453.694196,80.0892857 C445.279018,80.0892857 438.75,73.7053571 438.75,65.4352679 C438.75,57.1651786 445.279018,50.78125 453.694196,50.78125 M458.917411,70.9486607 C461.819196,67.9017857 461.819196,62.96875 458.917411,59.921875 C456.015625,56.875 451.227679,56.875 448.325893,59.921875 C445.424107,62.96875 445.424107,67.9017857 448.325893,70.9486607 C451.227679,73.8504464 456.015625,73.8504464 458.917411,70.9486607"/>
   </symbol>
+
+  <symbol id="logo-crm" viewBox="0 0 508 130" preserveAspectRatio="xMinYMid meet">
+    <use xlink:href="#logo-property"/>
+    <path d="m423.85,80.14c-8.36-.15-15.01-7.04-14.86-15.4.15-8.36,7.04-15.01,15.4-14.86,4.97.09,9.59,2.62,12.34,6.76.53.77.36,1.48-.53,2.14l-2.91,2.26c-.61.61-1.61.61-2.22,0-.11-.11-.2-.23-.27-.36-2.08-2.55-3.86-3.68-6.82-3.68-4.22,0-7.65,3.41-7.66,7.63,0,.13,0,.25,0,.38-.2,4.22,3.06,7.8,7.27,8,.13,0,.25,0,.38,0,2.97,0,4.75-1.13,6.82-3.68.42-.76,1.37-1.04,2.13-.62.13.07.25.16.36.27l2.91,2.26c.89.65,1.07,1.37.53,2.14-2.82,4.35-7.7,6.91-12.87,6.77Z"/>
+    <path d="m455.95,50.35c.89,0,1.37.48,1.37,1.48v5.1c.04.78-.57,1.45-1.35,1.48-.02,0-.05,0-.07,0h-1.43c-4.04,0-5.99,2.26-5.99,6.88v12.87c-.04.65-.59,1.16-1.25,1.13h-5.22c-.66,0-1.19-.53-1.19-1.19v-26.17c-.02-.66.5-1.22,1.16-1.25,0,0,.02,0,.03,0h4.92c.63.02,1.14.5,1.19,1.13v2.73c1.3-2.66,4.04-4.31,7-4.22h.83Z"/>
+    <path d="m468.47,78.18c-.04.65-.59,1.16-1.25,1.13h-5.22c-.66,0-1.19-.53-1.19-1.19v-26.17c-.02-.66.5-1.22,1.16-1.25,0,0,.02,0,.03,0h5.22c.64.01,1.17.49,1.25,1.13v2.26c2.13-2.74,5.43-4.31,8.9-4.22,3.75-.18,7.29,1.77,9.14,5.04,2.32-3.28,6.13-5.18,10.15-5.04,7.95,0,12.22,5.34,12.22,12.1v16.21c-.04.65-.59,1.16-1.25,1.13h-5.16c-.65.03-1.21-.47-1.25-1.13v-14.36c0-4.04-2.14-6.88-6.11-6.88s-6.4,2.85-6.4,6.88v14.36c-.04.65-.59,1.16-1.25,1.13h-5.16c-.65.03-1.21-.47-1.25-1.13v-14.36c0-4.04-2.14-6.88-6.11-6.88s-6.47,2.91-6.47,6.88v14.36h0Z"/>
+  </symbol>
 </svg>

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

@@ -0,0 +1,215 @@
+// @ts-nocheck
+import Cookies from 'js-cookie';
+
+// Data layer Web component created
+window.dataLayer = window.dataLayer || [];
+window.dataLayer.push({
+  "event": "customElementRegistered",
+  "element": "Address Lookup"
+});
+
+
+class iamAddressLookup extends HTMLElement {
+
+  constructor(){
+    super();
+    this.attachShadow({ mode: 'open'});
+    
+    const assetLocation = document.body.hasAttribute('data-assets-location') ? document.body.getAttribute('data-assets-location') : '/assets'
+    const coreCSS = document.body.hasAttribute('data-core-css') ? document.body.getAttribute('data-core-css') : `${assetLocation}/css/core.min.css`;
+    const loadCSS = `@import "${assetLocation}/css/components/address-lookup.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    @import "${coreCSS}";
+    ${loadCSS}
+    
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
+    <div class="wrapper">
+
+      <div class="postcode-lookup">
+        <div>
+        <label class="mb-2">Search property address <span class="optional">(Optional)</span>
+          <span>
+          <input type="text" name="postcode" list="address-lookup__addressess" autoComplete="new-password" aria-autocomplete="none" placeholder="Postcode" />
+          <span class="suffix fa-regular fa-search"></span>
+          </span>
+          <span class="invalid-feedback">Required Adddress fields missing</span>
+        </label>
+
+        </div>
+        <button class="btn btn-tertiary switch-to-manual-btn">Or enter address manually</button>
+      </div>
+      <datalist id="address-lookup__addressess"></datalist>
+
+      <div class="manual-address pb-2 js-hide">
+        <slot></slot>
+        <button class="btn btn-tertiary switch-to-lookup-btn">Use postcode lookup</button>
+      </div>
+    </div>
+    `;
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const wrapper = this.shadowRoot.querySelector('.wrapper');
+    const lookup = this.shadowRoot.querySelector('label');
+    const lookupWrapper = this.shadowRoot.querySelector('.postcode-lookup');
+    const manualWrapper = this.shadowRoot.querySelector('.manual-address');
+    const list = this.shadowRoot.querySelector('datalist');
+    const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
+    const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
+
+    if(this.hasAttribute('data-use')){
+
+      let useLabel = this.hasAttribute('data-use-label') ? this.getAttribute('data-use-label') : 'Use saved address';
+      let useCheckbox =`<div><input type="checkbox" name="use" id="use" value="yes"><label for="use">${useLabel}</label></div>`;
+      
+      lookupWrapper.insertAdjacentHTML('afterbegin',useCheckbox);
+        
+      this.shadowRoot.addEventListener('change', (event) => {
+
+        if (event && event.target instanceof HTMLElement && event.target.closest('[name="use"]')){
+
+          let checkbox = event.target.closest('[name="use"]');
+
+          if(checkbox.checked){
+                  
+            lookupWrapper.classList.add('js-hide');
+            manualWrapper.classList.remove('js-hide');
+
+            let values = JSON.parse(this.getAttribute('data-use'));
+          
+            Object.keys(values).forEach((key, index) => {
+  
+              let value = values[key];
+              if(this.querySelector(`[data-name="${key}"]`))
+                this.querySelector(`[data-name="${key}"]`).value = value;
+              else if(this.querySelector(`[name="${key}"]`))
+                this.querySelector(`[name="${key}"]`).value = value;
+            });
+          }
+        }
+      });
+    }
+
+
+    switchManualBtn.addEventListener('click', (event) => {
+
+      lookupWrapper.classList.add('js-hide');
+      manualWrapper.classList.remove('js-hide');
+
+      Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
+        input.setAttribute('required','true');
+      });
+    });
+    switchLookupBtn.addEventListener('click', (event) => {
+
+      lookupWrapper.classList.remove('js-hide');
+      manualWrapper.classList.add('js-hide');
+    });
+
+
+    lookup.addEventListener('keyup', (event) => {
+
+      if(lookup.value.length >= 3)
+        search(lookup.value);
+    });
+
+    lookup.addEventListener('change', (event) => {
+
+      if(lookup.value.length >= 3){
+        
+        search(lookup.value);
+
+        if(list.querySelector(`[value="${lookup.value}"]`)){
+         
+        
+          lookupWrapper.classList.add('js-hide');
+          manualWrapper.classList.remove('js-hide');
+
+          let values = JSON.parse(list.querySelector(`[value="${lookup.value}"]`).getAttribute('data-values'));
+          
+          Object.keys(values).forEach((key, index) => {
+
+            let value = values[key];
+            if(this.querySelector(`[data-name="${key}"]`))
+              this.querySelector(`[data-name="${key}"]`).value = value;
+            else if(this.querySelector(`[name="${key}"]`))
+              this.querySelector(`[name="${key}"]`).value = value;
+          });
+
+          // Focus on first input
+          this.querySelector('[data-name="address_1"]').focus();
+
+          Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
+            input.setAttribute('required','true');
+          });
+          lookup.removeAttribute('required');
+
+          if(this.shadowRoot.querySelector('[name="use"]'))
+            this.shadowRoot.querySelector('[name="use"]').checked = false;
+        }
+      }
+
+    });
+
+
+
+    const search = async (postcode) => {
+      
+      let ajaxURL = this.getAttribute('data-url');
+      ajaxURL += `${encodeURI(postcode)}`;
+      
+      // Setup controller vars if not already set
+      if(!window.controller)
+      window.controller = [];
+
+      // Abort if controller already present for this url
+      if(window.controller[ajaxURL])
+      window.controller[ajaxURL].abort();
+
+      // Create a new controller so it can be aborted if new fetch made
+      window.controller[ajaxURL] = new AbortController();
+      const { signal } = controller[ajaxURL];
+      
+      try {
+        await fetch(ajaxURL, {
+          signal: signal,
+          method: 'get',
+          credentials: 'same-origin',
+          headers: new Headers({
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            'X-Requested-With': 'XMLHttpRequest',
+            'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
+          })
+        })
+        .then((response) => response.json()).then((response) => {
+          
+          // populate datalist
+          let listString = '';
+          response.forEach((address, index) => {
+
+            
+            let values = JSON.stringify(address.value);
+            listString += `<option value="${address['label']}, ${postcode}" data-values='${values}'></option>`;
+          });
+          list.innerHTML = listString;
+
+          return response;
+        });
+      } catch (error) {
+        console.log(error);
+      }
+      
+    }
+
+  }
+}
+
+export default iamAddressLookup;

package/assets/ts/components/pagination/README.md

@@ -24,3 +24,14 @@ import('../node_modules/@iamproperty/components/assets/js/components/pagination/
 | data-total | int | 0 | The total amount is needed to work out how many pagination buttons are needed |
 | data-page | int | 1 | Override the current page value |
 | data-show | int | 15 | Update how many items can be shown per page |
+| data-page-minimal | flag | - | Will display the minimal variant even on mobile | 
+| data-page-jump | flag | - | Adds the page jump dropdown on all viewports | 
+| data-per-page | flag | - | Adds the per page dropdown on tablet and desktop viewports (is hidden on tablet if not enough room availble) | 
+| data-item-count | flag | - | Will add the total count on tablet and desktop viewports | 
+
+**Dispatched events**
+
+| Event | Dispatched when | Details passed|
+| ------ | ------------- | ----------- |
+| update-show | When a user clicks mobile 'Load more' button | { show: $showAmont } |
+| update-page | When a user changes the page jump select or clicks on the 'Prev' and 'Next' buttons | { page: $pageNumber } |