@iamproperty/components 7.6.1 → 7.6.2

package/assets/sass/utilities/overflow.scss

@@ -0,0 +1,17 @@
+@layer utilities {
+  .overflow-auto {
+    overflow: auto !important;
+  }
+
+  .overflow-hidden {
+    overflow: hidden !important;
+  }
+
+  .overflow-visible {
+    overflow: visible !important;
+  }
+
+  .overflow-scroll {
+    overflow: scroll !important;
+  }
+}

package/assets/sass/utilities/paddings.scss

@@ -0,0 +1,34 @@
+@layer utilities {
+  @for $key from 0 through 5 {
+    $value: var(--spacer-#{$key});
+    .p-#{$key} {
+      padding: #{$value} !important;
+    }
+
+    .px-#{$key} {
+      padding-left: #{$value} !important;
+      padding-right: #{$value} !important;
+    }
+
+    .py-#{$key} {
+      padding-top: #{$value} !important;
+      padding-bottom: #{$value} !important;
+    }
+
+    .pt-#{$key} {
+      padding-top: #{$value} !important;
+    }
+
+    .pe-#{$key} {
+      padding-right: #{$value} !important;
+    }
+
+    .pb-#{$key} {
+      padding-bottom: #{$value} !important;
+    }
+
+    .ps-#{$key} {
+      padding-left: #{$value} !important;
+    }
+  }
+}

package/assets/sass/utilities/pointer-events.scss

@@ -0,0 +1,9 @@
+@layer utilities {
+  .pe-none {
+    pointer-events: none !important;
+  }
+
+  .pe-auto {
+    pointer-events: auto !important;
+  }
+}

package/assets/sass/utilities/position.scss

@@ -0,0 +1,90 @@
+@layer utilities {
+  $breakpoints: (
+    sm: 36em,
+    md: 62em,
+  );
+  @each $breakpoint,$width in $breakpoints {
+    @media screen and (min-width: $width) {
+
+      .position-#{$breakpoint}-static {
+        position: static !important;
+      }
+
+      .position-#{$breakpoint}-relative {
+        position: relative !important;
+      }
+
+      .position-#{$breakpoint}-absolute {
+        position: absolute !important;
+      }
+
+      .position-#{$breakpoint}-fixed {
+        position: fixed !important;
+      }
+
+      .position-#{$breakpoint}-sticky {
+        position: sticky !important;
+      }
+
+      .top-#{$breakpoint}-0 {
+        top: 0 !important;
+      }
+
+      .top-#{$breakpoint}-50 {
+        top: 50% !important;
+      }
+
+      .top-#{$breakpoint}-100 {
+        top: 100% !important;
+      }
+
+      .bottom-#{$breakpoint}-0 {
+        bottom: 0 !important;
+      }
+
+      .bottom-#{$breakpoint}-50 {
+        bottom: 50% !important;
+      }
+
+      .bottom-#{$breakpoint}-100 {
+        bottom: 100% !important;
+      }
+
+      .start-#{$breakpoint}-0 {
+        left: 0 !important;
+      }
+
+      .start-#{$breakpoint}-50 {
+        left: 50% !important;
+      }
+
+      .start-#{$breakpoint}-100 {
+        left: 100% !important;
+      }
+
+      .end-#{$breakpoint}-0 {
+        right: 0 !important;
+      }
+
+      .end-#{$breakpoint}-50 {
+        right: 50% !important;
+      }
+
+      .end-#{$breakpoint}-100 {
+        right: 100% !important;
+      }
+
+      .translate-#{$breakpoint}-middle {
+        transform: translate(-50%, -50%) !important;
+      }
+
+      .translate-#{$breakpoint}-middle-x {
+        transform: translateX(-50%) !important;
+      }
+
+      .translate-#{$breakpoint}-middle-y {
+        transform: translateY(-50%) !important;
+      }
+    }
+  }
+}

package/assets/sass/utilities/ratio.scss

