@iamproperty/components 5.6.1-beta13 → 5.6.1-beta15

package/assets/sass/_components.scss

@@ -80,4 +80,14 @@ iam-table {
       --row-bg: #000000;
     }
   }
+}
+
+
+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/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/elements/forms.scss

@@ -343,7 +343,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/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>
@@ -203,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');

package/assets/ts/modules/carousel.ts

@@ -5,8 +5,8 @@ function carousel(carouselElement, row) {
 
   let carouselInner = carouselElement.querySelector('.carousel__inner');
   let carouselControls = carouselElement.querySelector('.carousel__controls');
-  let itemCount = row.querySelectorAll('.col').length;
-
+  let itemCount = row.querySelectorAll(':scope > .col').length;
+  
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
@@ -16,11 +16,15 @@ function carousel(carouselElement, row) {
       let scrollWidth = carouselInner.scrollWidth;
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = row.querySelector('.col:last-child').offsetLeft + 50;
+      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft - 50;
+      let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+      let visibleItems = Math.round(scrollArea / itemWidth);
 
-      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset)
-        targetSlide = itemCount;
+      if(carouselInner.scrollLeft + scrollArea >= lastItemOffset){
 
+        targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
+      }
+      
       Array.from(carouselElement.querySelectorAll('.carousel__controls button')).forEach((button, index) => {
         button.removeAttribute('aria-current');
       });
@@ -56,11 +60,11 @@ function carousel(carouselElement, row) {
         });
         target.setAttribute('aria-current', true);
         
-        const el = row.querySelector(`*:nth-child(${target.getAttribute('data-slide')})`);
+        const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
-          left: el.offsetLeft, 
+          left: el.offsetLeft - 100, 
           behavior: 'smooth'
         });
 

package/assets/ts/modules/fileupload.ts

@@ -149,7 +149,7 @@ function fileupload(fileupload: Element, wrapper: Element) {
     filesWrapper.innerHTML = '';
 
     for (const file of input.files){
-      filesWrapper.innerHTML += `<span class="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+      filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
     }
 
     const elementChangeEvent = new CustomEvent('elementchange', {detail: {"files": input.files}});

package/assets/ts/modules/inputs.ts

@@ -5,7 +5,7 @@ const extendInputs = (body) => {
 
   function loadInput(){
     // maxlength counter init
-    Array.from(document.querySelectorAll('input[maxlength]')).forEach((input,index) => {
+    Array.from(document.querySelectorAll('input[maxlength],textarea[maxlength]')).forEach((input,index) => {
       let wrapper = input.parentElement;
       setMaxlengthVars(input,wrapper);
     });

package/dist/components.es.js

@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Le]]), Se = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-1941bab6.mjs").then((t) => {
+      import("./fileupload.component.min-20a70260.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-9c045157.mjs").then((t) => {
+      import("./accordion.component.min-edee87ed.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -619,7 +619,7 @@ const Va = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-dbd0a1ae.mjs").then((t) => {
+      import("./carousel.component.min-1224b507.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -646,7 +646,7 @@ const Fa = /* @__PURE__ */ m(Oe, [["render", Ue]]), We = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-6ce9f8cf.mjs").then((t) => {
+      import("./header.component.min-9f6cf931.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1042,7 +1042,7 @@ const Ua = /* @__PURE__ */ m(yt, [["render", Et]]), Ht = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-2ee34530.mjs").then((t) => {
+      import("./nav.component.min-ea22e24e.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1162,7 +1162,7 @@ const Xt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-90dcc089.mjs").then((t) => {
+      import("./tabs.component.min-c46eba4a.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1309,7 +1309,7 @@ function pa(t, a, e, i, r, s) {
 }
 const Za = /* @__PURE__ */ m(ma, [["render", pa]]);
 /*!
-  * iamKey v5.6.1-beta13
+  * iamKey v5.6.1-beta15
   * Copyright 2022-2024 iamproperty
   */
 function ha(t, a) {
@@ -1479,7 +1479,7 @@ const ts = /* @__PURE__ */ m($a, [["render", ka]]), Aa = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-4314469e.mjs").then((t) => {
+      import("./actionbar.component.min-b8009504.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1494,7 +1494,7 @@ function xa(t, a, e, i, r, s) {
 }
 const as = /* @__PURE__ */ m(Aa, [["render", xa]]);
 /*!
-  * iamKey v5.6.1-beta13
+  * iamKey v5.6.1-beta15
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {
@@ -1619,7 +1619,7 @@ const ss = /* @__PURE__ */ m(Sa, [["render", qa]]), Ta = {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {
-      import("./address-lookup.component.min-d3b27db0.mjs").then((t) => {
+      import("./address-lookup.component.min-cada2a24.mjs").then((t) => {
         window.customElements.get("iam-address-lookup") || window.customElements.define("iam-address-lookup", t.default);
       }).catch((t) => {
         console.log(t.message);