@iamproperty/components 7.5.1--beta3 → 7.5.1--beta4

package/assets/js/components/table/table.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.5.1--beta3
+  * iamKey v7.5.1--beta4
   * Copyright 2022-2025 iamproperty
   */const O=function(t){return typeof t!="string"?!1:!isNaN(t)&&!isNaN(parseFloat(t))},B=(t,e)=>String(t).padStart(e,"0"),W=t=>t.charAt(0).toUpperCase()+t.slice(1),p=(t,e,a)=>e.split(/[\.\[\]\'\"]/).filter(i=>i).reduce((i,l)=>i?i[l]:a,t),C=(t=1)=>Math.floor(Math.random()*Date.now()*(t+1));var V=function(t,e,a,i){function l(o){return o instanceof a?o:new a(function(n){n(o)})}return new(a||(a=Promise))(function(o,n){function r(d){try{b(i.next(d))}catch(m){n(m)}}function s(d){try{b(i.throw(d))}catch(m){n(m)}}function b(d){d.done?o(d.value):l(d.value).then(r,s)}b((i=i.apply(t,e||[])).next())})};const U=(t,e)=>{switch(t){case"datetime":return new Date(e).toLocaleDateString("en-gb",{weekday:"short",year:"2-digit",month:"long",day:"numeric"})+" "+new Date(e).toLocaleTimeString("en-gb",{hour:"2-digit",minute:"2-digit"});case"date":return new Date(e).toLocaleDateString("en-gb",{day:"numeric",month:"long",year:"2-digit"});case"capitalise":return e=W(e)}},J=function(t){const e=new Object;return Array.from(t.querySelectorAll("[data-filter]")).forEach(i=>{if(!(i.type=="radio"&&!i.checked)&&!(i.type=="checkbox"&&!i.checked)&&i&&i.value){const l=i.getAttribute("data-filter");let o=i.value;i.hasAttribute("data-date-from")&&(o+="-date-from"),i.hasAttribute("data-date-to")&&(o+="-date-to"),e[l]||(e[l]=[]),e[l].push(o)}}),e},X=t=>{let e=document.createElement("form");const a=t.querySelector("table");t.hasAttribute("data-filterby")?e=document.querySelector(`#${t.getAttribute("data-filterby")}`):t.closest("form")?e=t.closest("form"):a.parentNode.insertBefore(e,a.nextSibling),e.hasAttribute("data-ajax")&&t.setAttribute("data-ajax",e.getAttribute("data-ajax")),e.hasAttribute("data-schema")&&t.setAttribute("data-schema",e.getAttribute("data-schema"))},w=(t,e,a,i,l)=>{a.querySelector("[name=show]")||a.insertAdjacentHTML("beforeend",`<input name="show" type="hidden" value="${t.getAttribute("data-show")}" />`),a.querySelector("[name=page]")||a.insertAdjacentHTML("beforeend",`<input name="page" type="hidden" value="${t.getAttribute("data-page")}" />`),i.addEventListener("update-show",o=>{if(a.querySelector("[name=show]").value!=o.detail.show){a.querySelector("[name=show]").value=o.detail.show;const n=new CustomEvent("update-show",{detail:{show:o.detail.show}});t.dispatchEvent(n),H(t,i),l()}}),i.addEventListener("update-page",o=>{if(a.querySelector("[name=page]").value!=o.detail.page){a.querySelector("[name=page]").value=o.detail.page;const n=new CustomEvent("update-page",{detail:{page:o.detail.page}});if(t.dispatchEvent(n),H(t,i),l(),!t.hasAttribute("data-no-scroll")){const s=e.getBoundingClientRect().top+window.pageYOffset+-250;window.scrollTo({top:s,behavior:"smooth"})}}})},Y=(t,e)=>{let a=document.createElement("form");return t.hasAttribute("data-filterby")?a=document.querySelector(`#${t.getAttribute("data-filterby")}`):t.closest("form")?a=t.closest("form"):t.querySelector("form")?a=t.querySelector("form"):e.parentNode.insertBefore(a,e.nextSibling),t.hasAttribute("data-ajax")&&a.setAttribute("data-ajax",t.getAttribute("data-ajax")),a},M=(t,e,a,i)=>{const l=t.shadowRoot.querySelector(".table__wrapper");t.hasAttribute("data-total")||t.setAttribute("data-total",t.querySelectorAll("tbody tr").length),t.hasAttribute("data-page")||t.setAttribute("data-page",1),t.hasAttribute("data-show")||t.setAttribute("data-show",5),t.hasAttribute("data-increment")||t.setAttribute("data-increment",t.getAttribute("data-show")),G(t,i),$(e),K(t,e),t.classList.contains("mh-sm")&&l.classList.add("mh-sm"),t.classList.contains("mh-md")&&l.classList.add("mh-md"),t.classList.contains("mh-lg")&&l.classList.add("mh-lg"),t.classList.contains("table--cta")&&(Q(t,e),Z(t,e))},G=(t,e)=>{t.hasAttribute("data-total")&&e.setAttribute("data-total",t.getAttribute("data-total")),t.hasAttribute("data-page")&&e.setAttribute("data-page",t.getAttribute("data-page")),t.hasAttribute("data-show")&&e.setAttribute("data-show",t.getAttribute("data-show")),t.hasAttribute("data-increment")&&e.setAttribute("data-increment",t.getAttribute("data-show")),t.hasAttribute("data-page-jump")&&e.setAttribute("data-page-jump","true"),t.hasAttribute("data-per-page")&&e.setAttribute("data-per-page","true"),t.hasAttribute("data-item-count")&&e.setAttribute("data-item-count","true"),t.hasAttribute("data-loading")&&e.setAttribute("data-loading","true"),t.classList.contains("table--fullwidth")&&e.setAttribute("data-minimal","true")},H=(t,e)=>{t.setAttribute("data-total",e.getAttribute("data-total")),t.setAttribute("data-page",e.getAttribute("data-page")),t.setAttribute("data-show",e.getAttribute("data-show")),t.setAttribute("data-increment",e.getAttribute("data-show"))},q=t=>{t.getAttribute("data-total");const e=t.getAttribute("data-page"),a=t.getAttribute("data-show");t.getAttribute("data-increment");const i=t.querySelector("table"),l=e*a,o=l-a;Array.from(i.querySelectorAll("tbody tr")).forEach((n,r)=>{r>=o&&r<l?n.classList.add("show"):n.classList.remove("show")})},$=t=>{const e=Array.from(t.querySelectorAll("thead th"));Array.from(t.querySelectorAll("tbody tr")).forEach(i=>{const l=Array.from(i.querySelectorAll("th, td")),o=["0","low","medium","high","unknown","n/a","pending","verified","due","overdue","incomplete","complete","completed","approval required","upcoming","requires approval","to do","on track","not started","warning","successful","failed"];l.forEach((n,r)=>{const s=e[r];if(typeof s<"u"){const b=document.createElement("div");b.innerHTML=s.innerHTML;const d=b.textContent||b.innerText||"";n.setAttribute("data-label",d),s.hasAttribute("data-td-class")&&n.setAttribute("class",s.getAttribute("data-td-class")),s.hasAttribute("data-format")&&(n.setAttribute("data-format",s.getAttribute("data-format")),n.innerHTML=U(s.getAttribute("data-format"),n.textContent.trim())),o.includes(n.textContent.trim().toLowerCase())&&n.setAttribute("data-content",n.textContent.trim().toLowerCase())}})})},K=(t,e)=>{if(t.classList.contains("table--fullwidth")&&!t.hasAttribute("data-expandable")||e.querySelectorAll("thead tr th").length<4&&!t.hasAttribute("data-expandable"))return!1;Array.from(e.querySelectorAll("thead tr")).forEach(a=>{e.querySelectorAll("thead tr th.expand-button-heading").length||a.insertAdjacentHTML("afterbegin",`<th class="${t.hasAttribute("data-expandable")?"th--fixed ":""}expand-button-heading"></th>`)}),Array.from(e.querySelectorAll("tbody tr")).forEach((a,i)=>{const l=a.getAttribute("data-view")==="full"?"aria-expanded":"";a.insertAdjacentHTML("afterbegin",`<td class="${t.hasAttribute("data-expandable")?"td--fixed ":""}td--expand"><button class="btn btn-compact btn-secondary btn-sm" data-expand-button ${l} data-index="${i}">Expand</button></td>`)}),e.addEventListener("click",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest("[data-expand-button]")){const i=a.target.closest("[data-expand-button]"),l=i.closest("tr");i.toggleAttribute("aria-expanded"),l.getAttribute("data-view")=="full"?l.setAttribute("data-view","default"):l.setAttribute("data-view","full"),i.blur(),t.dispatchEvent(new CustomEvent("row-expanded",{detail:{row:i.getAttribute("data-index")}}))}})},Q=(t,e)=>{let a=0;Array.from(e.querySelectorAll("tbody tr")).forEach(i=>{const l=window.getComputedStyle(document.querySelector("html")),o=i.querySelector(":scope > *:last-child > *:first-child");if(o){o.classList.add("text-nowrap");let n=o.offsetWidth/parseFloat(l.fontSize);n+=1.8,a=a>n?a:n}}),t.style.setProperty("--cta-width",`${a}rem`)},Z=(t,e)=>{function a(){Array.from(e.querySelectorAll("tr")).forEach(i=>{const l=i.offsetHeight;i.style.setProperty("--row-height",`${l}px`)})}new ResizeObserver(a).observe(e)},z=(t,e)=>{if(t.querySelector("iam-actionbar[data-selectall]")||document.querySelector(`iam-actionbar[data-for='${t.getAttribute("id")}']`)){const a=t.querySelector("iam-actionbar[data-selectall]")?t.querySelector("iam-actionbar[data-selectall]"):document.querySelector(`iam-actionbar[data-for='${t.getAttribute("id")}']`);tt(t,e,a)}t.querySelectorAll(".dialog__wrapper .btn-compact").forEach((a,i)=>{const o=a.closest(".dialog__wrapper").querySelector("dialog");if(o){const d=`menu${C(i)}`;o.setAttribute("id",d),o.setAttribute("popover","auto"),a.setAttribute("popovertarget",d),o.outerHTML=o.outerHTML.replace(/<dialog/g,"<iam-menu").replace(/<\/dialog>/g,"</iam-menu>")}a.classList.add("btn-sm"),a.classList.add("m-0");const n=a.closest("tr"),r=a.closest("td"),b=Array.prototype.slice.call(n.children).indexOf(r);r.classList.add("td--fixed"),e.querySelector(`thead tr th:nth-child(${b+1})`).classList.add("th--fixed")})},tt=(t,e,a)=>{Array.from(e.querySelectorAll("thead tr")).forEach(i=>{i.querySelector(".expand-button-heading")?i.querySelector(".expand-button-heading").insertAdjacentHTML("afterend",'<th class="th--fixed"></th>'):i.insertAdjacentHTML("afterbegin",'<th class="th--fixed"></th>')}),Array.from(e.querySelectorAll("tbody tr")).forEach((i,l)=>{if(i.setAttribute("data-index",l+1),!i.querySelector(".selectrow")){const o=`row${C(l)}`;i.querySelector(".td--expand")?i.querySelector(".td--expand").insertAdjacentHTML("afterend",`<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${o}" ${i.hasAttribute("data-selected")?'checked="true"':""}/><label for="${o}"><span class="visually-hidden">Select row</span></label></td>`):i.insertAdjacentHTML("afterbegin",`<td class="td--fixed selectrow selected"><input type="checkbox" name="row" id="${o}" ${i.hasAttribute("data-selected")?'checked="true"':""}/><label for="${o}"><span class="visually-hidden">Select row</span></label></td>`)}}),e.addEventListener("change",i=>{if(i&&i.target instanceof HTMLElement&&i.target.closest(".selectrow input")){const l=i.target.closest(".selectrow input"),o=i.target.closest("tr"),n=e.querySelectorAll('.selectrow input[type="checkbox"]').length,r=e.querySelectorAll('.selectrow input[type="checkbox"]:checked').length;a.setAttribute("data-selected",n==r?"all":r);const s=new CustomEvent("row-selected",{detail:{rowIndex:o.getAttribute("data-index"),checked:!!l.checked}});t.dispatchEvent(s)}}),a.addEventListener("selected",i=>{if(i.detail.selected=="0"){Array.from(e.querySelectorAll('.selectrow input[type="checkbox"]')).forEach(o=>{o.checked=!1});const l=new CustomEvent("all-rows-unselected");t.dispatchEvent(l)}else if(i.detail.selected=="all"){Array.from(e.querySelectorAll('.selectrow input[type="checkbox"]')).forEach(o=>{o.checked=!0});const l=new CustomEvent("all-rows-selected");t.dispatchEvent(l)}})},at=(t,e,a,i,l)=>{et(t,e),it(t,e),a.addEventListener("change",o=>{o&&o.target instanceof HTMLElement&&o.target.closest("[data-sort]")&&lt(e,a,l)})},et=(t,e)=>{e.addEventListener("click",a=>{if(a&&a.target instanceof HTMLElement&&a.target.closest("[data-sort]")){const i=a.target.closest("[data-sort]");i.setAttribute("data-sort","true"),Array.from(e.querySelectorAll("th[data-sort]")).forEach(r=>{r!=i&&(r.setAttribute("data-sort",""),r.removeAttribute("data-order-by"),i.setAttribute("title","Click to sort ascending"))}),i.hasAttribute("data-order-by")&&i.getAttribute("data-order-by")=="asc"?(i.setAttribute("data-order-by","desc"),i.setAttribute("title","Click to sort ascending")):(i.setAttribute("data-order-by","asc"),i.setAttribute("title","Click to sort descending"));const l=new CustomEvent("sort-by-heading",{detail:{heading:i.textContent,sortBy:i.getAttribute("data-order-by"),ref:i.getAttribute("data-ref")}});t.dispatchEvent(l);const o=i.textContent.trim(),n=i.getAttribute("data-order-by");t.hasAttribute("data-submit")||D(e,o,n)}})},it=(t,e)=>{var a;const i=t.querySelector("iam-actionbar");if(!i)return!1;const l=(a=i.shadowRoot)===null||a===void 0?void 0:a.querySelector("input#search");if(!l)return!1;const o=l.getAttribute("id"),n=l.parentNode,r={};e.querySelectorAll("tbody td:not(.td--fixed)").forEach(s=>{s.querySelector(".td__content")?r[s.querySelector(".td__content").textContent]=s.querySelector(".td__content").textContent:r[s.textContent]=s.textContent}),l.setAttribute("list",`${o}_list`),l.setAttribute("autocomplete","off"),n.querySelector("datalist")||(n.innerHTML+=`<datalist id="${o}_list"></datalist>`),n.querySelector("datalist").innerHTML=`${Object.keys(r).map(s=>`<option value="${s}"></option>`).join("")}`},lt=(t,e,a)=>{if(e.getAttribute("data-ajax"))return!1;const i=t.querySelector("tbody");let l=e.querySelector('input[type="radio"][data-sort]:checked');if(e.querySelector("select[data-sort]")){const s=e.querySelector("select[data-sort]");l=e.querySelector(`select[data-sort] option:nth-child(${s.selectedIndex+1})`)}const o=l.getAttribute("data-sort"),n=l.getAttribute("data-order"),r=l.getAttribute("data-format");if(!o)return i.innerHTML=a.innerHTML,$(t),!1;D(t,o,n,r)},D=(t,e,a,i="")=>{const l=t.querySelector("tbody");let o=[];["asc","desc","descending"].includes(a)||(o=a.split(","));let n=[];Array.from(l.querySelectorAll("tr")).forEach(s=>{let b=s.querySelector('td[data-label="'+e+'"], th[data-label="'+e+'"]').textContent.trim();s.querySelector('[data-label="'+e+'"] .td__content')&&(b=s.querySelector('[data-label="'+e+'"] .td__content').textContent.trim()),o.length&&o.includes(b)&&(b=o.indexOf(b)),O(b)&&(b=B(b,10)),i&&i=="date"&&(b=new Date(b));const d={index:b,row:s};n.push(d)}),n.sort((s,b)=>s.index>b.index?1:-1),(a=="descending"||a=="desc")&&(n=n.reverse());let r="";n.forEach(s=>{r+=s.row.outerHTML}),l.innerHTML=r},ot=(t,e,a,i)=>{a.setAttribute("method","get");const l=t.querySelector("iam-actionbar");l&&l.addEventListener("change",o=>{a.submit()})},st=(t,e,a,i)=>{y(t,e,a,i);const l=t.querySelector("iam-actionbar");a.addEventListener("submit",o=>{y(t,e,a,i),o.preventDefault()}),l&&(l.addEventListener("change",o=>{y(t,e,a,i)}),l.addEventListener("search-submit",o=>{a.querySelector("input[data-search]")?a.querySelector("input[data-search]").value=o.detail.search:a.insertAdjacentHTML("beforeend",`<input type="hidden" name="search" data-search="${t.querySelector("iam-actionbar[data-search]").getAttribute("data-search")}" value="${o.detail.search}"/>`);const n=new CustomEvent("search-submit",{detail:o.details});t.dispatchEvent(n),y(t,e,a,i),console.log("hello")}))},y=function(t,e,a,i){return V(this,void 0,void 0,function*(){t.querySelector("iam-actionbar")&&!t.querySelector("iam-actionbar").closest("form")&&(a.querySelector(".duplicate-actionbar")||a.insertAdjacentHTML("beforeend",'<div class="duplicate-actionbar" style="visibility: hidden; pointer-events: none; position: absolute;"></div>'),a.querySelector(".duplicate-actionbar").innerHTML=t.querySelector("iam-actionbar").innerHTML),a.querySelector("input[name=show]")||a.insertAdjacentHTML("beforeend",`<input name="show" type="hidden" value="${t.getAttribute("data-show")}" />`),a.querySelector("input[name=page]")||a.insertAdjacentHTML("beforeend",`<input name="page" type="hidden" value="${t.getAttribute("data-page")}" />`),a.querySelector("input[name=page]").value=t.getAttribute("data-page"),a.querySelector("input[name=show]").value=t.getAttribute("data-show");const l=new FormData(a),o=new URLSearchParams(l).toString(),n=e.querySelectorAll("thead tr th:not(.expand-button-heading)"),r=e.querySelector("tbody"),s=a.getAttribute("data-ajax");t.classList.add("table--loading");const b=J(a);Array.from(a.querySelectorAll("[data-filter-count]")).forEach(c=>{c.innerHTML="",c.parentNode.classList.remove("hover")});let d=0;Object.values(b).forEach(c=>{typeof c=="object"&&Object.values(c).length?d+=Object.values(c).length:d++}),d&&Array.from(a.querySelectorAll("[data-filter-count]")).forEach(c=>{c.innerHTML+=`(${d})`,c.parentNode.classList.add("hover")}),window.controller||(window.controller=[]),window.controller[s]&&window.controller[s].abort(),window.controller[s]=new AbortController;const{signal:m}=controller[s];i.setAttribute("data-loading","true"),a.classList.add("processing");try{yield fetch(s+"?"+o,{signal:m,method:"get",credentials:"same-origin",headers:new Headers({"Content-Type":"application/json",Accept:"application/json","X-Requested-With":"XMLHttpRequest"})}).then(c=>c.json()).then(c=>{const v=a.hasAttribute("data-schema")?a.getAttribute("data-schema"):"data",I=a.hasAttribute("data-schema-total")?a.getAttribute("data-schema-total"):"meta.total",F=a.hasAttribute("data-schema-page")?a.getAttribute("data-schema-page"):"meta.current_page",A=p(c,I,15),_=p(c,F,1),E=p(c,v),P=t.hasAttribute("data-empty-msg")?t.getAttribute("data-empty-msg"):"No results found";E?(r.innerHTML="",E.forEach(f=>{const g=document.createElement("tr");n.forEach(u=>{let h="";const k=document.createElement("td");if(k.setAttribute("data-label",u.innerText),u.getAttribute("data-output")&&(h=u.getAttribute("data-output").replace(new RegExp(/{(.*?)}/,"gm"),function(S){return p(f,S.replace("{","").replace("}",""))})),u.hasAttribute("data-output-array")){const j=u.getAttribute("data-output"),S=p(f,j.replace("{","").replace("}",""));h="",S.forEach(T=>{const N=u.getAttribute("data-output-array");let x="";if(u.hasAttribute("data-output-array-property")&&u.hasAttribute("data-output-array-transform")){const L=p(T,u.getAttribute("data-output-array-property")),R=JSON.parse(u.getAttribute("data-output-array-transform"))[L];x=N.replace(`{${u.getAttribute("data-output-array-property")}}`,R)}x=x.replace(new RegExp(/{(.*?)}/,"gm"),function(L){return p(T,L.replace("{","").replace("}",""))}),h+=x})}u.hasAttribute("data-transform")&&(h=JSON.parse(u.getAttribute("data-transform"))[h],!h&&u.hasAttribute("data-default")&&(h=u.getAttribute("data-default"))),k.innerHTML=h,g.appendChild(k)}),r.appendChild(g)}),t.setAttribute("data-total",parseInt(A)),t.setAttribute("data-page",parseInt(_)),i.setAttribute("data-total",A),i.setAttribute("data-page",_),Array.from(a.querySelectorAll("[data-ajax-query]")).forEach(f=>{const g=p(c,f.getAttribute("data-ajax-query"),"");f.hasAttribute("data-total")?f.setAttribute("data-total",g):f.innerHTML=g}),parseInt(A)==0&&(r.innerHTML=`<tr><td colspan="100%"><span>${P}</span></td></tr>`),t.classList.remove("table--loading"),window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Ajax table loaded",url:s,formData:o}),M(t,e,a,i),z(t,e,a,i)):r.innerHTML='<tr><td colspan="100%"><span>Error loading table</span></td></tr>',i.removeAttribute("data-loading"),a.classList.remove("processing"),e.querySelectorAll("tbody tr").length<parseInt(t.getAttribute("data-show"))&&i.classList.add("d-none")})}catch(c){console.log(c)}})};class rt extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const e=document.createElement("template");e.innerHTML=`
     <style>