@@ -0,0 +1,33 @@
+@layer utilities {
+  .ratio {
+    position: relative;
+    width: 100%;
+
+    &::before {
+      display: block;
+      padding-top: var(--aspect-ratio);
+      content: '';
+    }
+
+    > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .ratio-1x1 {
+    --aspect-ratio: 100%;
+  }
+  .ratio-4x3 {
+    --aspect-ratio: calc(3 / 4 * 100%);
+  }
+  .ratio-16x9 {
+    --aspect-ratio: calc(9 / 16 * 100%);
+  }
+  .ratio-21x9 {
+    --aspect-ratio: calc(9 / 21 * 100%);
+  }
+}

package/assets/sass/utilities/rounded.scss

@@ -0,0 +1,57 @@
+@layer utilities {
+  .rounded {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-0 {
+    border-radius: 0 !important;
+  }
+
+  .rounded-1 {
+    border-radius: var(--border-radius-sm) !important;
+  }
+
+  .rounded-2 {
+    border-radius: var(--border-radius) !important;
+  }
+
+  .rounded-3 {
+    border-radius: var(--border-radius-lg) !important;
+  }
+
+  .rounded-4 {
+    border-radius: var(--border-radius-xl) !important;
+  }
+
+  .rounded-5 {
+    border-radius: var(--border-radius-2xl) !important;
+  }
+
+  .rounded-circle {
+    border-radius: 50% !important;
+  }
+
+  .rounded-pill {
+    border-radius: var(--border-radius-pill) !important;
+  }
+
+  .rounded-top {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-end {
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+  }
+
+  .rounded-bottom {
+    border-bottom-right-radius: var(--border-radius) !important;
+    border-bottom-left-radius: var(--border-radius) !important;
+  }
+
+  .rounded-start {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-top-left-radius: var(--border-radius) !important;
+  }
+}

package/assets/sass/utilities/sizes.scss

@@ -0,0 +1,89 @@
+@layer utilities {
+  .w-25 {
+    width: 25% !important;
+  }
+
+  .w-50 {
+    width: 50% !important;
+  }
+
+  .w-75 {
+    width: 75% !important;
+  }
+
+  .w-100 {
+    width: 100% !important;
+  }
+
+  .w-auto {
+    width: auto !important;
+  }
+
+  .mw-100 {
+    max-width: 100% !important;
+  }
+
+  .mw-fit-content {
+    max-width: fit-content !important;
+  }
+
+  .mw-content {
+    max-width: var(--content-max-width) !important;
+  }
+
+  .vw-100 {
+    width: 100vw !important;
+  }
+
+  .min-vw-100 {
+    min-width: 100vw !important;
+  }
+
+  .h-25 {
+    height: 25% !important;
+  }
+
+  .h-50 {
+    height: 50% !important;
+  }
+
+  .h-75 {
+    height: 75% !important;
+  }
+
+  .h-100 {
+    height: 100% !important;
+  }
+
+  .h-auto {
+    height: auto !important;
+  }
+
+  .mh-100 {
+    max-height: 100% !important;
+  }
+
+  .vh-100 {
+    height: 100vh !important;
+  }
+
+  .min-vh-100 {
+    min-height: 100vh !important;
+  }
+
+  .min-100 {
+    min-width: 100% !important;
+  }
+
+  .min-fit-content {
+    min-width: fit-content !important;
+  }
+
+  .object-cover {
+    object-fit: cover !important;
+  }
+
+  .object-contain {
+    object-fit: contain !important;
+  }
+}

package/assets/sass/utilities/sticky.scss

@@ -0,0 +1,39 @@
+@layer utilities {
+  .sticky-top {
+    position: sticky;
+    top: 0;
+    z-index: var(--index-floating);
+  }
+  .sticky-bottom {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--index-floating);
+  }
+
+  @media screen and (min-width: 36em) {
+
+    .sticky-sm-top {
+      position: sticky;
+      top: 0;
+      z-index: var(--index-floating);
+    }
+    .sticky-sm-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--index-floating);
+    }
+  }
+  @media screen and (min-width: 62em) {
+
+    .sticky-md-top {
+      position: sticky;
+      top: 0;
+      z-index: var(--index-floating);
+    }
+    .sticky-md-bottom {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--index-floating);
+    }
+  }
+}

package/assets/sass/utilities/text-truncate.scss

