@iamproperty/components 4.1.1-beta-5 → 4.1.1-beta-7

package/assets/sass/foundations/reboot.scss

@@ -95,6 +95,8 @@ button:focus {
 }
 
 hr {
+  --border-style: solid;
+  --border-color: var(--colour-border);
   border: 0;
   color: transparent;
   margin: 0;
@@ -103,6 +105,7 @@ hr {
   opacity: 1;
   clear:both;
 
+
   &:after {
     display: table;
     clear: both;

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

@@ -69,35 +69,44 @@ class iamAddressLookup extends HTMLElement {
     const switchManualBtn = this.shadowRoot.querySelector('.switch-to-manual-btn');
     const switchLookupBtn = this.shadowRoot.querySelector('.switch-to-lookup-btn');
     const title = this.hasAttribute('data-title') ? this.getAttribute('data-title')  : "Property address";
-
-    let preFilled = true;
-
-    const preFilledAddress = this.shadowRoot.querySelector('.pre-filled-address');
     const preFilledAddressBtn = this.shadowRoot.querySelector('.pre-filled-address + button');
 
-    
+  
     Array.from(this.shadowRoot.querySelectorAll('.title')).forEach((titleElement, index) => {
 
       titleElement.innerHTML = title;
     });
 
+    function checkFilled(component){
 
-    Array.from(this.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input, index) => {
+      let preFilledAddress = component.shadowRoot.querySelector('.pre-filled-address');
+      let preFilled = true;
+      preFilledAddress.innerHTML = "";
 
-      if(!input.value)
-        preFilled = false;
-      else
-        preFilledAddress.innerHTML += ', '+input.value;
-      
-    });
+      Array.from(component.querySelectorAll('input[required],input[data-required],select[required],select[data-required]')).forEach((input, index) => {
+
+        if(!input.value)
+          preFilled = false;
+        else
+          preFilledAddress.innerHTML += ', '+input.value;
+        
+      });
 
-    preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(1);
+      preFilledAddress.innerHTML = preFilledAddress.innerHTML.slice(1);
 
-    if(preFilled){
-      preFilledWrapper.classList.remove('js-hide');
-      lookupWrapper.classList.add('js-hide');
-      manualWrapper.classList.add('js-hide');
+      if(preFilled){
+        preFilledWrapper.classList.remove('js-hide');
+        lookupWrapper.classList.add('js-hide');
+        manualWrapper.classList.add('js-hide');
+      }
     }
+    checkFilled(this);
+    
+    this.addEventListener('filled', (event) => {
+
+      checkFilled(this);
+    });
+
 
     if(this.hasAttribute('data-use')){
 
@@ -136,7 +145,7 @@ class iamAddressLookup extends HTMLElement {
       lookupWrapper.classList.add('js-hide');
       manualWrapper.classList.remove('js-hide');
 
-      Array.from(this.querySelectorAll('[data-required]')).forEach((input, index) => {
+      Array.from(manualWrapper.querySelectorAll('[data-required]')).forEach((input, index) => {
         input.setAttribute('required','true');
       });
 

package/assets/ts/modules/applied-filters.ts

@@ -3,6 +3,7 @@ function createAppliedFilters(container,filters) {
 
 
   function addFilterButton (filters, input){
+
     let shouldRemoveFilter = false;
     let inputName = input.getAttribute('name');
     
@@ -12,7 +13,7 @@ function createAppliedFilters(container,filters) {
     let filter = filters.querySelector(`[data-name="${inputName}"]`);
 
     if(filter && input.getAttribute('type') == 'checkbox')
-      shouldRemoveFilter = true;
+      shouldRemoveFilter = !input.checked ? true : false;
 
     let filterText = input.getAttribute('data-filter-text');
     
@@ -97,14 +98,26 @@ function createAppliedFilters(container,filters) {
     addFilterButton(filters, input)
   });
 
+
+  // check for change in displayed inputs
   Array.from(container.querySelectorAll('input[data-filter-text]')).forEach((input, index) => {
-    
+
     input.addEventListener('change', function(event){
 
-      addFilterButton(filters, input)
+      addFilterButton(filters, input);
+      event.stopPropagation(); // Don't allow the below event handler to trigger
     });
   });
 
+  // Some change event aren't getting triggered above so this event listener on the container will pick them up. This happens with input in modals
+  container.addEventListener('change', function(event){
+
+    if (event && event.target instanceof HTMLElement && event.target.closest('input[data-filter-text]')){
+      let input = event.target.closest('input[data-filter-text]');
+      addFilterButton(filters, input);
+    }
+  });
+
   filters.addEventListener('click', function(event){
 
     if (event && event.target instanceof HTMLElement && event.target.closest('.filter')){

package/assets/ts/modules/dynamicEvents.ts

@@ -96,9 +96,13 @@ const runEvent = (element,event,eventType) => {
           input.setAttribute('required','true');
       });
       break;
-    case "populate-form":
-      populateForm(element,event);
-      break;
+      case "populate-form":
+        populateForm(element,event);
+        break;
+      case "dispatchEvent":
+        let theEvent = new Event(event['value']);
+        document.querySelector(`${event['target']}`).dispatchEvent(theEvent);
+        break;
     case "setAttribute":
       document.querySelector(`${event['target']}`).setAttribute(event['attribute'],event['value']);
       break;
@@ -121,12 +125,23 @@ const populateForm = function (element,event) {
   let values = JSON.parse(element.getAttribute('data-values'));
   let form = document.querySelector(event['target']);
 
+  if(!values)
+    return false;
+
   Object.keys(values).forEach((field, index) => {
 
     if(document.getElementById(field) && document.getElementById(field).tagName == "SPAN")
       document.getElementById(field).innerHTML = values[field];
-    
-    if(form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)){
+
+
+    if(form.querySelector(`select[name="${field}"] [value="${values[field]}"]`)){
+
+      form.querySelector(`select[name="${field}"]`).value = values[field];
+
+      if(element.hasAttribute('data-lock-fields'))
+        form.querySelector(`select[name="${field}"]`).disabled = true;
+    }
+    else if(form.querySelector(`input[name="${field}"][type="radio"][value="${values[field]}"]`)){
       
       Array.from(form.querySelectorAll(`input[name="${field}"][type="radio"]`)).forEach(function(input,index){
         input.disabled = true;
@@ -137,7 +152,9 @@ const populateForm = function (element,event) {
     }
     else if(form.querySelector(`input[name="${field}"]`)){
       form.querySelector(`input[name="${field}"]`).value = values[field];
-      form.querySelector(`input[name="${field}"]`).setAttribute('readonly','true');
+
+      if(element.hasAttribute('data-lock-fields'))
+        form.querySelector(`input[name="${field}"]`).setAttribute('readonly','true');
     }
   });
 }

package/assets/ts/modules/inputs.ts

@@ -3,7 +3,6 @@ const extendInputs = (body) => {
 
   document.addEventListener("load", function() {
 
-    console.log(Array.from(document.querySelectorAll('input[maxlength]')))
     // maxlength counter init
     Array.from(document.querySelectorAll('input')).forEach((input,index) => {
       let wrapper = input.parentElement;
@@ -31,7 +30,6 @@ const extendInputs = (body) => {
 
       const select = event.target.closest('select');
 
-      console.log(select)
 
       if(select.hasAttribute('data-change-type') && select.hasAttribute('data-input')){
 

package/dist/README.md

@@ -0,0 +1,21 @@
+# Your Favicon Package
+
+This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
+
+## Install instructions
+
+To install this package:
+
+Extract this package in the root of your web site. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicon.ico</code>.
+
+Insert the following code in the `head` section of your pages:
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00313c">
+    <meta name="msapplication-TileColor" content="#00aba9">
+    <meta name="theme-color" content="#00313c">
+
+*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)

package/dist/components.es.js

@@ -48,7 +48,7 @@ function At(e, a, t, i, s, r) {
 }
 const Xo = /* @__PURE__ */ A(yt, [["render", At]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 const _t = function(e) {
@@ -557,7 +557,7 @@ class Ct extends HTMLElement {
   }
 }
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 let nt = class extends HTMLElement {
@@ -1143,7 +1143,7 @@ function be(e, a, t, i, s, r) {
 }
 const Qo = /* @__PURE__ */ A(pe, [["render", be]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 function fe(e) {
@@ -1294,7 +1294,7 @@ const ai = /* @__PURE__ */ A(ke, [["render", He]]), Ce = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      import("./card.component.min-1e6bae1b.mjs").then((e) => {
+      import("./card.component.min-b12fd7f2.mjs").then((e) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1495,7 +1495,7 @@ function We(e, a, t, i, s, r) {
 }
 const oi = /* @__PURE__ */ A(De, [["render", We]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "header" });
@@ -1941,7 +1941,7 @@ const si = /* @__PURE__ */ A(va, [["render", Ha]]), Ca = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-16baebe2.mjs").then((e) => {
+      import("./nav.component.min-68c5fb8e.mjs").then((e) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -2058,7 +2058,7 @@ function Za(e, a, t, i, s, r) {
 }
 const ui = /* @__PURE__ */ A(Xa, [["render", Za]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 const to = function(e) {
@@ -2259,7 +2259,7 @@ function vo(e, a, t, i, s, r) {
 }
 const bi = /* @__PURE__ */ A(ho, [["render", vo]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 function wo(e, a) {
@@ -2267,7 +2267,7 @@ function wo(e, a) {
     let r = !1, o = s.getAttribute("name");
     o.includes("[]") && (o = o.replace("[]", `[${s.value}]`));
     let n = i.querySelector(`[data-name="${o}"]`);
-    n && s.getAttribute("type") == "checkbox" && (r = !0);
+    n && s.getAttribute("type") == "checkbox" && (r = !s.checked);
     let d = s.getAttribute("data-filter-text");
     if (n || (n = document.createElement("button"), i.appendChild(n)), n.setAttribute("type", "button"), n.classList.add("filter"), n.setAttribute("data-name", o), n.innerHTML = d.replace("$value", s.value), (!s.value || r) && n.remove(), s.parentNode.closest("[data-filter-text]")) {
       let l = s.parentNode.closest("[data-filter-text]"), m = !0;
@@ -2293,8 +2293,13 @@ function wo(e, a) {
     t(a, i);
   }), Array.from(e.querySelectorAll("input[data-filter-text]")).forEach((i, s) => {
     i.addEventListener("change", function(r) {
-      t(a, i);
+      t(a, i), r.stopPropagation();
     });
+  }), e.addEventListener("change", function(i) {
+    if (i && i.target instanceof HTMLElement && i.target.closest("input[data-filter-text]")) {
+      let s = i.target.closest("input[data-filter-text]");
+      t(a, s);
+    }
   }), a.addEventListener("click", function(i) {
     if (i && i.target instanceof HTMLElement && i.target.closest(".filter")) {
       let o = i.target.closest(".filter"), n = o.getAttribute("data-name").split(",");
@@ -2350,7 +2355,7 @@ function xo(e, a, t, i, s, r) {
 }
 const gi = /* @__PURE__ */ A(_o, [["render", xo]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 function Lo(e, a) {
@@ -2517,7 +2522,7 @@ function Co(e, a, t, i, s, r) {
 }
 const vi = /* @__PURE__ */ A(Ho, [["render", Co]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 const Ro = function(e) {
@@ -2902,7 +2907,7 @@ const Ai = /* @__PURE__ */ A(Fo, [["render", Io]]), Bo = (e, a) => {
   name: "Address Lookup",
   mounted() {
     this.$nextTick(function() {
-      Bo(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/address-lookup/address-lookup.component.js": () => import("./address-lookup.component-9a910361.mjs"), "../../../assets/js/components/address-lookup/address-lookup.component.min.js": () => import("./address-lookup.component.min-462972f3.mjs") }), "../../../assets/js/components/address-lookup/address-lookup.component.js").then((e) => {
+      Bo(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/address-lookup/address-lookup.component.js": () => import("./address-lookup.component-53f26cc5.mjs"), "../../../assets/js/components/address-lookup/address-lookup.component.min.js": () => import("./address-lookup.component.min-d389641e.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);
@@ -2917,7 +2922,7 @@ function Vo(e, a, t, i, s, r) {
 }
 const _i = /* @__PURE__ */ A(Oo, [["render", Vo]]);
 /*!
-  * iamKey v4.1.1-beta-5
+  * iamKey v4.1.1-beta-7
   * Copyright 2022-2023 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });