@iamproperty/components 5.1.0-beta11 → 5.1.0-beta13

package/assets/sass/_func.scss

@@ -2,6 +2,7 @@ $compatible: 'false'!default;
 $mobileOnly: 'false'!default;
 $darkMode: 'true'!default;
 $layers: 'true'!default;
+$optionalText: 'true'!default;
 
 // Declare global vars variable
 $vars: ()!default;

package/assets/sass/components/component.native.scss

@@ -72,6 +72,10 @@ iam-carousel {
   }
 }
 
+// Search
+iam-search input:not(.is-invalid):not(:invalid) {
+  background: none!important;
+}
 
 
 

package/assets/sass/elements/forms.scss

@@ -12,11 +12,23 @@ $icon-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' view
   font-weight: normal;
   color: var(--colour-heading);
   display: block;
+}
+// #endregion
+
+// #region Optional text
+:is(label,.label) {
 
-  &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
+  @if $optionalText == "true" {
+    &:has(+ input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])):after {
+      content: " (Optional)";
+    }
+  }
+
+  &:has(input:not(:disabled):not([readonly]):not(:required):not([type='radio']):not([type='checkbox']):not([type='file'])) .optional-text:before {
     content: " (Optional)";
   }
 }
+
 // #endregion
 
 // #region input field
@@ -375,7 +387,7 @@ input[maxlength] + span {
   border-color: var(--colour-complete);
 }
 
