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

package/assets/js/scripts.bundle.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.6.4--beta3
+  * iamKey v7.6.4--beta4
   * Copyright 2022-2026 iamproperty
   */(function(d){typeof define=="function"&&define.amd?define(d):d()})((function(){"use strict";var d=a=>{a.classList.add("js-enabled"),(navigator.userAgent.indexOf("MSIE")!==-1||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie")},g=a=>{var t=function(c){var r=document.querySelector('label[for="'.concat(c.replace("#",""),'"]')),o=document.querySelector(c+" summary"),i=document.querySelector("dialog".concat(c)),n=document.querySelector("detail".concat(c));r instanceof HTMLElement?r.click():o instanceof HTMLElement?o.click():i instanceof HTMLElement?i.showModal():n instanceof HTMLElement&&n.addAttribute("open")};location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&e.state.type=="pagination"){var c=document.querySelector("#".concat(e.state.form)),r=document.querySelector("#".concat(e.state.form," [data-pagination]"));r?r.value=e.state.page:c.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),c.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(e=>{e?.closest("iam-form")||e.addEventListener("submit",c=>{var r;e.querySelector(":invalid")&&(e.classList.add("was-validated"),(r=e?.querySelector("input:invalid"))===null||r===void 0||r.scrollIntoView(),c.preventDefault())})}),document.addEventListener("click",e=>{var c;if(e&&e.target instanceof HTMLElement&&e.target.matches("form button:not([type=button])")){var r=e.target.closest("form");r?.closest("iam-form")||(Array.from(r.querySelectorAll("[data-password-type]")).forEach(o=>{o.setAttribute("type","password")}),(r.querySelector(":invalid")||r.querySelector('.pwd-checker[data-strength="1"]')||r.querySelector('.pwd-checker[data-strength="2"]'))&&(r.classList.add("was-validated"),(c=r?.querySelector("input:invalid"))===null||c===void 0||c.scrollIntoView(),e.preventDefault()),r.querySelector("iam-multiselect[data-is-required][data-error]")&&(r.classList.add("was-validated"),e.preventDefault()))}}),document.addEventListener("keydown",e=>{e.key==="Escape"&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(e=>{var c=e.closest("label");c.setAttribute("data-percent",e.getAttribute("value"))})};function m(){window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",a=>{var t=a.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var e=a.target.closest("summary"),c=a.target.closest("a"),r=a.target.closest("button");e&&window.dataLayer.push({event:"openDetails",detailsTitle:e.textContent||""}),c&&window.dataLayer.push({event:"linkClicked",linkText:c.hasAttribute("title")?c.getAttribute("title")||"":c.textContent||"",class:c.hasAttribute("class")&&c.getAttribute("class")||"",href:c.getAttribute("href")||""}),r&&window.dataLayer.push({event:"buttonClicked",buttonText:r.textContent||"",class:r.hasAttribute("class")&&r.getAttribute("class")||""})}})}window.triggerDynamicEvent=function(a){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:"change";console.log("event"),a.hasAttribute("data-change-events")&&t=="change"&&l(a,a.getAttribute("data-change-events")),a.hasAttribute("data-click-events")&&t=="click"&&l(a,a.getAttribute("data-click-events"))};var p=()=>{document.addEventListener("change",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&l(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-change-events]")&&l(a.target,a.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",a=>{a&&a.target instanceof HTMLElement&&a.target.closest("[data-click-events]")&&l(a.target,a.target.closest("[data-click-events]").getAttribute("data-click-events"))})},l=(a,t)=>{if(t||(t=a.parentNode.getAttribute("data-change-events")),!t)return!1;Array.from(JSON.parse(t)).forEach(e=>{v(a,e)})},v=(a,t)=>{if("matches"in t)return t.matches=="any"||a.value==t.matches?u(a,t,"if"):u(a,t,"else"),!1;if("in-list"in t){var e=document.querySelector("".concat(t["in-list"],' option[value="').concat(a.value,'"]'));return document.querySelector("".concat(t["in-list"],' option[value="').concat(a.value,'"]'))?u(e,t,"if"):u(e,t,"else"),!1}else"event"in t&&u(a,t,"event")},u=(a,t,e)=>{if(!(e in t))return!1;switch(t[e]){case"hide":if(document.querySelector(t.target)){var c=document.querySelector(t.target);c.classList.add("js-hide"),Array.from(c.querySelectorAll("[data-required]")).forEach(n=>{n.removeAttribute("required")})}break;case"show":if(document.querySelector(t.target)){var r=document.querySelector(t.target);r.classList.remove("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(n=>{n.closest(".js-hide")||n.setAttribute("required","true")})}break;case"populate-form":h(a,t);break;case"dispatchEvent":var o=new Event(t.value);document.querySelector("".concat(t.target)).dispatchEvent(o);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(n){n.setAttribute(t.attribute,t.value)});break;case"focus":document.querySelector("".concat(t.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(n){n.removeAttribute(t.attribute)});break;case"updateValue":document.querySelector("".concat(t.target)).value=t.value?t.value:"";var i=new Event("change");document.querySelector("".concat(t.target)).dispatchEvent(i);break;case"submitForm":document.querySelector("".concat(t.target)).submit();break;case"openLink":document.querySelector("".concat(t.target)).value&&(window.location.href=document.querySelector("".concat(t.target)).value);break}},h=function(t,e){var c=JSON.parse(t.getAttribute("data-values")),r=document.querySelector(e.target);if(!c)return!1;Object.keys(c).forEach(o=>{document.getElementById(o)&&document.getElementById(o).tagName=="SPAN"&&(document.getElementById(o).innerHTML=c[o]),r.querySelector('select[name="'.concat(o,'"] [value="').concat(c[o],'"]'))?(r.querySelector('select[name="'.concat(o,'"]')).value=c[o],t.hasAttribute("data-lock-fields")&&(r.querySelector('select[name="'.concat(o,'"]')).disabled=!0)):r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]'))?(Array.from(r.querySelectorAll('input[name="'.concat(o,'"][type="radio"]'))).forEach(function(i){i.disabled=!0}),r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]')).checked=!0,r.querySelector('input[name="'.concat(o,'"][type="radio"][value="').concat(c[o],'"]')).disabled=!1):r.querySelector('input[name="'.concat(o,'"]'))&&(r.querySelector('input[name="'.concat(o,'"]')).value=c[o],t.hasAttribute("data-lock-fields")&&r.querySelector('input[name="'.concat(o,'"]')).setAttribute("readonly","true"))})},b=function(a,t,e,c){function r(o){return o instanceof e?o:new e(function(i){i(o)})}return new(e||(e=Promise))(function(o,i){function n(s){try{f(c.next(s))}catch(y){i(y)}}function q(s){try{f(c.throw(s))}catch(y){i(y)}}function f(s){s.done?o(s.value):r(s.value).then(n,q)}f((c=c.apply(a,t||[])).next())})};document.addEventListener("DOMContentLoaded",()=>b(void 0,void 0,void 0,function*(){m(),p(),d(document.body),g()}))}));
 //# sourceMappingURL=scripts.bundle.js.map

package/assets/js/scripts.bundle.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.6.4--beta3
+  * iamKey v7.6.4--beta4
   * Copyright 2022-2026 iamproperty
   */
 !function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";window.triggerDynamicEvent=function(t){var a=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"change";console.log("event"),t.hasAttribute("data-change-events")&&"change"==a&&e(t,t.getAttribute("data-change-events")),t.hasAttribute("data-click-events")&&"click"==a&&e(t,t.getAttribute("data-click-events"))};var e=(e,a)=>{if(a||(a=e.parentNode.getAttribute("data-change-events")),!a)return!1;Array.from(JSON.parse(a)).forEach(a=>{t(e,a)})},t=(e,t)=>{if("matches"in t)return"any"==t.matches||e.value==t.matches?a(e,t,"if"):a(e,t,"else"),!1;if("in-list"in t){var n=document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'));return document.querySelector("".concat(t["in-list"],' option[value="').concat(e.value,'"]'))?a(n,t,"if"):a(n,t,"else"),!1}"event"in t&&a(e,t,"event")},a=(e,t,a)=>{if(!(a in t))return!1;switch(t[a]){case"hide":if(document.querySelector(t.target)){var r=document.querySelector(t.target);r.classList.add("js-hide"),Array.from(r.querySelectorAll("[data-required]")).forEach(e=>{e.removeAttribute("required")})}break;case"show":if(document.querySelector(t.target)){var c=document.querySelector(t.target);c.classList.remove("js-hide"),Array.from(c.querySelectorAll("[data-required]")).forEach(e=>{e.closest(".js-hide")||e.setAttribute("required","true")})}break;case"populate-form":n(e,t);break;case"dispatchEvent":var o=new Event(t.value);document.querySelector("".concat(t.target)).dispatchEvent(o);break;case"setAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.setAttribute(t.attribute,t.value)});break;case"focus":document.querySelector("".concat(t.target)).focus();break;case"removeAttribute":Array.from(document.querySelectorAll("".concat(t.target))).forEach(function(e){e.removeAttribute(t.attribute)});break;case"updateValue":document.querySelector("".concat(t.target)).value=t.value?t.value:"";var i=new Event("change");document.querySelector("".concat(t.target)).dispatchEvent(i);break;case"submitForm":document.querySelector("".concat(t.target)).submit();break;case"openLink":document.querySelector("".concat(t.target)).value&&(window.location.href=document.querySelector("".concat(t.target)).value)}},n=function(e,t){var a=JSON.parse(e.getAttribute("data-values")),n=document.querySelector(t.target);if(!a)return!1;Object.keys(a).forEach(t=>{document.getElementById(t)&&"SPAN"==document.getElementById(t).tagName&&(document.getElementById(t).innerHTML=a[t]),n.querySelector('select[name="'.concat(t,'"] [value="').concat(a[t],'"]'))?(n.querySelector('select[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&(n.querySelector('select[name="'.concat(t,'"]')).disabled=!0)):n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]'))?(Array.from(n.querySelectorAll('input[name="'.concat(t,'"][type="radio"]'))).forEach(function(e){e.disabled=!0}),n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).checked=!0,n.querySelector('input[name="'.concat(t,'"][type="radio"][value="').concat(a[t],'"]')).disabled=!1):n.querySelector('input[name="'.concat(t,'"]'))&&(n.querySelector('input[name="'.concat(t,'"]')).value=a[t],e.hasAttribute("data-lock-fields")&&n.querySelector('input[name="'.concat(t,'"]')).setAttribute("readonly","true"))})};document.addEventListener("DOMContentLoaded",()=>{return t=void 0,a=void 0,r=function*(){var t,a;window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"Pageview",pageTitle:document.title}),document.addEventListener("click",e=>{var t=e.target.closest("[open] summary");if(t)window.dataLayer.push({event:"closeDetails",detailsTitle:t.textContent||""});else{var a=e.target.closest("summary"),n=e.target.closest("a"),r=e.target.closest("button");a&&window.dataLayer.push({event:"openDetails",detailsTitle:a.textContent||""}),n&&window.dataLayer.push({event:"linkClicked",linkText:n.hasAttribute("title")?n.getAttribute("title")||"":n.textContent||"",class:n.hasAttribute("class")&&n.getAttribute("class")||"",href:n.getAttribute("href")||""}),r&&window.dataLayer.push({event:"buttonClicked",buttonText:r.textContent||"",class:r.hasAttribute("class")&&r.getAttribute("class")||""})}}),document.addEventListener("change",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("keyup",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-change-events]")&&e(t.target,t.target.closest("[data-change-events]").getAttribute("data-change-events"))}),document.addEventListener("click",t=>{t&&t.target instanceof HTMLElement&&t.target.closest("[data-click-events]")&&e(t.target,t.target.closest("[data-click-events]").getAttribute("data-click-events"))}),(a=document.body).classList.add("js-enabled"),(-1!==navigator.userAgent.indexOf("MSIE")||navigator.appVersion.indexOf("Trident/")>0)&&a.classList.add("ie"),t=function(e){var t=document.querySelector('label[for="'.concat(e.replace("#",""),'"]')),a=document.querySelector(e+" summary"),n=document.querySelector("dialog".concat(e)),r=document.querySelector("detail".concat(e));t instanceof HTMLElement?t.click():a instanceof HTMLElement?a.click():n instanceof HTMLElement?n.showModal():r instanceof HTMLElement&&r.addAttribute("open")},location.hash&&t(location.hash),window.addEventListener("hashchange",function(){t(location.hash)},!1),addEventListener("popstate",e=>{if(e&&e.state&&e.state.type&&"pagination"==e.state.type){var t=document.querySelector("#".concat(e.state.form)),a=document.querySelector("#".concat(e.state.form," [data-pagination]"));a?a.value=e.state.page:t.innerHTML+='<input name="page" type="hidden" data-pagination="true" value="'.concat(e.state.page,'" />'),t.dispatchEvent(new Event("submit"))}}),Array.from(document.querySelectorAll("form")).forEach(e=>{e?.closest("iam-form")||e.addEventListener("submit",t=>{var a;e.querySelector(":invalid")&&(e.classList.add("was-validated"),null===(a=e?.querySelector("input:invalid"))||void 0===a||a.scrollIntoView(),t.preventDefault())})}),document.addEventListener("click",e=>{var t;if(e&&e.target instanceof HTMLElement&&e.target.matches("form button:not([type=button])")){var a=e.target.closest("form");a?.closest("iam-form")||(Array.from(a.querySelectorAll("[data-password-type]")).forEach(e=>{e.setAttribute("type","password")}),(a.querySelector(":invalid")||a.querySelector('.pwd-checker[data-strength="1"]')||a.querySelector('.pwd-checker[data-strength="2"]'))&&(a.classList.add("was-validated"),null===(t=a?.querySelector("input:invalid"))||void 0===t||t.scrollIntoView(),e.preventDefault()),a.querySelector("iam-multiselect[data-is-required][data-error]")&&(a.classList.add("was-validated"),e.preventDefault()))}}),document.addEventListener("keydown",e=>{"Escape"===e.key&&document.querySelector(".dialog--transactional[open], .dialog--acknowledgement[open]")&&(e.preventDefault(),e.stopPropagation())}),Array.from(document.querySelectorAll("label progress")).forEach(e=>{e.closest("label").setAttribute("data-percent",e.getAttribute("value"))})},new((n=void 0)||(n=Promise))(function(e,c){function o(e){try{l(r.next(e))}catch(e){c(e)}}function i(e){try{l(r.throw(e))}catch(e){c(e)}}function l(t){t.done?e(t.value):function(e){return e instanceof n?e:new n(function(t){t(e)})}(t.value).then(o,i)}l((r=r.apply(t,a||[])).next())});var t,a,n,r})});

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

@@ -11,41 +11,42 @@
   :host {
     display: inline;
     position: relative;
-    text-decoration: underline;
-    text-decoration-style: dashed;
-    text-underline-offset: 0.2em;
     overflow-anchor: none; 
     cursor: pointer;
+    margin-right: 0.25rem;
+  }
+
+  slot {
+    display: inline;
+  }
+
+  :host(:empty) {
     display: inline-block;
     width: 1rem;
     height: 1lh;
     min-height: 1rem;
     vertical-align: text-top;
+    margin-right: 0;
   }
 
   .tooltip__anchor {
 
     anchor-name: --anchor;
-    position: absolute;
-    display: block;
-    inset: 0;
-    height: 100%;
-    width: 100%;
-    min-width: 1rem;
-    left: auto;
-    right: 0;
+    position: relative;
+    display: inline-block;
   }
 
-  :host(:empty) .tooltip__anchor{
+  .tooltip__anchor {
 
     height: 1rem;
     width: 1rem;
     background-color: var(--colour, var(--colour-info));
     border-radius: 50%;
-    top: 50%;
-    translate: 0% -50%;
+    margin-bottom: calc(calc(1lh - 1rem) / 2);
+    vertical-align: bottom;
   }
-  :host(:empty) .tooltip__anchor:after {
+  
+  .tooltip__anchor:after {
     font-family: "Font Awesome 6 Pro";
     font-weight: 900;
     content: "\?";

package/assets/sass/elements/button__group.css

@@ -5,6 +5,8 @@
     display: flex;
     flex-direction: column;
     row-gap: var(--gap);
+    reading-flow: source-order;
+    margin-bottom: 1.5rem;
 
     .btn {
       margin-inline-end: 0;
@@ -15,37 +17,73 @@
       margin: 0;
     }
 
+    .btn-tertiary {
+      max-width: fit-content;
+      margin-inline: auto;
+      order: 3;
+      reading-order: 3;
+    }
     .btn-secondary {
       order: 2;
+      reading-order: 2;
     }
     .btn-primary {
       order: 1;
+      reading-order: 1;
+    }
+
+    .btn-compact {
+
+      max-width: fit-content;
+      margin-inline: auto;
     }
   }
+  :is(iam-form,form) .btn__group{
+    padding-top: 1rem;
+  }
   @container (min-width: 36em) {
     .btn__group {
       flex-direction: row;
       row-gap: 0;
-      column-gap: var(--gap);
-      margin-bottom: 1.5rem;
+      gap: var(--gap);
+      flex-wrap: wrap;
 
       .btn {
           
         max-width: fit-content;
         white-space: nowrap;
+        margin-block: auto;
       }
 
-        
-      .btn-secondary {
+      
+      .btn-tertiary {
+        max-width: fit-content;
+        margin-inline: 0;
+        margin-block: auto;
         order: 1;
+        reading-order: 1;
       }
-      .btn-primary {
+      .btn-secondary {
         order: 2;
+        reading-order: 2;
+      }
+      .btn-primary {
+        order: 3;
+        reading-order: 3;
+      }
+      .btn-compact {
+        
+        margin-inline: 0;
+        margin-block: auto;
       }
     }
     .btn__group.text-end {
       justify-content: flex-end;
     }
+    :is(iam-form,form) .btn__group{
+      justify-content: flex-end;
+      padding-top: 3rem;
+    }
     iam-modal .btn__group:last-child .btn,
     dialog .btn__group:last-child .btn {
       margin-bottom: 0;

package/assets/sass/elements/container.scss

@@ -6,17 +6,22 @@
 
 
 @layer elements {
+  // #region contain
   // #region container
   .container {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    padding: var(--container-padding);
 
-    grid-column: container !important;
     container-type: inline-size;
     width: 100%;
 
+    &:not([class*='col-']){
+
+      grid-column: container !important;
+      padding: var(--container-padding);
+    }
+
     &:not(:has(.row)):has([class*='col-']) {
       display: grid;
       grid-template-columns:

package/assets/sass/foundations/colours.scss

@@ -23,18 +23,21 @@
     }
   }
 
-  :is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary) {
-
-    --colour-heading: var(--colour-white);
-    --colour-body: var(--colour-white);
-    color: var(--colour-white);
+  @scope (:is(.bg-primary, .bg-danger, .bg-dark, .gradient-primary)) to ([class*='bg-']) {
+    
+    :scope {
+        
+      --colour-heading: var(--colour-white);
+      --colour-body: var(--colour-white);
+      color: var(--colour-white);
 
-    > * {
+    }
+    
+    :scope > * {
       
       color-scheme: dark;
     }
   }
-
   // #region When the theme is set to dark via the dark mode component
   // OR when the dark mode is set via the browser or device when no component is present