@@ -0,0 +1,7 @@
+@layer utilities {
+  .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/assets/sass/utilities/text.scss

@@ -0,0 +1,122 @@
+@layer utilities {
+  .font-monospace {
+    font-family: var(--font-monospace) !important;
+  }
+
+  .font-body {
+    font-family: var(--font-body) !important;
+  }
+
+  .fs-1 {
+    font-size: rfs-fluid-value(2.5rem) !important;
+  }
+
+  .fs-2 {
+    font-size: rfs-fluid-value(2rem) !important;
+  }
+
+  .fs-3 {
+    font-size: rfs-fluid-value(1.75rem) !important;
+  }
+
+  .fs-4 {
+    font-size: rfs-fluid-value(1.5rem) !important;
+  }
+
+  .fs-5 {
+    font-size: rfs-fluid-value(1.25rem) !important;
+  }
+
+  .fs-6 {
+    font-size: rfs-fluid-value(1rem) !important;
+  }
+
+  .fst-italic {
+    font-style: italic !important;
+  }
+
+  .fst-normal {
+    font-style: normal !important;
+  }
+
+  .fw-light {
+    font-weight: 300 !important;
+  }
+
+  .fw-lighter {
+    font-weight: lighter !important;
+  }
+
+  .fw-normal {
+    font-weight: 400 !important;
+  }
+
+  .fw-bold {
+    font-weight: 700 !important;
+  }
+
+  .fw-semibold {
+    font-weight: 600 !important;
+  }
+
+  .fw-bolder {
+    font-weight: bolder !important;
+  }
+
+  .lh-0 {
+    line-height: 0 !important;
+  }
+
+  .lh-1 {
+    line-height: 1 !important;
+  }
+
+  .text-start {
+    text-align: left !important;
+  }
+
+  .text-end {
+    text-align: right !important;
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .text-decoration-none {
+    text-decoration: none !important;
+  }
+
+  .text-decoration-underline {
+    text-decoration: underline !important;
+  }
+
+  .text-decoration-line-through {
+    text-decoration: line-through !important;
+  }
+
+  .text-lowercase {
+    text-transform: lowercase !important;
+  }
+
+  .text-uppercase {
+    text-transform: uppercase !important;
+  }
+
+  .text-capitalize {
+    text-transform: capitalize !important;
+  }
+
+  .text-wrap {
+    white-space: normal !important;
+  }
+
+  .text-nowrap {
+    white-space: nowrap !important;
+  }
+
+  .text-break {
+    word-wrap: break-word !important;
+    word-break: break-word !important;
+  }
+}

package/assets/sass/utilities/visible.scss

@@ -0,0 +1,9 @@
+@layer utilities {
+  .visible {
+    visibility: visible !important;
+  }
+
+  .invisible {
+    visibility: hidden !important;
+  }
+}

package/assets/sass/utilities/visually-hidden.scss

@@ -0,0 +1,14 @@
+@layer utilities {
+  .visually-hidden,
+  .visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+}

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

@@ -0,0 +1,10 @@
+@layer utilities {
+  @for $i from 1 through 23 {
+    .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

@@ -101,7 +101,7 @@ class iamActionbar extends HTMLElement {
       </div>
 
       <div class="actionbar--search">
-        <button data-search class="btn btn-compact fa-xmark-large btn-secondary m-0" >Close</button>
+        <button data-search class="btn btn-compact fa-xmark-large btn-secondary mb-0" >Close</button>
 
         <div class="search-wrapper" part="search">
           <label for="search" class="visually-hidden">Input field label</label>

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

@@ -51,7 +51,7 @@ class iamAddressLookup extends HTMLElement {
           </span>
         </label>
     
-          <span class="invalid-feedback mb-2">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
+          <span class="invalid-feedback mb-2" id="invalid-feedback-address-lookup">${this.hasAttribute('data-error-msg') ? this.getAttribute('data-error-msg') : 'Required address fields'}</span>
 
           <div class="datalist__wrapper ${this.hasAttribute('data-list-class') ? this.getAttribute('data-list-class') : ''}" tabindex="0" part="list-wrapper">
             <slot name="beforeList"></slot>
@@ -103,7 +103,7 @@ class iamAddressLookup extends HTMLElement {
     const preFilledAddressRemoveBtn = this.shadowRoot.querySelector('[part="remove-button"]');
     const dataDisplayText = this.hasAttribute('data-display-text');
     const postcodeSubmit = this.shadowRoot?.querySelector('#postcode__submit');
-    const errorMsg = this.shadowRoot?.querySelector('.invalid-feedback');
+    const errorMsg = this.shadowRoot?.querySelector('#invalid-feedback-address-lookup');
     const paginationWrapper = this.shadowRoot?.querySelector('#paginationWrapper');
     const minChars = this.hasAttribute('data-min-chars') ? parseInt(this.getAttribute('data-min-chars')) : 3;
     let pageNumber = 1;
@@ -201,7 +201,7 @@ class iamAddressLookup extends HTMLElement {
 
 
     const fillInputs = (values): void => {
-
+  
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
@@ -506,6 +506,9 @@ class iamAddressLookup extends HTMLElement {
       if (![40,38,13].includes(e.keyCode) && lookup.value.length >= minChars){
         const valid = await search(lookup.value);
 
+        console.log(errorMsg)
+        console.log(valid)
+
         if(valid != true){
           lookup?.classList.add('is-invalid');
           errorMsg?.innerHTML = valid;
@@ -650,6 +653,24 @@ class iamAddressLookup extends HTMLElement {
 
     advancedSelect(this, lookup, list, true);
   }
+
+  static get observedAttributes(): any {
+    return ['data-url'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+
+    const addressComponent = this.querySelector('iam-address-lookup');
+
+    switch (attrName) {
+      case 'data-url': {
+        if (oldVal != newVal && addressComponent) {
+          addressComponent.setAttribute('data-url', newVal + '?search_string=');
+        }
+        break;
+      }
+    }
+  }
 }
 
 export default iamAddressLookup;

package/assets/ts/components/darkmode/darkmode.component.ts

@@ -41,7 +41,7 @@ class iamDarkMode extends HTMLElement {
     const input = this.querySelector('input');
     const span = this.querySelector('span');
 
-    const setDark = () => {
+    const setDark = (): void => {
       
       document.documentElement.classList.add('dark-theme');
       document.documentElement.classList.remove('light-theme');
@@ -51,7 +51,7 @@ class iamDarkMode extends HTMLElement {
       label?.classList.add('dark-theme');
     }
 
-    const unsetDark = () => {
+    const unsetDark = (): void => {
 
       document.documentElement.classList.remove('dark-theme');
       document.documentElement.classList.add('light-theme');

package/assets/ts/components/input/input.component.ts

@@ -40,7 +40,7 @@ class iamInput extends HTMLElement {
       this.classList.add('mb-0');
 
 
-    const setIcon = (inputType) => {
+    const setIcon = (inputType): void => {
         
       // Pre set the icons
       switch (inputType) {
@@ -65,7 +65,7 @@ class iamInput extends HTMLElement {
     setIcon(inputType);
 
 
-    const setCurrencyRules = () => {
+    const setCurrencyRules = (): void => {
       
       input.setAttribute('type','text');
       input?.setAttribute('data-value',input.value);
@@ -188,7 +188,7 @@ class iamInput extends HTMLElement {
         return `${year}-${month}-${day}`;
       }
 
-      const checkDayAllowed = (input,allowedDays) => {
+      const checkDayAllowed = (input,allowedDays): void => {
 
         const day = new Date(input.value).getUTCDay();
 

package/assets/ts/components/modal/modal.component.ts

@@ -58,7 +58,7 @@ class iamModal extends HTMLElement {
 
 
 
-    const openModal = () => {
+    const openModal = (): void => {
       dialog?.showModal();
       dialog?.focus();
 
@@ -109,7 +109,7 @@ class iamModal extends HTMLElement {
       this.moveBefore(element, originalDialog);
     });
 
-    const closeModal = () => {
+    const closeModal = (): void => {
       dialog?.close();
       
       const closeEvent = new CustomEvent('modal-closed', {

package/assets/ts/components/multi-step-modal/multi-step-modal.component.ts

@@ -44,7 +44,7 @@ class iamMultiStepModal extends HTMLElement {
     const steps = this.shadowRoot.querySelector('.steps');
     const form = this.querySelector('form');
 
-    const openModal = () => {
+    const openModal = (): void => {
       dialog?.showModal();
       dialog?.focus();
 
@@ -97,7 +97,7 @@ class iamMultiStepModal extends HTMLElement {
       });
     });
 
-    const closeModal = () => {
+    const closeModal = (): void => {
       dialog?.close();
       
       const closeEvent = new CustomEvent('modal-closed', {