-.was-validated input:is(:valid, .is-valid) {
+.was-validated input:is(:valid, .is-valid):not(:is(:invalid, .is-invalid)) {
 
   background-image: escape-svg($icon-tick);
   background-repeat: no-repeat;
@@ -887,7 +899,7 @@ iam-fileupload {
   
   margin-bottom: 1.5rem;
 
-  &:has(:invalid):after {
+  &:has(:is(:invalid,.is-invalid)):after {
     content: "This field is required";
     color: var(--colour-danger);
     margin-top: rem(8);
@@ -902,7 +914,7 @@ iam-fileupload {
     line-height: 1.2;
   }
 
-  &[data-error]:has(:invalid):after {
+  &[data-error]:has(:is(:invalid,.is-invalid)):after {
     content: attr(data-error)!important;
   }
 

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

@@ -84,15 +84,15 @@ class iamAddressLookup extends HTMLElement {
       preFilledAddress.innerHTML = "";
 
       Array.from(component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input, index) => {
+        const value = input.value;
 
-        if(!input.value)
+        if(!value)
           preFilled = false;
         else
-          preFilledAddress.innerHTML += ', '+input.value;
-        
+          preFilledAddress.innerHTML += value+(/^-?\d+$/.test(value) ? ' ' : ', ');
       });
 
-      preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(1);
+      preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(0, -2);
 
       if(preFilled){
         preFilledWrapper.classList.remove('js-hide');
@@ -266,9 +266,9 @@ class iamAddressLookup extends HTMLElement {
                 if(key == "address_number_name")
                   itemString += `${value} `;
                 else if(key != "postcode" && key != "address_title")
-                  itemString += `${value}, `;
+                  itemString += `${value}${(/^-?\d+$/.test(value)?'':',')} `;
               }
-
+              
               listString += `<option value="${itemString}${postcode}" data-values='${values}'></option>`;
             }
 

package/assets/ts/components/search/search.component.ts

@@ -22,7 +22,13 @@ class iamSearch extends HTMLElement {
     template.innerHTML = `
     <style>
     @import "${coreCSS}";
-    
+    input {
+      background: red;
+    }
+    input:not(.is-invalid):not(:invalid) {
+      background: none!important;
+    }
+
     </style>
     <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous" />
     <slot></slot>
@@ -62,36 +68,43 @@ class iamSearch extends HTMLElement {
       displayInputField.setAttribute('list',listID);
     }
 
-    // on change update oringinal field with the actual value and use displayed input for the nice display text
-    displayInputField.addEventListener('change', (event) => {
-
-      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
-
-      if(match){
-        inputField.value = match.getAttribute('data-value');
-      }
-    });
-
     // Search the endpoint when 3 characters has been added
     if(searchWrapper.hasAttribute('data-url')){
         
-      displayInputField.addEventListener('keyup', (event) => {
+      displayInputField.addEventListener('input', (event) => {
 
         if(displayInputField.value.length == 3 && !searched.includes(displayInputField.value)){
           search(displayInputField.value);
           searched.push(displayInputField.value);
         }
       });
+    }
 
-      displayInputField.addEventListener('change', (event) => {
+    function checkMatch(){
+      
+      let match = datalist.querySelector(`option[value="${displayInputField.value}"]`);
+      let subMatch = datalist.querySelector(`option[value*='${displayInputField.value}' i]`);
 
-        if(displayInputField.value.length >= 3 && !searched.includes(displayInputField.value.substring(0,3))){
-          search(displayInputField.value.substring(0,3));
-          searched.push(displayInputField.value.substring(0,3));
-        }
-      });
+      if(match){
+        inputField.value = match.getAttribute('data-value');
+      }
+      else if (displayInputField.value.length > 0 && !subMatch){
+        displayInputField.classList.add('is-invalid');
+        displayInputField.closest('label').setAttribute('data-error','No results returned');
+      }
+      else {
+        displayInputField.classList.remove('is-invalid');
+        displayInputField.closest('label').removeAttribute('data-error');
+      }
     }
-    
+
+    // on change update oringinal field with the actual value and use displayed input for the nice display text
+    displayInputField.addEventListener('input', (event) => {
+
+      checkMatch();
+    });
+
+
     const search = async (searchterm) => {
       
       let ajaxURL = searchWrapper.getAttribute('data-url');
@@ -154,6 +167,9 @@ class iamSearch extends HTMLElement {
           
           datalist.innerHTML += listString;
   
+          displayInputField.closest('form').classList.add('was-validated');
+          checkMatch();
+
           return response;
         });
 

package/assets/ts/modules/inputs.ts

@@ -10,6 +10,11 @@ const extendInputs = (body) => {
       setMaxlengthVars(input,wrapper);
     });
 
+    Array.from(document.querySelectorAll('label input')).forEach((input,index) => {
+      if(!input.closest('label').querySelector('.optional-text') && !input.hasAttribute('required'))
+        input.insertAdjacentHTML("beforebegin", `<span class="optional-text"></span>`);
+    });
+    
     // Date restrictions 
     if(document.querySelector('input[type="date"]')){
 

package/dist/components.es.js

@@ -48,7 +48,7 @@ function vt(e, a, t, i, s, o) {
 }
 const Li = /* @__PURE__ */ y(gt, [["render", vt]]);
 /*!
-  * iamKey v5.1.0-beta11
+  * iamKey v5.1.0-beta13
   * Copyright 2022-2023 iamproperty
   */
 const _t = function(e) {
@@ -557,7 +557,7 @@ class Mt extends HTMLElement {
   }
 }
 /*!
-  * iamKey v5.1.0-beta11
+  * iamKey v5.1.0-beta13
   * Copyright 2022-2023 iamproperty
   */
 class ot extends HTMLElement {
@@ -1152,7 +1152,7 @@ const be = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-915d29dd.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-7c16a7a4.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1263,7 +1263,7 @@ const Ei = /* @__PURE__ */ y(xe, [["render", Ee]]), Te = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-3bb86b22.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-fd3b7162.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-3bb86b22.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-b2893b36.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1317,7 +1317,7 @@ const Hi = /* @__PURE__ */ y(Me, [["render", je]]), Ce = {
   },
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-e7e9db8c.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-4f13b848.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1713,7 +1713,7 @@ const Di = /* @__PURE__ */ y(oa, [["render", ya]]), wa = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-b6b9ead5.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-b8d9ee0f.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1833,7 +1833,7 @@ const Pa = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-d390ff06.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-ba1ee1c0.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1963,7 +1963,7 @@ function Za(e, a, t, i, s, o) {
 }
 const Oi = /* @__PURE__ */ y(Ka, [["render", Za]]);
 /*!
-  * iamKey v5.1.0-beta11
+  * iamKey v5.1.0-beta13
   * Copyright 2022-2023 iamproperty
   */
 function ti(e, a) {
@@ -2059,7 +2059,7 @@ function ii(e, a, t, i, s, o) {
 }
 const Bi = /* @__PURE__ */ y(ai, [["render", ii]]);
 /*!
-  * iamKey v5.1.0-beta11
+  * iamKey v5.1.0-beta13
   * Copyright 2022-2023 iamproperty
   */
 function ni(e, a) {
@@ -2229,7 +2229,7 @@ const Vi = /* @__PURE__ */ y(mi, [["render", hi]]), pi = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-9c9e2e41.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-6cb16be8.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -2261,7 +2261,7 @@ const Ki = /* @__PURE__ */ y(fi, [["render", gi]]), yi = {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/address-lookup/address-lookup.component.js": () => import("./address-lookup.component-53821bfb.mjs"), "../../../assets/js/components/address-lookup/address-lookup.component.min.js": () => import("./address-lookup.component.min-4ceee9e9.mjs") }), "../../../assets/js/components/address-lookup/address-lookup.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/address-lookup/address-lookup.component.js": () => import("./address-lookup.component-6bae4154.mjs"), "../../../assets/js/components/address-lookup/address-lookup.component.min.js": () => import("./address-lookup.component.min-54ce7f2f.mjs") }), "../../../assets/js/components/address-lookup/address-lookup.component.js").then((e) => {
         window.customElements.get("iam-address-lookup") || window.customElements.define("iam-address-lookup", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -2276,7 +2276,7 @@ function wi(e, a, t, i, s, o) {
 }
 const Gi = /* @__PURE__ */ y(yi, [["render", wi]]);
 /*!
-  * iamKey v5.1.0-beta11
+  * iamKey v5.1.0-beta13
   * Copyright 2022-2023 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });