@iamproperty/components 7.7.1--beta6 → 7.7.1--beta8

package/assets/js/components/header/header.component.js

@@ -11,61 +11,61 @@ class iamHeader extends HTMLElement {
         const assetLocation = document.body.hasAttribute('data-assets-location')
             ? document.body.getAttribute('data-assets-location')
             : '/assets';
-        const loadCSS = `@import "${assetLocation}/css/components/header.css";`;
+        const loadCSS = `@import "${assetLocation}/css/components/header.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = /*HTML*/ `
-    <style>
-    ${loadCSS}
-    </style>
-    <div class="header-banner">
-      <div class="gradient-overflow">
-        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.72 776.73" class="gradient-background">
-          <defs>
-            <style>
-              .cls-1 {
-                fill: url(#linear-gradient-2);
-                opacity: .15;
-              }
-
-              .cls-2 {
-                fill: url(#linear-gradient-3);
-                opacity: .2;
-              }
-
-              .cls-3 {
-                fill: url(#linear-gradient);
-                opacity: .1;
-              }
-            </style>
-            <linearGradient id="linear-gradient" x1="113.75" y1="113.75" x2="662.98" y2="662.98" gradientUnits="userSpaceOnUse">
-              <stop offset="0" stop-color="#54ffff" stop-opacity="0"/>
-              <stop offset="1" stop-color="#54ffff"/>
-            </linearGradient>
-            <linearGradient id="linear-gradient-2" x1="610.21" y1="166.51" x2="166.51" y2="610.21" xlink:href="#linear-gradient"/>
-            <linearGradient id="linear-gradient-3" x1="388.36" y1="177.95" x2="388.36" y2="598.78" xlink:href="#linear-gradient"/>
-          </defs>
-          <g id="Layer_1-2" data-name="Layer 1">
-            <g>
-              <path class="cls-3" d="M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23"/>
-              <path class="cls-1" d="M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36"/>
-              <path class="cls-2" d="M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0"/>
-            </g>
-          </g>
-        </svg>
-      </div>
-      <div class="picture-overflow">
-        <picture>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
-        </picture>
-      </div>
-      <div class="container">
-        <slot name="before"></slot>
-        <slot></slot>
-        <slot name="badge"></slot>
-        <slot name="panel" class="admin-panel"></slot>
-        <slot name="toolbox" class="admin-panel"></slot>
-      </div>
-    </div>
+        template.innerHTML = /*HTML*/ `
+    <style>
+    ${loadCSS}
+    </style>
+    <div class="header-banner">
+      <div class="gradient-overflow">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 776.72 776.73" class="gradient-background">
+          <defs>
+            <style>
+              .cls-1 {
+                fill: url(#linear-gradient-2);
+                opacity: .15;
+              }
+
+              .cls-2 {
+                fill: url(#linear-gradient-3);
+                opacity: .2;
+              }
+
+              .cls-3 {
+                fill: url(#linear-gradient);
+                opacity: .1;
+              }
+            </style>
+            <linearGradient id="linear-gradient" x1="113.75" y1="113.75" x2="662.98" y2="662.98" gradientUnits="userSpaceOnUse">
+              <stop offset="0" stop-color="#54ffff" stop-opacity="0"/>
+              <stop offset="1" stop-color="#54ffff"/>
+            </linearGradient>
+            <linearGradient id="linear-gradient-2" x1="610.21" y1="166.51" x2="166.51" y2="610.21" xlink:href="#linear-gradient"/>
+            <linearGradient id="linear-gradient-3" x1="388.36" y1="177.95" x2="388.36" y2="598.78" xlink:href="#linear-gradient"/>
+          </defs>
+          <g id="Layer_1-2" data-name="Layer 1">
+            <g>
+              <path class="cls-3" d="M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23"/>
+              <path class="cls-1" d="M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36"/>
+              <path class="cls-2" d="M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0"/>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div class="picture-overflow">
+        <picture>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+        </picture>
+      </div>
+      <div class="container">
+        <slot name="before"></slot>
+        <slot></slot>
+        <slot name="badge"></slot>
+        <slot name="panel" class="admin-panel"></slot>
+        <slot name="toolbox" class="admin-panel"></slot>
+      </div>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }

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

@@ -1,9 +1,9 @@
 /*!
-  * iamKey v7.7.1--beta6
+  * iamKey v7.7.1--beta8
   * Copyright 2022-2026 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"header"});class o extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
     <style>
-    @layer elements{.container{display:block;margin-left:auto;margin-right:auto;container-type:inline-size;width:100%}.container:not([class*=col-]){grid-column:container !important;padding:var(--container-padding)}.container:not(:has(.row)):has([class*=col-]){display:grid;grid-template-columns:[content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end];column-gap:1rem}.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child){--col-start: auto}@media screen and (min-width: 36em){.container [class*=sm-col-span-]:not(:first-child){--col-start: auto}}@media screen and (min-width: 62em){.container [class*=md-col-span-]:not(:first-child){--col-start: auto}}.container:not(.container-fluid){max-width:var(--container-max-width)}.container .container:not(.container-xs-breakout){padding-left:0;padding-right:0;padding-bottom:0;padding-top:0}.container[class*=bg-]{padding-top:3rem;padding-bottom:2rem}.container[class*=bg-]+.container:not([class*=bg-]){padding-top:2rem}.container:before{display:table;clear:both;content:""}.container:after{display:table;clear:both;content:""}.container.container-xs-breakout{margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem)}@media screen and (min-width: 36em){.container.container-xs-breakout{margin-left:auto;margin-right:auto;width:100%}}:host .container{display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);width:100%}main>.row{padding-bottom:1rem}main>.row[class*=bg-]{padding-top:3rem;padding-bottom:2rem}main>.row[class*=bg-]+:is(.row,.container):not([class*=bg-]){padding-top:2rem}}@layer elements{.admin-panel{--padding-x: 1.5rem;--padding-top: 1rem;--padding-bottom: 1rem;--mh-modifier: 4.5rem;--mh-padding-inline: var(--padding-x);display:block;padding:var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);box-shadow:0px 6px 12px rgba(0, 0, 0, 0.11);background-color:var(--colour-canvas-2);border-radius:.5rem;margin-bottom:1.5rem;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);overflow:hidden;&:has(:is([class*=cols-],[class*=col-start-],[class*=col-end-],[class*=col-span-])){display:grid;>*{grid-column:var(--col-start, col-1-start)/var(--col-end, col-12-end)}}&:empty{display:none}>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.admin-panel__heading):not(.lead):first-child{--gradient-direction: -90deg !important;background-color:var(--colour-success);&:not([class*=bg-]){color:var(--colour-primary-theme);background-image:linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)}margin:calc(var(--padding-top)*-1) calc(var(--padding-x)*-1) var(--padding-top) calc(var(--padding-x)*-1);display:block;border-top-left-radius:.5rem;border-top-right-radius:.5rem}>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child,.admin-panel__heading>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead){font-size:1.125rem;line-height:1.5rem;font-weight:bold;padding:1rem 1.5rem;max-width:unset}>:is(.admin-panel__heading):first-child{display:flex !important;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem 1.5rem;>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){padding:0;margin-inline-end:auto}.btn{--btn-margin: 0;margin-bottom:0}.dialog__wrapper+.btn{--btn-margin: 0.25rem;margin-inline-end:0}@media(prefers-color-scheme: light){.btn-action,.dialog__wrapper{--colour-canvas-2: #ffffff;--colour-heading: var(--colour-primary);--colour-btn-action-hover-bg: var(--colour-light);--colour-btn-hover: var(--colour-primary);--colour-border: #d8d8d8}}}:is(iam-table,iam-table-basic,iam-table-no-submit,iam-table-submit,iam-table-ajax,.iam-table){margin:0 0 2rem 0;padding:0;box-shadow:none;background:none}&>*:not([class*=mb-]):not(.btn__group):last-child{margin-bottom:0 !important}&>*:is(p):last-child{padding-bottom:0 !important}& p{max-width:100%;padding-bottom:1.5rem}&>:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid){overflow:auto;&:before{top:100% !important}}&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child+:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid){padding-top:var(--padding-top);margin-top:calc(var(--padding-top)*-1)}&>:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid):last-child{padding-bottom:var(--padding-bottom);margin-bottom:calc(var(--padding-bottom)*-1) !important;&>*:not([class*=mb-]):last-child{margin-bottom:0 !important}&>*:is(p):last-child{padding-bottom:0 !important}}&>iam-pagination{margin-top:-1rem}&:has(.mh-fluid){max-height:100%;display:flex;flex-direction:column}&.grid{display:grid !important;grid-template-columns:subgrid !important;>*:not(:first-child){grid-column:var(--col-start, col-1-start)/var(--col-end, col-12-end)}}&>hr{margin-inline:calc(var(--padding-x)*-1)}}@container style(--theme: dark){.admin-panel{background-color:var(--colour-canvas-2);color:var(--colour-body);.bg-white{background-color:transparent !important;color:var(--white) !important}}}[class*=col].admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid)){min-height:calc(100% - 1.5rem)}.admin-panel:has(iam-actionbar){&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child{margin-bottom:0}iam-actionbar{background:var(--colour-canvas);margin-inline:calc(var(--padding-x)*-1);margin-bottom:var(--padding-top);&:first-child{margin-top:calc(var(--padding-top)*-1)}&:not(:first-child){border-radius:0}}&>:is(iam-table,iam-table-basic,iam-table-no-submit,iam-table-submit,iam-table-ajax){overflow:visible;&:first-child{margin-top:calc(var(--padding-top)*-1)}iam-actionbar{margin-top:0 !important;border-radius:0;box-shadow:none}}}details.admin-panel{summary:after{content:"\uF077";font-weight:bold;margin-left:0;height:2rem;width:2rem;text-align:center;line-height:2rem;margin-right:-0.5rem}summary:not(:has(.btn:hover)):hover:after{background:var(--colour-light);border-radius:50%}summary:not(:has(.btn:hover)):active:after{background:var(--colour-light);filter:brightness(85%);border-radius:50%}}details.admin-panel:not([open]){padding-bottom:0;summary:first-child{margin-bottom:0}summary:after{content:"\uF078"}}.admin-panel__footer:last-child{background-color:var(--wider-colour);padding-top:var(--padding-top);margin-inline:calc(var(--padding-x)*-1);padding-inline:var(--padding-x);padding-bottom:0;&>*:last-child{margin-bottom:0;padding-bottom:var(--padding-bottom);align-self:center}}.admin-panel__footer:not([class*=mb-]):last-child{margin-bottom:calc(var(--padding-bottom)*-1) !important}.sub-panel{background:var(--colour-canvas);padding:var(--spacer-1);border:1px solid var(--colour-border);border-radius:.25rem;font-weight:normal;margin-bottom:1rem;&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){font-size:1rem;line-height:1;margin-bottom:0;padding-bottom:.5rem;font-weight:normal}strong{font-weight:normal}.logo{height:1.5rem;width:1.5rem;object-fit:contain;padding:0;margin:0 auto .25rem auto;display:block}}}*,*::before,*::after{box-sizing:border-box}.container{box-sizing:border-box;position:relative;z-index:4}:host{padding-top:0 !important;margin-bottom:2rem;display:block !important}.header-banner{padding-top:2.75rem;max-width:120rem;margin-inline:auto;display:block;position:relative;height:auto}.header-banner>.picture-overflow{overflow:hidden;position:absolute;inset:0;z-index:3}.header-banner>.picture-overflow picture{display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;overflow:hidden;min-height:25rem;max-height:25rem}.header-banner>.picture-overflow picture img{display:block;position:absolute;z-index:1;inset:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%}.header-banner>.picture-overflow picture:after{content:"";display:block;position:absolute;z-index:2;inset:0;background:linear-gradient(300deg, rgb(30, 190, 230) 0%, rgb(0, 49, 60) 100%);opacity:.85}:host(.header--contain) .header-banner{padding-bottom:2rem}:host(.header--contain) .header-banner>picture{max-height:100%}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}:host(.has-breadcrumbs) .header-banner{padding-top:1rem}:host(.has-breadcrumbs) ::slotted(.breadcrumbs){margin-bottom:2rem !important}slot[name=badge]{display:block;position:absolute;top:0;left:0}:host(.has-panel) [name=panel]{display:block;text-align:center;margin-bottom:1rem;max-height:fit-content}::slotted([slot=panel]){color-scheme:light !important;--colour-heading: var(--colour-primary-theme);--colour-body: var(--colour-primary-theme);--colour-underline: var(--colour-secondary-theme);color:var(--colour-primary-theme)}::slotted(img[slot=panel]){max-width:4.75rem !important}:host(.has-panel) slot[name=panel]{container-type:inline-size;anchor-name:--anchor}:host(.has-panel) slot[name=badge]{position-anchor:--anchor;top:calc(anchor(top) + 1rem);left:calc(anchor(left) + 1rem);z-index:999}@media screen and (min-width: 62em){:host(.has-panel) .container{display:grid;column-gap:var(--gap);grid-template-columns:repeat(12, 1fr)}:host(.has-panel) slot:not([name]){display:block;grid-column-start:1;grid-column-end:7}:host(.has-panel) slot[name=before]{display:block;grid-column-start:1;grid-column-end:13}:host(.has-panel) slot[name=panel]{display:block;grid-column-start:8;grid-column-end:13}:host(.has-panel) .admin-panel{text-align:center}}:host(.has-toolbox){margin-bottom:4rem}:host(.has-toolbox) [name=toolbox]{display:flex;flex-wrap:wrap;text-align:center;margin-bottom:-3rem;width:fit-content;margin-inline:auto;gap:.5rem}::slotted([slot=toolbox]){margin:0 !important;color-scheme:light !important;--colour-heading: var(--colour-primary-theme);--colour-body: var(--colour-primary-theme);--colour-underline: var(--colour-secondary-theme);color:var(--colour-primary-theme)}::slotted(hr[slot=toolbox]){display:inline-block;vertical-align:top !important;margin-top:-0.25rem !important;margin-bottom:-0.25rem !important;background-color:var(--colour-muted) !important;width:1px !important;height:2.5rem !important}.gradient-overflow{overflow:hidden;position:absolute;inset:0;z-index:2}.gradient-background{position:absolute;left:75%;top:50%;transform:translate(-50%, -50%);width:54rem;aspect-ratio:1/1}/*# sourceMappingURL=assets/css/components/header.css.map */
+    @layer elements{.container{display:block;margin-left:auto;margin-right:auto;container-type:inline-size;width:100%}.container:not([class*=col-]){grid-column:container !important;padding:var(--container-padding)}.container:not(:has(.row)):has([class*=col-]){display:grid;grid-template-columns:[content-start col-1-start] 1fr [col-1-end col-2-start] 1fr [col-2-end col-3-start] 1fr [col-3-end col-4-start] 1fr [col-4-end col-5-start] 1fr [col-5-end col-6-start] 1fr [col-6-end col-7-start] 1fr [col-7-end col-8-start] 1fr [col-8-end col-9-start] 1fr [col-9-end col-10-start] 1fr [col-10-end col-11-start] 1fr [col-11-end col-12-start] 1fr [col-12-end content-end];column-gap:1rem}.container [class*=col-span-]:not([class*=-col-span-]):not(:first-child){--col-start: auto}@media screen and (min-width: 36em){.container [class*=sm-col-span-]:not(:first-child){--col-start: auto}}@media screen and (min-width: 62em){.container [class*=md-col-span-]:not(:first-child){--col-start: auto}}.container:not(.container-fluid){max-width:var(--container-max-width)}.container .container:not(.container-xs-breakout){padding-left:0;padding-right:0;padding-bottom:0;padding-top:0}.container[class*=bg-]{padding-top:3rem;padding-bottom:2rem}.container[class*=bg-]+.container:not([class*=bg-]){padding-top:2rem}.container:before{display:table;clear:both;content:""}.container:after{display:table;clear:both;content:""}.container.container-xs-breakout{margin-left:-1.25rem;margin-right:-1.25rem;width:calc(100% + 2.5rem)}@media screen and (min-width: 36em){.container.container-xs-breakout{margin-left:auto;margin-right:auto;width:100%}}:host .container{display:block;margin-left:auto;margin-right:auto;padding:var(--container-padding);width:100%}main>.row{padding-bottom:1rem}main>.row[class*=bg-]{padding-top:3rem;padding-bottom:2rem}main>.row[class*=bg-]+:is(.row,.container):not([class*=bg-]){padding-top:2rem}}@layer elements{.admin-panel{--padding-x: 1.5rem;--padding-top: 1rem;--padding-bottom: 1rem;--mh-modifier: 4.5rem;--mh-padding-inline: var(--padding-x);display:block;padding:var(--padding-top) var(--padding-x) var(--padding-bottom) var(--padding-x);box-shadow:0px 6px 12px rgba(0, 0, 0, 0.11);background-color:var(--colour-canvas-2);border-radius:.5rem;margin-bottom:1.5rem;outline:var(--contrast-outline-width, 0px) solid var(--colour-primary);overflow:hidden;&:has(:is([class*=cols-],[class*=col-start-],[class*=col-end-],[class*=col-span-])){display:grid;>*{grid-column:var(--col-start, col-1-start)/var(--col-end, col-12-end)}}&:empty{display:none}>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.admin-panel__heading):not(.lead):first-child{--gradient-direction: -90deg !important;background-color:var(--colour-success);&:not([class*=bg-]){color:var(--colour-primary-theme);background-image:linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)}margin:calc(var(--padding-top)*-1) calc(var(--padding-x)*-1) var(--padding-top) calc(var(--padding-x)*-1);display:block;border-top-left-radius:.5rem;border-top-right-radius:.5rem}>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child,.admin-panel__heading>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead){font-size:1.125rem;line-height:1.5rem;font-weight:bold;padding:1rem 1.5rem;max-width:unset}>:is(.admin-panel__heading):first-child{display:flex !important;flex-wrap:wrap;gap:1rem;align-items:center;padding:1rem 1.5rem;>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){padding:0;margin-inline-end:auto}.btn{--btn-margin: 0;margin-bottom:0}.dialog__wrapper+.btn{--btn-margin: 0.25rem;margin-inline-end:0}@media(prefers-color-scheme: light){.btn-action,.dialog__wrapper{--colour-canvas-2: #ffffff;--colour-heading: var(--colour-primary);--colour-btn-action-hover-bg: var(--colour-light);--colour-btn-hover: var(--colour-primary);--colour-border: #d8d8d8}}}:is(iam-table,iam-table-basic,iam-table-no-submit,iam-table-submit,iam-table-ajax,.iam-table){margin:0 0 2rem 0;padding:0;box-shadow:none;background:none}&>*:not([class*=mb-]):not(.btn__group):last-child{margin-bottom:0 !important}&>*:is(p):last-child{padding-bottom:0 !important}& p{max-width:100%;padding-bottom:1.5rem}&>:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid){overflow:auto;&:before{top:100% !important}}&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child+:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid){padding-top:var(--padding-top);margin-top:calc(var(--padding-top)*-1)}&>:is(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid):last-child{padding-bottom:var(--padding-bottom);margin-bottom:calc(var(--padding-bottom)*-1) !important;&>*:not([class*=mb-]):last-child{margin-bottom:0 !important}&>*:is(p):last-child{padding-bottom:0 !important}}&>iam-pagination{margin-top:-1rem}&:has(.mh-fluid){max-height:100%;display:flex;flex-direction:column}&.grid{display:grid !important;grid-template-columns:subgrid !important;>*:not(:first-child){grid-column:var(--col-start, col-1-start)/var(--col-end, col-12-end)}}&>hr{margin-inline:calc(var(--padding-x)*-1)}}@container style(--theme: dark){.admin-panel{background-color:var(--colour-canvas-2);color:var(--colour-body);.bg-white{background-color:transparent !important;color:var(--white) !important}}}[class*=col].admin-panel:first-child:last-child:not(:has(.mh-sm,.mh-md,.mh-lg,.mh-sm-sm,.mh-sm-md,.mh-sm-lg,.mh-md-sm,.mh-md-md,.mh-md-lg,.mh-fluid)){min-height:calc(100% - 1.5rem)}.admin-panel:has(iam-actionbar){&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6):not(.lead):first-child{margin-bottom:0}iam-actionbar{background:var(--colour-canvas);margin-inline:calc(var(--padding-x)*-1);margin-bottom:var(--padding-top);&:first-child{margin-top:calc(var(--padding-top)*-1)}&:not(:first-child){border-radius:0}}&>:is(iam-table,iam-table-basic,iam-table-no-submit,iam-table-submit,iam-table-ajax){overflow:visible;&:first-child{margin-top:calc(var(--padding-top)*-1)}iam-actionbar{margin-top:0 !important;border-radius:0;box-shadow:none}}}details.admin-panel{summary:after{content:"\uF077";font-weight:bold;margin-left:0;height:2rem;width:2rem;text-align:center;line-height:2rem;margin-right:-0.5rem}summary:not(:has(.btn:hover)):hover:after{background:var(--colour-light);border-radius:50%}summary:not(:has(.btn:hover)):active:after{background:var(--colour-light);filter:brightness(85%);border-radius:50%}}details.admin-panel:not([open]){padding-bottom:0;summary:first-child{margin-bottom:0}summary:after{content:"\uF078"}}.admin-panel__footer:last-child{background-color:var(--wider-colour);padding-top:var(--padding-top);margin-inline:calc(var(--padding-x)*-1);padding-inline:var(--padding-x);padding-bottom:0;&>*:last-child{margin-bottom:0;padding-bottom:var(--padding-bottom);align-self:center}}.admin-panel__footer:not([class*=mb-]):last-child{margin-bottom:calc(var(--padding-bottom)*-1) !important}.sub-panel{background:var(--colour-canvas);padding:var(--spacer-1);border:1px solid var(--colour-border);border-radius:.25rem;font-weight:normal;margin-bottom:1rem;&>:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6){font-size:1rem;line-height:1;margin-bottom:0;padding-bottom:.5rem;font-weight:normal}strong{font-weight:normal}.logo{height:1.5rem;width:1.5rem;object-fit:contain;padding:0;margin:0 auto .25rem auto;display:block}}}*,*::before,*::after{box-sizing:border-box}.container{box-sizing:border-box;position:relative;z-index:4}:host{padding-top:0 !important;display:block !important}:host .container{padding-bottom:var(--padding-bottom) !important}.header-banner{padding-top:var(--padding-top);max-width:120rem;margin-inline:auto;display:block;position:relative;height:auto}.header-banner>.picture-overflow{overflow:hidden;position:absolute;inset:0;z-index:3}.header-banner>.picture-overflow picture{display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;overflow:hidden;min-height:25rem;max-height:25rem}.header-banner>.picture-overflow picture img{display:block;position:absolute;z-index:1;inset:0;object-fit:cover;object-position:50% 50%;width:100%;height:100%}.header-banner>.picture-overflow picture:after{content:"";display:block;position:absolute;z-index:2;inset:0;background:linear-gradient(300deg, rgb(30, 190, 230) 0%, rgb(0, 49, 60) 100%);opacity:.85}:host(.header--contain) .header-banner{padding-bottom:2rem}:host(.header--contain) .header-banner>picture{max-height:100%}::slotted(.breadcrumb){margin-top:1.5rem !important;margin-bottom:-0.5rem !important}@media screen and (min-width: 62em){::slotted(.breadcrumb){position:absolute !important;top:0 !important;left:5.25rem !important}}:host(.has-breadcrumbs) .header-banner{padding-top:1rem}:host(.has-breadcrumbs) ::slotted(.breadcrumbs){margin-bottom:2rem !important}slot[name=badge]{display:block;position:absolute;top:0;left:0}:host(.has-panel) [name=panel]{display:block;text-align:center;margin-bottom:1rem;max-height:fit-content}::slotted([slot=panel]){color-scheme:light !important;--colour-heading: var(--colour-primary-theme);--colour-body: var(--colour-primary-theme);--colour-underline: var(--colour-secondary-theme);color:var(--colour-primary-theme)}::slotted(img[slot=panel]){max-width:4.75rem !important}:host(.has-panel) slot[name=panel]{container-type:inline-size;anchor-name:--anchor}:host(.has-panel) slot[name=badge]{position-anchor:--anchor;top:calc(anchor(top) + 1rem);left:calc(anchor(left) + 1rem);z-index:999}@media screen and (min-width: 62em){:host(.has-panel) .container{display:grid;column-gap:var(--gap);grid-template-columns:repeat(12, 1fr)}:host(.has-panel) slot:not([name]){display:block;grid-column-start:1;grid-column-end:7}:host(.has-panel) slot[name=before]{display:block;grid-column-start:1;grid-column-end:13}:host(.has-panel) slot[name=panel]{display:block;grid-column-start:8;grid-column-end:13}:host(.has-panel) .admin-panel{text-align:center}}:host(.has-toolbox){--padding-bottom: 1rem!important;margin-bottom:4rem !important}:host(.has-toolbox) [name=toolbox]{display:flex;flex-wrap:wrap;text-align:center;margin-bottom:-3rem;width:fit-content;margin-inline:auto;gap:.5rem}::slotted([slot=toolbox]){margin:0 !important;color-scheme:light !important;--colour-heading: var(--colour-primary-theme);--colour-body: var(--colour-primary-theme);--colour-underline: var(--colour-secondary-theme);color:var(--colour-primary-theme)}::slotted(hr[slot=toolbox]){display:inline-block;vertical-align:top !important;margin-top:-0.25rem !important;margin-bottom:-0.25rem !important;background-color:var(--colour-muted) !important;width:1px !important;height:2.5rem !important}.gradient-overflow{overflow:hidden;position:absolute;inset:0;z-index:2}.gradient-background{position:absolute;left:75%;top:50%;transform:translate(-50%, -50%);width:54rem;aspect-ratio:1/1}/*# sourceMappingURL=assets/css/components/header.component.css.map */
 
     </style>
     <div class="header-banner">

package/assets/js/components/header/header.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'header',\n});\nclass iamHeader extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/header.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = /*HTML*/ `\r\n    <style>\r\n    ${loadCSS}\r\n    </style>\r\n    <div class=\"header-banner\">\r\n      <div class=\"gradient-overflow\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 776.72 776.73\" class=\"gradient-background\">\r\n          <defs>\r\n            <style>\r\n              .cls-1 {\r\n                fill: url(#linear-gradient-2);\r\n                opacity: .15;\r\n              }\r\n\r\n              .cls-2 {\r\n                fill: url(#linear-gradient-3);\r\n                opacity: .2;\r\n              }\r\n\r\n              .cls-3 {\r\n                fill: url(#linear-gradient);\r\n                opacity: .1;\r\n              }\r\n            </style>\r\n            <linearGradient id=\"linear-gradient\" x1=\"113.75\" y1=\"113.75\" x2=\"662.98\" y2=\"662.98\" gradientUnits=\"userSpaceOnUse\">\r\n              <stop offset=\"0\" stop-color=\"#54ffff\" stop-opacity=\"0\"/>\r\n              <stop offset=\"1\" stop-color=\"#54ffff\"/>\r\n            </linearGradient>\r\n            <linearGradient id=\"linear-gradient-2\" x1=\"610.21\" y1=\"166.51\" x2=\"166.51\" y2=\"610.21\" xlink:href=\"#linear-gradient\"/>\r\n            <linearGradient id=\"linear-gradient-3\" x1=\"388.36\" y1=\"177.95\" x2=\"388.36\" y2=\"598.78\" xlink:href=\"#linear-gradient\"/>\r\n          </defs>\r\n          <g id=\"Layer_1-2\" data-name=\"Layer 1\">\r\n            <g>\r\n              <path class=\"cls-3\" d=\"M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23\"/>\r\n              <path class=\"cls-1\" d=\"M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36\"/>\r\n              <path class=\"cls-2\" d=\"M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0\"/>\r\n            </g>\r\n          </g>\r\n        </svg>\r\n      </div>\r\n      <div class=\"picture-overflow\">\r\n        <picture>\r\n          <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\r\n        </picture>\r\n      </div>\r\n      <div class=\"container\">\r\n        <slot name=\"before\"></slot>\r\n        <slot></slot>\r\n        <slot name=\"badge\"></slot>\r\n        <slot name=\"panel\" class=\"admin-panel\"></slot>\r\n        <slot name=\"toolbox\" class=\"admin-panel\"></slot>\r\n      </div>\r\n    </div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('bg-primary');\n        const picture = this.shadowRoot.querySelector('picture');\n        const source = this.shadowRoot.querySelector('picture img');\n        if (this.hasAttribute('image'))\n            source.setAttribute('src', this.getAttribute('image'));\n        else\n            picture.remove();\n        if (this.querySelector('[slot=\"panel\"]'))\n            this.classList.add('has-panel');\n        if (this.querySelector('[slot=\"toolbox\"]'))\n            this.classList.add('has-toolbox');\n        if (this.querySelector('.breadcrumbs:first-child'))\n            this.classList.add('has-breadcrumbs');\n    }\n}\nexport default iamHeader;\n"],"names":["iamHeader","template","picture","source"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,QACb,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsD9B,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,YAAY,EAC/B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,aAAa,EACtD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,MAAO,KAAK,aAAa,OAAO,CAAC,EAErDD,EAAQ,OAAM,EACd,KAAK,cAAc,gBAAgB,GACnC,KAAK,UAAU,IAAI,WAAW,EAC9B,KAAK,cAAc,kBAAkB,GACrC,KAAK,UAAU,IAAI,aAAa,EAChC,KAAK,cAAc,0BAA0B,GAC7C,KAAK,UAAU,IAAI,iBAAiB,CAC5C,CACJ"}
+{"version":3,"file":"header.component.min.js","sources":["header.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'header',\n});\nclass iamHeader extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/header.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = /*HTML*/ `\n    <style>\n    ${loadCSS}\n    </style>\n    <div class=\"header-banner\">\n      <div class=\"gradient-overflow\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 776.72 776.73\" class=\"gradient-background\">\n          <defs>\n            <style>\n              .cls-1 {\n                fill: url(#linear-gradient-2);\n                opacity: .15;\n              }\n\n              .cls-2 {\n                fill: url(#linear-gradient-3);\n                opacity: .2;\n              }\n\n              .cls-3 {\n                fill: url(#linear-gradient);\n                opacity: .1;\n              }\n            </style>\n            <linearGradient id=\"linear-gradient\" x1=\"113.75\" y1=\"113.75\" x2=\"662.98\" y2=\"662.98\" gradientUnits=\"userSpaceOnUse\">\n              <stop offset=\"0\" stop-color=\"#54ffff\" stop-opacity=\"0\"/>\n              <stop offset=\"1\" stop-color=\"#54ffff\"/>\n            </linearGradient>\n            <linearGradient id=\"linear-gradient-2\" x1=\"610.21\" y1=\"166.51\" x2=\"166.51\" y2=\"610.21\" xlink:href=\"#linear-gradient\"/>\n            <linearGradient id=\"linear-gradient-3\" x1=\"388.36\" y1=\"177.95\" x2=\"388.36\" y2=\"598.78\" xlink:href=\"#linear-gradient\"/>\n          </defs>\n          <g id=\"Layer_1-2\" data-name=\"Layer 1\">\n            <g>\n              <path class=\"cls-3\" d=\"M113.75,662.98c151.66,151.67,397.56,151.66,549.23,0,151.67-151.67,151.66-397.56,0-549.23-151.67-151.66-397.56-151.66-549.23,0-151.66,151.67-151.66,397.56,0,549.23\"/>\n              <path class=\"cls-1\" d=\"M74.62,388.36c0,173.27,140.47,313.74,313.74,313.74s313.74-140.47,313.74-313.74S561.64,74.62,388.36,74.62,74.62,215.09,74.62,388.36\"/>\n              <path class=\"cls-2\" d=\"M239.58,239.58c-82.17,82.17-82.17,215.4,0,297.57,82.17,82.17,215.4,82.17,297.57,0,82.17-82.17,82.17-215.4,0-297.57-82.17-82.17-215.4-82.17-297.57,0\"/>\n            </g>\n          </g>\n        </svg>\n      </div>\n      <div class=\"picture-overflow\">\n        <picture>\n          <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n        </picture>\n      </div>\n      <div class=\"container\">\n        <slot name=\"before\"></slot>\n        <slot></slot>\n        <slot name=\"badge\"></slot>\n        <slot name=\"panel\" class=\"admin-panel\"></slot>\n        <slot name=\"toolbox\" class=\"admin-panel\"></slot>\n      </div>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('bg-primary');\n        const picture = this.shadowRoot.querySelector('picture');\n        const source = this.shadowRoot.querySelector('picture img');\n        if (this.hasAttribute('image'))\n            source.setAttribute('src', this.getAttribute('image'));\n        else\n            picture.remove();\n        if (this.querySelector('[slot=\"panel\"]'))\n            this.classList.add('has-panel');\n        if (this.querySelector('[slot=\"toolbox\"]'))\n            this.classList.add('has-toolbox');\n        if (this.querySelector('.breadcrumbs:first-child'))\n            this.classList.add('has-breadcrumbs');\n    }\n}\nexport default iamHeader;\n"],"names":["iamHeader","template","picture","source"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,QACb,CAAC,EACD,MAAMA,UAAkB,WAAY,CAChC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsD9B,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,YAAY,EAC/B,MAAMC,EAAU,KAAK,WAAW,cAAc,SAAS,EACjDC,EAAS,KAAK,WAAW,cAAc,aAAa,EACtD,KAAK,aAAa,OAAO,EACzBA,EAAO,aAAa,MAAO,KAAK,aAAa,OAAO,CAAC,EAErDD,EAAQ,OAAM,EACd,KAAK,cAAc,gBAAgB,GACnC,KAAK,UAAU,IAAI,WAAW,EAC9B,KAAK,cAAc,kBAAkB,GACrC,KAAK,UAAU,IAAI,aAAa,EAChC,KAAK,cAAc,0BAA0B,GAC7C,KAAK,UAAU,IAAI,iBAAiB,CAC5C,CACJ"}

package/assets/js/components/inline-edit/inline-edit.component.js

@@ -13,22 +13,22 @@ class iamInlineEdit extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/inline-edit.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style class="styles">
-    
-    ${loadCSS}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    
-    <slot></slot>
-    <div class="btns" part="btns">
-      <button class="btn btn-action" id="save" part="save-btn"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel" part="cancel-btn">Cancel</button>
-    </div>
-    <div class="status pe-none" part="status">
-      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
-      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
-      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>
-    </div>
+        template.innerHTML = `
+    <style class="styles">
+    
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    
+    <slot></slot>
+    <div class="btns" part="btns">
+      <button class="btn btn-action" id="save" part="save-btn"><i class="fa-regular fa-save m-0"></i> Save</button><button class="btn btn-action" id="cancel" part="cancel-btn">Cancel</button>
+    </div>
+    <div class="status pe-none" part="status">
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saving"><i class="fa-regular fa-spinner fa-spin me-1"></i> Saving...</span>
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="saved"><i class="fa-regular fa-check me-1"></i> Saved</span>
+      <span class="btn btn-action border-0 bg-transparent prevent-invert d-none" id="notsaved"><i class="fa-regular fa-circle-info me-1"></i> Not Saved</span>
+    </div>
     `;
         shadowRoot.appendChild(template.content.cloneNode(true));
     }

package/assets/js/components/inline-edit/inline-edit.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta6
+  * iamKey v7.7.1--beta8
   * Copyright 2022-2026 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"inline edit"});class v extends HTMLElement{constructor(){super();const t=this.attachShadow({mode:"open"});document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const a=document.createElement("template");a.innerHTML=`
     <style class="styles">

package/assets/js/components/inline-edit/inline-edit.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'inline edit',\n});\nclass iamInlineEdit extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/inline-edit.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style class=\"styles\">\r\n    \r\n    ${loadCSS}\r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\r\n    \r\n    <slot></slot>\r\n    <div class=\"btns\" part=\"btns\">\r\n      <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\r\n    </div>\r\n    <div class=\"status pe-none\" part=\"status\">\r\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\r\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\r\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\r\n    </div>\r\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const inlineEdit = this;\n        const saveButton = this.shadowRoot.querySelector('#save');\n        const cancelButton = this.shadowRoot.querySelector('#cancel');\n        const input = this.querySelector('input, textarea, select');\n        const preview = this.querySelector('.preview');\n        const statusSaving = this.shadowRoot.querySelector('#saving');\n        const statusSaved = this.shadowRoot.querySelector('#saved');\n        const statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n        // Save the original value for later\n        let originalValue = input ? input.value : '';\n        // cancel\n        cancelButton.addEventListener('click', () => {\n            if (input) {\n                input.value = originalValue;\n                input.blur();\n            }\n            inlineEdit.blur();\n            inlineEdit.classList.remove('was-validated');\n            statusNotSaved.classList.add('d-none');\n            const cancelEvent = new CustomEvent('inline-edit-cancel', {\n                detail: { name: input.getAttribute('name') },\n            });\n            inlineEdit.dispatchEvent(cancelEvent);\n        });\n        // Save\n        saveButton.addEventListener('click', () => {\n            if (inlineEdit.querySelector(':invalid')) {\n                inlineEdit.classList.add('was-validated');\n                return false;\n            }\n            originalValue = input.value;\n            // dispatch save event\n            const saveEvent = new CustomEvent('inline-edit-save', {\n                detail: { name: input.getAttribute('name'), value: input.value },\n            });\n            inlineEdit.dispatchEvent(saveEvent);\n            inlineEdit.blur();\n            statusSaving.classList.remove('d-none');\n            if (input) {\n                input.disabled = true;\n                input.blur();\n                if (preview) {\n                    preview.innerHTML = input.value;\n                }\n            }\n        });\n        if (input) {\n            // Save\n            if (input.tagName === 'INPUT') {\n                input.addEventListener('keydown', (event) => {\n                    switch (event.key // change to event.key to key to use the above variable\n                    ) {\n                        case 'Enter':\n                            event.stopPropagation();\n                            event.preventDefault();\n                            saveButton.click();\n                            break;\n                    }\n                });\n            }\n            // enter key saves\n            if (input.tagName === 'SELECT') {\n                input.addEventListener('change', () => {\n                    originalValue = input.value;\n                    const saveEvent = new CustomEvent('inline-edit-save', {\n                        detail: { name: input.getAttribute('name'), value: input.value },\n                    });\n                    inlineEdit.dispatchEvent(saveEvent);\n                    inlineEdit.setAttribute('data-saving', 'true');\n                    input.disabled = true;\n                    input.blur();\n                });\n            }\n            if (input.tagName != 'SELECT') {\n                input.addEventListener('focus', () => {\n                    input.select();\n                });\n            }\n            //blur it should autosave\n            input.addEventListener('blur', () => {\n                if (input.value != originalValue) {\n                    if (inlineEdit.hasAttribute('data-autosave')) {\n                        originalValue = input.value;\n                        const saveEvent = new CustomEvent('inline-edit-autosave', {\n                            detail: { name: input.getAttribute('name'), value: input.value },\n                        });\n                        inlineEdit.dispatchEvent(saveEvent);\n                        statusSaving.classList.remove('d-none');\n                        if (preview) {\n                            preview.innerHTML = input.value;\n                        }\n                    }\n                    else if (!inlineEdit.querySelector('.inline-feedback')) {\n                        statusNotSaved.classList.remove('d-none');\n                    }\n                }\n            });\n        }\n        // Saved\n        inlineEdit.addEventListener('inline-edit-saved', () => {\n            setTimeout(() => {\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.remove('d-none');\n                const confirmEvent = new CustomEvent('inline-edit-confirmed', {\n                    detail: { name: input.getAttribute('name') },\n                });\n                inlineEdit.dispatchEvent(confirmEvent);\n            }, 100);\n            // Reset to normal\n            setTimeout(() => {\n                input.disabled = false;\n                inlineEdit.removeAttribute('data-saving');\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.add('d-none');\n                statusNotSaved.classList.add('d-none');\n            }, 1000);\n        });\n        // checkboxes\n        inlineEdit.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                let saveValue = '';\n                Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n                    if (index != 0)\n                        saveValue += ', ';\n                    saveValue += checkbox.value;\n                });\n                const saveEvent = new CustomEvent('inline-edit-save', {\n                    detail: {\n                        name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'),\n                        value: saveValue,\n                    },\n                });\n                inlineEdit.dispatchEvent(saveEvent);\n            }\n        });\n    }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","cancelEvent","saveEvent","event","confirmEvent","saveValue","checkbox","index"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,aACb,CAAC,EACD,MAAMA,UAAsB,WAAY,CACpC,aAAc,CACV,MAAK,EACL,MAAMC,EAAa,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EAC/B,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiBrBD,EAAW,YAAYC,EAAS,QAAQ,UAAU,EAAI,CAAC,CAC3D,CACA,mBAAoB,CAEhB,MAAMC,EAAa,KACbC,EAAa,KAAK,WAAW,cAAc,OAAO,EAClDC,EAAe,KAAK,WAAW,cAAc,SAAS,EACtDC,EAAQ,KAAK,cAAc,yBAAyB,EACpDC,EAAU,KAAK,cAAc,UAAU,EACvCC,EAAe,KAAK,WAAW,cAAc,SAAS,EACtDC,EAAc,KAAK,WAAW,cAAc,QAAQ,EACpDC,EAAiB,KAAK,WAAW,cAAc,WAAW,EAEhE,IAAIC,EAAgBL,EAAQA,EAAM,MAAQ,GAE1CD,EAAa,iBAAiB,QAAS,IAAM,CACrCC,IACAA,EAAM,MAAQK,EACdL,EAAM,KAAI,GAEdH,EAAW,KAAI,EACfA,EAAW,UAAU,OAAO,eAAe,EAC3CO,EAAe,UAAU,IAAI,QAAQ,EACrC,MAAME,EAAc,IAAI,YAAY,qBAAsB,CACtD,OAAQ,CAAE,KAAMN,EAAM,aAAa,MAAM,CAAC,CAC1D,CAAa,EACDH,EAAW,cAAcS,CAAW,CACxC,CAAC,EAEDR,EAAW,iBAAiB,QAAS,IAAM,CACvC,GAAID,EAAW,cAAc,UAAU,EACnC,OAAAA,EAAW,UAAU,IAAI,eAAe,EACjC,GAEXQ,EAAgBL,EAAM,MAEtB,MAAMO,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CAC9E,CAAa,EACDH,EAAW,cAAcU,CAAS,EAClCV,EAAW,KAAI,EACfK,EAAa,UAAU,OAAO,QAAQ,EAClCF,IACAA,EAAM,SAAW,GACjBA,EAAM,KAAI,EACNC,IACAA,EAAQ,UAAYD,EAAM,OAGtC,CAAC,EACGA,IAEIA,EAAM,UAAY,SAClBA,EAAM,iBAAiB,UAAYQ,GAAU,CACzC,OAAQA,EAAM,IAClC,CACwB,IAAK,QACDA,EAAM,gBAAe,EACrBA,EAAM,eAAc,EACpBV,EAAW,MAAK,EAChB,KAC5B,CACgB,CAAC,EAGDE,EAAM,UAAY,UAClBA,EAAM,iBAAiB,SAAU,IAAM,CACnCK,EAAgBL,EAAM,MACtB,MAAMO,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CACtF,CAAqB,EACDH,EAAW,cAAcU,CAAS,EAClCV,EAAW,aAAa,cAAe,MAAM,EAC7CG,EAAM,SAAW,GACjBA,EAAM,KAAI,CACd,CAAC,EAEDA,EAAM,SAAW,UACjBA,EAAM,iBAAiB,QAAS,IAAM,CAClCA,EAAM,OAAM,CAChB,CAAC,EAGLA,EAAM,iBAAiB,OAAQ,IAAM,CACjC,GAAIA,EAAM,OAASK,EACf,GAAIR,EAAW,aAAa,eAAe,EAAG,CAC1CQ,EAAgBL,EAAM,MACtB,MAAMO,EAAY,IAAI,YAAY,uBAAwB,CACtD,OAAQ,CAAE,KAAMP,EAAM,aAAa,MAAM,EAAG,MAAOA,EAAM,KAAK,CAC1F,CAAyB,EACDH,EAAW,cAAcU,CAAS,EAClCL,EAAa,UAAU,OAAO,QAAQ,EAClCD,IACAA,EAAQ,UAAYD,EAAM,MAElC,MACUH,EAAW,cAAc,kBAAkB,GACjDO,EAAe,UAAU,OAAO,QAAQ,CAGpD,CAAC,GAGLP,EAAW,iBAAiB,oBAAqB,IAAM,CACnD,WAAW,IAAM,CACbK,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,OAAO,QAAQ,EACrC,MAAMM,EAAe,IAAI,YAAY,wBAAyB,CAC1D,OAAQ,CAAE,KAAMT,EAAM,aAAa,MAAM,CAAC,CAC9D,CAAiB,EACDH,EAAW,cAAcY,CAAY,CACzC,EAAG,GAAG,EAEN,WAAW,IAAM,CACbT,EAAM,SAAW,GACjBH,EAAW,gBAAgB,aAAa,EACxCK,EAAa,UAAU,IAAI,QAAQ,EACnCC,EAAY,UAAU,IAAI,QAAQ,EAClCC,EAAe,UAAU,IAAI,QAAQ,CACzC,EAAG,GAAI,CACX,CAAC,EAEDP,EAAW,iBAAiB,SAAWW,GAAU,CAC7C,GAAIA,GAASA,EAAM,kBAAkB,aAAeA,EAAM,OAAO,QAAQ,wBAAwB,EAAG,CAChG,IAAIE,EAAY,GAChB,MAAM,KAAKb,EAAW,iBAAiB,sCAAsC,CAAC,EAAE,QAAQ,CAACc,EAAUC,IAAU,CACrGA,GAAS,IACTF,GAAa,MACjBA,GAAaC,EAAS,KAC1B,CAAC,EACD,MAAMJ,EAAY,IAAI,YAAY,mBAAoB,CAClD,OAAQ,CACJ,KAAMC,EAAM,OAAO,QAAQ,wBAAwB,EAAE,aAAa,MAAM,EACxE,MAAOE,CAC/B,CACA,CAAiB,EACDb,EAAW,cAAcU,CAAS,CACtC,CACJ,CAAC,CACL,CACJ"}
+{"version":3,"file":"inline-edit.component.min.js","sources":["inline-edit.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'inline edit',\n});\nclass iamInlineEdit extends HTMLElement {\n    constructor() {\n        super();\n        const shadowRoot = this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/inline-edit.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style class=\"styles\">\n    \n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n    \n    <slot></slot>\n    <div class=\"btns\" part=\"btns\">\n      <button class=\"btn btn-action\" id=\"save\" part=\"save-btn\"><i class=\"fa-regular fa-save m-0\"></i> Save</button><button class=\"btn btn-action\" id=\"cancel\" part=\"cancel-btn\">Cancel</button>\n    </div>\n    <div class=\"status pe-none\" part=\"status\">\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saving\"><i class=\"fa-regular fa-spinner fa-spin me-1\"></i> Saving...</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"saved\"><i class=\"fa-regular fa-check me-1\"></i> Saved</span>\n      <span class=\"btn btn-action border-0 bg-transparent prevent-invert d-none\" id=\"notsaved\"><i class=\"fa-regular fa-circle-info me-1\"></i> Not Saved</span>\n    </div>\n    `;\n        shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const inlineEdit = this;\n        const saveButton = this.shadowRoot.querySelector('#save');\n        const cancelButton = this.shadowRoot.querySelector('#cancel');\n        const input = this.querySelector('input, textarea, select');\n        const preview = this.querySelector('.preview');\n        const statusSaving = this.shadowRoot.querySelector('#saving');\n        const statusSaved = this.shadowRoot.querySelector('#saved');\n        const statusNotSaved = this.shadowRoot.querySelector('#notsaved');\n        // Save the original value for later\n        let originalValue = input ? input.value : '';\n        // cancel\n        cancelButton.addEventListener('click', () => {\n            if (input) {\n                input.value = originalValue;\n                input.blur();\n            }\n            inlineEdit.blur();\n            inlineEdit.classList.remove('was-validated');\n            statusNotSaved.classList.add('d-none');\n            const cancelEvent = new CustomEvent('inline-edit-cancel', {\n                detail: { name: input.getAttribute('name') },\n            });\n            inlineEdit.dispatchEvent(cancelEvent);\n        });\n        // Save\n        saveButton.addEventListener('click', () => {\n            if (inlineEdit.querySelector(':invalid')) {\n                inlineEdit.classList.add('was-validated');\n                return false;\n            }\n            originalValue = input.value;\n            // dispatch save event\n            const saveEvent = new CustomEvent('inline-edit-save', {\n                detail: { name: input.getAttribute('name'), value: input.value },\n            });\n            inlineEdit.dispatchEvent(saveEvent);\n            inlineEdit.blur();\n            statusSaving.classList.remove('d-none');\n            if (input) {\n                input.disabled = true;\n                input.blur();\n                if (preview) {\n                    preview.innerHTML = input.value;\n                }\n            }\n        });\n        if (input) {\n            // Save\n            if (input.tagName === 'INPUT') {\n                input.addEventListener('keydown', (event) => {\n                    switch (event.key // change to event.key to key to use the above variable\n                    ) {\n                        case 'Enter':\n                            event.stopPropagation();\n                            event.preventDefault();\n                            saveButton.click();\n                            break;\n                    }\n                });\n            }\n            // enter key saves\n            if (input.tagName === 'SELECT') {\n                input.addEventListener('change', () => {\n                    originalValue = input.value;\n                    const saveEvent = new CustomEvent('inline-edit-save', {\n                        detail: { name: input.getAttribute('name'), value: input.value },\n                    });\n                    inlineEdit.dispatchEvent(saveEvent);\n                    inlineEdit.setAttribute('data-saving', 'true');\n                    input.disabled = true;\n                    input.blur();\n                });\n            }\n            if (input.tagName != 'SELECT') {\n                input.addEventListener('focus', () => {\n                    input.select();\n                });\n            }\n            //blur it should autosave\n            input.addEventListener('blur', () => {\n                if (input.value != originalValue) {\n                    if (inlineEdit.hasAttribute('data-autosave')) {\n                        originalValue = input.value;\n                        const saveEvent = new CustomEvent('inline-edit-autosave', {\n                            detail: { name: input.getAttribute('name'), value: input.value },\n                        });\n                        inlineEdit.dispatchEvent(saveEvent);\n                        statusSaving.classList.remove('d-none');\n                        if (preview) {\n                            preview.innerHTML = input.value;\n                        }\n                    }\n                    else if (!inlineEdit.querySelector('.inline-feedback')) {\n                        statusNotSaved.classList.remove('d-none');\n                    }\n                }\n            });\n        }\n        // Saved\n        inlineEdit.addEventListener('inline-edit-saved', () => {\n            setTimeout(() => {\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.remove('d-none');\n                const confirmEvent = new CustomEvent('inline-edit-confirmed', {\n                    detail: { name: input.getAttribute('name') },\n                });\n                inlineEdit.dispatchEvent(confirmEvent);\n            }, 100);\n            // Reset to normal\n            setTimeout(() => {\n                input.disabled = false;\n                inlineEdit.removeAttribute('data-saving');\n                statusSaving.classList.add('d-none');\n                statusSaved.classList.add('d-none');\n                statusNotSaved.classList.add('d-none');\n            }, 1000);\n        });\n        // checkboxes\n        inlineEdit.addEventListener('change', (event) => {\n            if (event && event.target instanceof HTMLElement && event.target.closest('input[type=\"checkbox\"]')) {\n                let saveValue = '';\n                Array.from(inlineEdit.querySelectorAll(`label input[type=\"checkbox\"]:checked`)).forEach((checkbox, index) => {\n                    if (index != 0)\n                        saveValue += ', ';\n                    saveValue += checkbox.value;\n                });\n                const saveEvent = new CustomEvent('inline-edit-save', {\n                    detail: {\n                        name: event.target.closest('input[type=\"checkbox\"]').getAttribute('name'),\n                        value: saveValue,\n                    },\n                });\n                inlineEdit.dispatchEvent(saveEvent);\n            }\n        });\n    }\n}\nexport default iamInlineEdit;\n"],"names":["iamInlineEdit","shadowRoot","template","inlineEdit","saveButton","cancelButton","input","preview","statusSaving","statusSaved","statusNotSaved","originalValue","cancelEvent","saveEvent","event","confirmEvent","saveValue","checkbox","index"],"mappings":"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"}

package/assets/js/components/input/input.component.js

@@ -9,16 +9,16 @@ class iamInput extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/input.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${loadCSS}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="wrapper" part="wrapper">
-      <span part="prefix"><slot name="prefix"></slot></span>
-      <slot part="input-wrapper"></slot>
-      <slot part="suffix"><slot name="suffix"></slot></slot>
-    </div>
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="wrapper" part="wrapper">
+      <span part="prefix"><slot name="prefix"></slot></span>
+      <slot part="input-wrapper"></slot>
+      <slot part="suffix"><slot name="suffix"></slot></slot>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta6
+  * iamKey v7.7.1--beta8
   * Copyright 2022-2026 iamproperty
   */const q=k=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:k})};q("iam-iamPrefix");class _ extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const s=document.createElement("template");s.innerHTML=`
     <style>

package/assets/js/components/input/input.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.min.js","sources":["../_global.js","input.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-iamPrefix');\nclass iamInput extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/input.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${loadCSS}\r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\r\n    <div class=\"wrapper\" part=\"wrapper\">\r\n      <span part=\"prefix\"><slot name=\"prefix\"></slot></span>\r\n      <slot part=\"input-wrapper\"></slot>\r\n      <slot part=\"suffix\"><slot name=\"suffix\"></slot></slot>\r\n    </div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n        const component = this;\n        const input = this.querySelector('input');\n        const inputType = (input === null || input === void 0 ? void 0 : input.hasAttribute('type')) ? input === null || input === void 0 ? void 0 : input.getAttribute('type') : 'text';\n        const prefixIcon = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part=\"prefix\"]');\n        const suffixIcon = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[part=\"suffix\"]');\n        if (this.closest('label'))\n            this.classList.add('mb-0');\n        const setIcon = (inputType) => {\n            // Pre set the icons\n            switch (inputType) {\n                case \"date\":\n                case \"datetime-local\":\n                case \"year\":\n                case \"month\":\n                case \"week\":\n                    this.setAttribute('data-suffix-icon', 'calendar');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.setAttribute('role', 'button');\n                    break;\n                case \"time\":\n                    this.setAttribute('data-suffix-icon', 'clock');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.setAttribute('role', 'button');\n                    break;\n                default:\n                    this.removeAttribute('data-suffix-icon');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.removeAttribute('role');\n                    break;\n            }\n        };\n        setIcon(inputType);\n        const setCurrencyRules = () => {\n            let originalValue = input.value.replace(',', '');\n            input === null || input === void 0 ? void 0 : input.setAttribute('data-value', originalValue);\n            input.setAttribute('type', 'text');\n            originalValue = new Intl.NumberFormat(\"en-GB\", {\n                style: \"currency\",\n                currency: \"GBP\",\n                minimumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,\n                maximumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,\n                trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer\n            }).format(originalValue).replace(\"£\", \"\");\n            input.value = originalValue;\n        };\n        // Currency type\n        if (component === null || component === void 0 ? void 0 : component.hasAttribute('data-currency')) {\n            // Pre set the icons\n            switch (component === null || component === void 0 ? void 0 : component.hasAttribute('data-currency')) {\n                case \"dollar\":\n                    component.setAttribute('data-prefix-icon', 'dollar-sign');\n                    break;\n                case \"euro\":\n                    component.setAttribute('data-prefix-icon', 'euro-sign');\n                    break;\n                default:\n                    component.setAttribute('data-prefix-icon', 'sterling-sign');\n                    break;\n            }\n            setCurrencyRules();\n            input === null || input === void 0 ? void 0 : input.addEventListener('focus', (event) => {\n                input.setAttribute('type', 'number');\n                input.value = input.getAttribute('data-value');\n                input.setAttribute('value', input.getAttribute('data-value'));\n            });\n            input === null || input === void 0 ? void 0 : input.addEventListener('input', (event) => {\n                input === null || input === void 0 ? void 0 : input.setAttribute('data-value', input.value);\n            });\n            input === null || input === void 0 ? void 0 : input.addEventListener('blur', (event) => {\n                setCurrencyRules();\n            });\n        }\n        // Colour input field\n        if (input === null || input === void 0 ? void 0 : input.matches('[type=\"color\"]')) {\n            this.insertAdjacentHTML('beforeend', `<output></output>`);\n            input.addEventListener('input', () => {\n                input.nextElementSibling.value = input.value;\n            });\n        }\n        if (this.hasAttribute('data-prefix-icon')) {\n            prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.className = `prefix fa-${this.hasAttribute('data-prefix-weight') ? this.getAttribute('data-prefix-weight') : 'regular'} fa-${this.getAttribute('data-prefix-icon')}`;\n            (_c = this.querySelector('input')) === null || _c === void 0 ? void 0 : _c.classList.add('has-prefix');\n        }\n        if (this.hasAttribute('data-suffix-icon')) {\n            suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;\n            (_d = this.querySelector('input')) === null || _d === void 0 ? void 0 : _d.classList.add('has-suffix');\n        }\n        if ((_e = this.shadowRoot.querySelector('[name=\"prefix\"]')) === null || _e === void 0 ? void 0 : _e.assignedElements().length) {\n            (_f = this.shadowRoot.querySelector('[name=\"prefix\"]')) === null || _f === void 0 ? void 0 : _f.classList.add('prefix');\n            (_g = this.querySelector('input')) === null || _g === void 0 ? void 0 : _g.classList.add('has-prefix');\n        }\n        if ((_h = this.shadowRoot.querySelector('[name=\"suffix\"]')) === null || _h === void 0 ? void 0 : _h.assignedElements().length) {\n            (_j = this.shadowRoot.querySelector('[name=\"suffix\"]')) === null || _j === void 0 ? void 0 : _j.classList.add('suffix');\n            (_k = this.querySelector('input')) === null || _k === void 0 ? void 0 : _k.classList.add('has-suffix');\n        }\n        // Change type\n        if (this.querySelector('[data-change-type]')) {\n            const select = this.querySelector('[data-change-type]');\n            select.addEventListener('change', () => {\n                input.setAttribute('type', select.value);\n                setIcon(select.value);\n                if (this.getAttribute('data-suffix-icon')) {\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;\n                    input === null || input === void 0 ? void 0 : input.classList.add('has-suffix');\n                }\n                else {\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.removeAttribute('class');\n                    input === null || input === void 0 ? void 0 : input.classList.remove('has-suffix');\n                }\n            });\n        }\n        // #region Date restrictions\n        const today = new Date();\n        function formatDate(date, type = \"date\") {\n            const year = date.getFullYear();\n            const month = String(date.getMonth() + 1).padStart(2, '0');\n            const day = String(date.getDate()).padStart(2, '0');\n            if (type == \"datetime-local\")\n                return `${year}-${month}-${day}T00:00:00`;\n            return `${year}-${month}-${day}`;\n        }\n        const checkDayAllowed = (input, allowedDays) => {\n            const day = new Date(input.value).getUTCDay();\n            if (allowedDays.includes(day))\n                input.setCustomValidity('');\n            else\n                input.setCustomValidity('That day of the week is not allowed');\n        };\n        if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"date\"], [type=\"datetime-local\"]')) && this.hasAttribute('data-allowed-days')) {\n            const allowedDays = JSON.parse(`[${this.getAttribute('data-allowed-days')}]`);\n            checkDayAllowed(input, allowedDays);\n            input.addEventListener('input', () => { checkDayAllowed(input, allowedDays); });\n        }\n        // #endregion\n        suffixIcon.addEventListener('click', function () {\n            if (!(component === null || component === void 0 ? void 0 : component.querySelector('select[data-change-type][slot=\"suffix\"]')))\n                input.showPicker();\n        });\n        prefixIcon.addEventListener('click', function () {\n            if (!(component === null || component === void 0 ? void 0 : component.querySelector('select[data-change-type][slot=\"prefix\"]')))\n                input.showPicker();\n        });\n        // Duplicate input watches\n        if (component.hasAttribute('data-duplicate')) {\n            const id = component.getAttribute('data-duplicate');\n            const watchedInputs = document.querySelectorAll(`[name=\"${id}\"], [id=\"${id}\"]`);\n            input.addEventListener('change', (event) => {\n                var _a;\n                if (input.closest('iam-modal'))\n                    return false;\n                if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                    watchedInput.checked = event.target.checked;\n                    if (!event.detail && !((_a = event.detail) === null || _a === void 0 ? void 0 : _a.triggered)) {\n                        const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                        watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.dispatchEvent(changeEvent);\n                    }\n                }\n            });\n            Array.from(watchedInputs).forEach((watchedInput) => {\n                watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.addEventListener('change', (event) => {\n                    var _a, _b;\n                    // If both the duplicate input and the watched input are checkboxes\n                    if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                        input.checked = event.target.checked;\n                        if (!event.detail && !((_a = event.detail) === null || _a === void 0 ? void 0 : _a.triggered)) {\n                            const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                            input === null || input === void 0 ? void 0 : input.dispatchEvent(changeEvent);\n                        }\n                    }\n                    // if input is not a checkbox BUT the watched input is\n                    // Then we need to create the input's value\n                    if (!(input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                        let computedValue = '';\n                        Array.from(document.querySelectorAll(`[name=\"${id}\"]:checked`)).forEach((loopInput) => {\n                            computedValue += (computedValue == '' ? '' : ',') + loopInput.value;\n                        });\n                        input.value = computedValue;\n                        if (!event.detail && !((_b = event.detail) === null || _b === void 0 ? void 0 : _b.triggered)) {\n                            const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                            input === null || input === void 0 ? void 0 : input.dispatchEvent(changeEvent);\n                        }\n                    }\n                });\n            });\n        }\n    }\n}\nexport default iamInput;\n"],"names":["trackComponentRegistered","componentName","iamInput","template","_a","_b","_c","_d","_e","_f","_g","_h","_j","_k","component","input","inputType","prefixIcon","suffixIcon","setIcon","setCurrencyRules","originalValue","event","select","checkDayAllowed","allowedDays","day","id","watchedInputs","changeEvent","watchedInput","computedValue","loopInput"],"mappings":"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"}
+{"version":3,"file":"input.component.min.js","sources":["../_global.js","input.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-iamPrefix');\nclass iamInput extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/input.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n    <div class=\"wrapper\" part=\"wrapper\">\n      <span part=\"prefix\"><slot name=\"prefix\"></slot></span>\n      <slot part=\"input-wrapper\"></slot>\n      <slot part=\"suffix\"><slot name=\"suffix\"></slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n        const component = this;\n        const input = this.querySelector('input');\n        const inputType = (input === null || input === void 0 ? void 0 : input.hasAttribute('type')) ? input === null || input === void 0 ? void 0 : input.getAttribute('type') : 'text';\n        const prefixIcon = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[part=\"prefix\"]');\n        const suffixIcon = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[part=\"suffix\"]');\n        if (this.closest('label'))\n            this.classList.add('mb-0');\n        const setIcon = (inputType) => {\n            // Pre set the icons\n            switch (inputType) {\n                case \"date\":\n                case \"datetime-local\":\n                case \"year\":\n                case \"month\":\n                case \"week\":\n                    this.setAttribute('data-suffix-icon', 'calendar');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.setAttribute('role', 'button');\n                    break;\n                case \"time\":\n                    this.setAttribute('data-suffix-icon', 'clock');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.setAttribute('role', 'button');\n                    break;\n                default:\n                    this.removeAttribute('data-suffix-icon');\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.removeAttribute('role');\n                    break;\n            }\n        };\n        setIcon(inputType);\n        const setCurrencyRules = () => {\n            let originalValue = input.value.replace(',', '');\n            input === null || input === void 0 ? void 0 : input.setAttribute('data-value', originalValue);\n            input.setAttribute('type', 'text');\n            originalValue = new Intl.NumberFormat(\"en-GB\", {\n                style: \"currency\",\n                currency: \"GBP\",\n                minimumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,\n                maximumFractionDigits: Number.isInteger(originalValue) ? 0 : 2,\n                trailingZeroDisplay: 'stripIfInteger' // Strip zeros if it's an integer\n            }).format(originalValue).replace(\"£\", \"\");\n            input.value = originalValue;\n        };\n        // Currency type\n        if (component === null || component === void 0 ? void 0 : component.hasAttribute('data-currency')) {\n            // Pre set the icons\n            switch (component === null || component === void 0 ? void 0 : component.hasAttribute('data-currency')) {\n                case \"dollar\":\n                    component.setAttribute('data-prefix-icon', 'dollar-sign');\n                    break;\n                case \"euro\":\n                    component.setAttribute('data-prefix-icon', 'euro-sign');\n                    break;\n                default:\n                    component.setAttribute('data-prefix-icon', 'sterling-sign');\n                    break;\n            }\n            setCurrencyRules();\n            input === null || input === void 0 ? void 0 : input.addEventListener('focus', (event) => {\n                input.setAttribute('type', 'number');\n                input.value = input.getAttribute('data-value');\n                input.setAttribute('value', input.getAttribute('data-value'));\n            });\n            input === null || input === void 0 ? void 0 : input.addEventListener('input', (event) => {\n                input === null || input === void 0 ? void 0 : input.setAttribute('data-value', input.value);\n            });\n            input === null || input === void 0 ? void 0 : input.addEventListener('blur', (event) => {\n                setCurrencyRules();\n            });\n        }\n        // Colour input field\n        if (input === null || input === void 0 ? void 0 : input.matches('[type=\"color\"]')) {\n            this.insertAdjacentHTML('beforeend', `<output></output>`);\n            input.addEventListener('input', () => {\n                input.nextElementSibling.value = input.value;\n            });\n        }\n        if (this.hasAttribute('data-prefix-icon')) {\n            prefixIcon === null || prefixIcon === void 0 ? void 0 : prefixIcon.className = `prefix fa-${this.hasAttribute('data-prefix-weight') ? this.getAttribute('data-prefix-weight') : 'regular'} fa-${this.getAttribute('data-prefix-icon')}`;\n            (_c = this.querySelector('input')) === null || _c === void 0 ? void 0 : _c.classList.add('has-prefix');\n        }\n        if (this.hasAttribute('data-suffix-icon')) {\n            suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;\n            (_d = this.querySelector('input')) === null || _d === void 0 ? void 0 : _d.classList.add('has-suffix');\n        }\n        if ((_e = this.shadowRoot.querySelector('[name=\"prefix\"]')) === null || _e === void 0 ? void 0 : _e.assignedElements().length) {\n            (_f = this.shadowRoot.querySelector('[name=\"prefix\"]')) === null || _f === void 0 ? void 0 : _f.classList.add('prefix');\n            (_g = this.querySelector('input')) === null || _g === void 0 ? void 0 : _g.classList.add('has-prefix');\n        }\n        if ((_h = this.shadowRoot.querySelector('[name=\"suffix\"]')) === null || _h === void 0 ? void 0 : _h.assignedElements().length) {\n            (_j = this.shadowRoot.querySelector('[name=\"suffix\"]')) === null || _j === void 0 ? void 0 : _j.classList.add('suffix');\n            (_k = this.querySelector('input')) === null || _k === void 0 ? void 0 : _k.classList.add('has-suffix');\n        }\n        // Change type\n        if (this.querySelector('[data-change-type]')) {\n            const select = this.querySelector('[data-change-type]');\n            select.addEventListener('change', () => {\n                input.setAttribute('type', select.value);\n                setIcon(select.value);\n                if (this.getAttribute('data-suffix-icon')) {\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.className = `suffix fa-${this.hasAttribute('data-suffix-weight') ? this.getAttribute('data-suffix-weight') : 'regular'} fa-${this.getAttribute('data-suffix-icon')}`;\n                    input === null || input === void 0 ? void 0 : input.classList.add('has-suffix');\n                }\n                else {\n                    suffixIcon === null || suffixIcon === void 0 ? void 0 : suffixIcon.removeAttribute('class');\n                    input === null || input === void 0 ? void 0 : input.classList.remove('has-suffix');\n                }\n            });\n        }\n        // #region Date restrictions\n        const today = new Date();\n        function formatDate(date, type = \"date\") {\n            const year = date.getFullYear();\n            const month = String(date.getMonth() + 1).padStart(2, '0');\n            const day = String(date.getDate()).padStart(2, '0');\n            if (type == \"datetime-local\")\n                return `${year}-${month}-${day}T00:00:00`;\n            return `${year}-${month}-${day}`;\n        }\n        const checkDayAllowed = (input, allowedDays) => {\n            const day = new Date(input.value).getUTCDay();\n            if (allowedDays.includes(day))\n                input.setCustomValidity('');\n            else\n                input.setCustomValidity('That day of the week is not allowed');\n        };\n        if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"date\"], [type=\"datetime-local\"]')) && this.hasAttribute('data-allowed-days')) {\n            const allowedDays = JSON.parse(`[${this.getAttribute('data-allowed-days')}]`);\n            checkDayAllowed(input, allowedDays);\n            input.addEventListener('input', () => { checkDayAllowed(input, allowedDays); });\n        }\n        // #endregion\n        suffixIcon.addEventListener('click', function () {\n            if (!(component === null || component === void 0 ? void 0 : component.querySelector('select[data-change-type][slot=\"suffix\"]')))\n                input.showPicker();\n        });\n        prefixIcon.addEventListener('click', function () {\n            if (!(component === null || component === void 0 ? void 0 : component.querySelector('select[data-change-type][slot=\"prefix\"]')))\n                input.showPicker();\n        });\n        // Duplicate input watches\n        if (component.hasAttribute('data-duplicate')) {\n            const id = component.getAttribute('data-duplicate');\n            const watchedInputs = document.querySelectorAll(`[name=\"${id}\"], [id=\"${id}\"]`);\n            input.addEventListener('change', (event) => {\n                var _a;\n                if (input.closest('iam-modal'))\n                    return false;\n                if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                    watchedInput.checked = event.target.checked;\n                    if (!event.detail && !((_a = event.detail) === null || _a === void 0 ? void 0 : _a.triggered)) {\n                        const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                        watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.dispatchEvent(changeEvent);\n                    }\n                }\n            });\n            Array.from(watchedInputs).forEach((watchedInput) => {\n                watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.addEventListener('change', (event) => {\n                    var _a, _b;\n                    // If both the duplicate input and the watched input are checkboxes\n                    if ((input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                        input.checked = event.target.checked;\n                        if (!event.detail && !((_a = event.detail) === null || _a === void 0 ? void 0 : _a.triggered)) {\n                            const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                            input === null || input === void 0 ? void 0 : input.dispatchEvent(changeEvent);\n                        }\n                    }\n                    // if input is not a checkbox BUT the watched input is\n                    // Then we need to create the input's value\n                    if (!(input === null || input === void 0 ? void 0 : input.matches('[type=\"checkbox\"]')) && (watchedInput === null || watchedInput === void 0 ? void 0 : watchedInput.matches('[type=\"checkbox\"]'))) {\n                        let computedValue = '';\n                        Array.from(document.querySelectorAll(`[name=\"${id}\"]:checked`)).forEach((loopInput) => {\n                            computedValue += (computedValue == '' ? '' : ',') + loopInput.value;\n                        });\n                        input.value = computedValue;\n                        if (!event.detail && !((_b = event.detail) === null || _b === void 0 ? void 0 : _b.triggered)) {\n                            const changeEvent = new CustomEvent('change', { detail: { triggered: true } });\n                            input === null || input === void 0 ? void 0 : input.dispatchEvent(changeEvent);\n                        }\n                    }\n                });\n            });\n        }\n    }\n}\nexport default iamInput;\n"],"names":["trackComponentRegistered","componentName","iamInput","template","_a","_b","_c","_d","_e","_f","_g","_h","_j","_k","component","input","inputType","prefixIcon","suffixIcon","setIcon","setCurrencyRules","originalValue","event","select","checkDayAllowed","allowedDays","day","id","watchedInputs","changeEvent","watchedInput","computedValue","loopInput"],"mappings":"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"}

package/assets/js/components/input-range/input-range.component.js

@@ -9,14 +9,14 @@ class iamDaterange extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/input-range.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-      ${loadCSS}
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
-    <div class="wrapper" part="wrapper">
-      <slot></slot>
-    </div>
+        template.innerHTML = `
+    <style>
+      ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous">
+    <div class="wrapper" part="wrapper">
+      <slot></slot>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }

package/assets/js/components/input-range/input-range.component.min.js

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta6
+  * iamKey v7.7.1--beta8
   * Copyright 2022-2026 iamproperty
   */const o=s=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:s})};o("iam-iamPrefix");class i 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>

package/assets/js/components/input-range/input-range.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range.component.min.js","sources":["../_global.js","input-range.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-iamPrefix');\nclass iamDaterange extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/input-range.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n      ${loadCSS}\r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\r\n    <div class=\"wrapper\" part=\"wrapper\">\r\n      <slot></slot>\r\n    </div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const inputs = this.querySelectorAll('input,select');\n        if (inputs.length > 1) {\n            const setMinMax = () => {\n                const min = inputs[0].value;\n                let max = inputs[1].value;\n                // Make sure the second input/select is always higher than the first input/select\n                if (parseInt(inputs[1].value) < parseInt(inputs[0].value)) {\n                    max = min;\n                    inputs[1].value = min;\n                }\n                // First input/select\n                if (inputs[0].matches('input'))\n                    inputs[0].setAttribute('max', max);\n                if (inputs[0].matches('select')) {\n                    Array.from(inputs[0].querySelectorAll('option')).forEach((option) => {\n                        if (parseInt(option.getAttribute('value')) > max)\n                            option.classList.add('d-none');\n                        else\n                            option.classList.remove('d-none');\n                    });\n                }\n                // Second input/select\n                if (inputs[1].matches('input'))\n                    inputs[1].setAttribute('min', min);\n                Array.from(inputs[1].querySelectorAll('option')).forEach((option) => {\n                    if (parseInt(option.getAttribute('value')) < min)\n                        option.classList.add('d-none');\n                    else\n                        option.classList.remove('d-none');\n                });\n            };\n            setMinMax();\n            this.addEventListener('change', () => {\n                setMinMax();\n            });\n        }\n    }\n}\nexport default iamDaterange;\n"],"names":["trackComponentRegistered","componentName","iamDaterange","template","inputs","setMinMax","min","max","option"],"mappings":";;;IAAO,MAAMA,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,ECNAD,EAAyB,eAAe,EACxC,MAAME,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,MAAMC,EAAS,KAAK,iBAAiB,cAAc,EACnD,GAAIA,EAAO,OAAS,EAAG,CACnB,MAAMC,EAAY,IAAM,CACpB,MAAMC,EAAMF,EAAO,CAAC,EAAE,MACtB,IAAIG,EAAMH,EAAO,CAAC,EAAE,MAEhB,SAASA,EAAO,CAAC,EAAE,KAAK,EAAI,SAASA,EAAO,CAAC,EAAE,KAAK,IACpDG,EAAMD,EACNF,EAAO,CAAC,EAAE,MAAQE,GAGlBF,EAAO,CAAC,EAAE,QAAQ,OAAO,GACzBA,EAAO,CAAC,EAAE,aAAa,MAAOG,CAAG,EACjCH,EAAO,CAAC,EAAE,QAAQ,QAAQ,GAC1B,MAAM,KAAKA,EAAO,CAAC,EAAE,iBAAiB,QAAQ,CAAC,EAAE,QAASI,GAAW,CAC7D,SAASA,EAAO,aAAa,OAAO,CAAC,EAAID,EACzCC,EAAO,UAAU,IAAI,QAAQ,EAE7BA,EAAO,UAAU,OAAO,QAAQ,CACxC,CAAC,EAGDJ,EAAO,CAAC,EAAE,QAAQ,OAAO,GACzBA,EAAO,CAAC,EAAE,aAAa,MAAOE,CAAG,EACrC,MAAM,KAAKF,EAAO,CAAC,EAAE,iBAAiB,QAAQ,CAAC,EAAE,QAASI,GAAW,CAC7D,SAASA,EAAO,aAAa,OAAO,CAAC,EAAIF,EACzCE,EAAO,UAAU,IAAI,QAAQ,EAE7BA,EAAO,UAAU,OAAO,QAAQ,CACxC,CAAC,CACL,EACAH,EAAS,EACT,KAAK,iBAAiB,SAAU,IAAM,CAClCA,EAAS,CACb,CAAC,CACL,CACJ,CACJ"}
+{"version":3,"file":"input-range.component.min.js","sources":["../_global.js","input-range.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementRegistered',\n        element: componentName,\n    });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n    // Data layer Web component created\n    window.dataLayer = window.dataLayer || [];\n    window.dataLayer.push({\n        event: 'customElementAdded',\n        element: componentName,\n    });\n    trackEvents.forEach((eventName) => {\n        component.addEventListener(eventName, function (event) {\n            const eventDetails = {\n                event: eventName,\n                element: componentName,\n                target: event.target,\n            };\n            Object.keys(event.detail).forEach((eventKey) => {\n                const eventDetail = event.detail[eventKey];\n                eventDetails[eventKey] = eventDetail;\n            });\n            window.dataLayer.push(eventDetails);\n        });\n    });\n    return true;\n};\n","import { trackComponentRegistered } from '../_global';\ntrackComponentRegistered('iam-iamPrefix');\nclass iamDaterange extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/input-range.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n      ${loadCSS}\n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\">\n    <div class=\"wrapper\" part=\"wrapper\">\n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        const inputs = this.querySelectorAll('input,select');\n        if (inputs.length > 1) {\n            const setMinMax = () => {\n                const min = inputs[0].value;\n                let max = inputs[1].value;\n                // Make sure the second input/select is always higher than the first input/select\n                if (parseInt(inputs[1].value) < parseInt(inputs[0].value)) {\n                    max = min;\n                    inputs[1].value = min;\n                }\n                // First input/select\n                if (inputs[0].matches('input'))\n                    inputs[0].setAttribute('max', max);\n                if (inputs[0].matches('select')) {\n                    Array.from(inputs[0].querySelectorAll('option')).forEach((option) => {\n                        if (parseInt(option.getAttribute('value')) > max)\n                            option.classList.add('d-none');\n                        else\n                            option.classList.remove('d-none');\n                    });\n                }\n                // Second input/select\n                if (inputs[1].matches('input'))\n                    inputs[1].setAttribute('min', min);\n                Array.from(inputs[1].querySelectorAll('option')).forEach((option) => {\n                    if (parseInt(option.getAttribute('value')) < min)\n                        option.classList.add('d-none');\n                    else\n                        option.classList.remove('d-none');\n                });\n            };\n            setMinMax();\n            this.addEventListener('change', () => {\n                setMinMax();\n            });\n        }\n    }\n}\nexport default iamDaterange;\n"],"names":["trackComponentRegistered","componentName","iamDaterange","template","inputs","setMinMax","min","max","option"],"mappings":";;;IAAO,MAAMA,EAA4BC,GAAkB,CAEvD,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAASA,CACjB,CAAK,CACL,ECNAD,EAAyB,eAAe,EACxC,MAAME,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,MAAMC,EAAS,KAAK,iBAAiB,cAAc,EACnD,GAAIA,EAAO,OAAS,EAAG,CACnB,MAAMC,EAAY,IAAM,CACpB,MAAMC,EAAMF,EAAO,CAAC,EAAE,MACtB,IAAIG,EAAMH,EAAO,CAAC,EAAE,MAEhB,SAASA,EAAO,CAAC,EAAE,KAAK,EAAI,SAASA,EAAO,CAAC,EAAE,KAAK,IACpDG,EAAMD,EACNF,EAAO,CAAC,EAAE,MAAQE,GAGlBF,EAAO,CAAC,EAAE,QAAQ,OAAO,GACzBA,EAAO,CAAC,EAAE,aAAa,MAAOG,CAAG,EACjCH,EAAO,CAAC,EAAE,QAAQ,QAAQ,GAC1B,MAAM,KAAKA,EAAO,CAAC,EAAE,iBAAiB,QAAQ,CAAC,EAAE,QAASI,GAAW,CAC7D,SAASA,EAAO,aAAa,OAAO,CAAC,EAAID,EACzCC,EAAO,UAAU,IAAI,QAAQ,EAE7BA,EAAO,UAAU,OAAO,QAAQ,CACxC,CAAC,EAGDJ,EAAO,CAAC,EAAE,QAAQ,OAAO,GACzBA,EAAO,CAAC,EAAE,aAAa,MAAOE,CAAG,EACrC,MAAM,KAAKF,EAAO,CAAC,EAAE,iBAAiB,QAAQ,CAAC,EAAE,QAASI,GAAW,CAC7D,SAASA,EAAO,aAAa,OAAO,CAAC,EAAIF,EACzCE,EAAO,UAAU,IAAI,QAAQ,EAE7BA,EAAO,UAAU,OAAO,QAAQ,CACxC,CAAC,CACL,EACAH,EAAS,EACT,KAAK,iBAAiB,SAAU,IAAM,CAClCA,EAAS,CACb,CAAC,CACL,CACJ,CACJ"}

package/assets/js/components/marketing/marketing.component.js

@@ -13,16 +13,16 @@ class iamMarketing extends HTMLElement {
             : '/assets';
         const loadCSS = `@import "${assetLocation}/css/components/marketing.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${loadCSS}
-    
-    </style>
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-    <div class="marketing">
-      
-      <slot></slot>
-    </div>
+        template.innerHTML = `
+    <style>
+    ${loadCSS}
+    
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
+    <div class="marketing">
+      
+      <slot></slot>
+    </div>
     `;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }

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

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.7.1--beta6
+  * iamKey v7.7.1--beta8
   * Copyright 2022-2026 iamproperty
   */window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:"Marketing"});class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>

package/assets/js/components/marketing/marketing.component.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Marketing',\n});\nclass iamMarketing extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/marketing.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\r\n    <style>\r\n    ${loadCSS}\r\n    \r\n    </style>\r\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\" />\r\n    <div class=\"marketing\">\r\n      \r\n      <slot></slot>\r\n    </div>\r\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('invert-colours');\n        if (this.hasAttribute('data-img')) {\n            this.shadowRoot\n                .querySelector('.marketing')\n                .insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n        }\n    }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","template"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,YAAY,EAC1B,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,CAAC,sBAAsB,CAEtH,CACJ"}
+{"version":3,"file":"marketing.component.min.js","sources":["marketing.component.js"],"sourcesContent":["// Data layer Web component created\nwindow.dataLayer = window.dataLayer || [];\nwindow.dataLayer.push({\n    event: 'customElementRegistered',\n    element: 'Marketing',\n});\nclass iamMarketing extends HTMLElement {\n    constructor() {\n        super();\n        this.attachShadow({ mode: 'open' });\n        const assetLocation = document.body.hasAttribute('data-assets-location')\n            ? document.body.getAttribute('data-assets-location')\n            : '/assets';\n        const loadCSS = `@import \"${assetLocation}/css/components/marketing.component.css\";`;\n        const template = document.createElement('template');\n        template.innerHTML = `\n    <style>\n    ${loadCSS}\n    \n    </style>\n    <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\" />\n    <div class=\"marketing\">\n      \n      <slot></slot>\n    </div>\n    `;\n        this.shadowRoot.appendChild(template.content.cloneNode(true));\n    }\n    connectedCallback() {\n        this.classList.add('invert-colours');\n        if (this.hasAttribute('data-img')) {\n            this.shadowRoot\n                .querySelector('.marketing')\n                .insertAdjacentHTML('afterbegin', `<figure><img src=\"${this.getAttribute('data-img')}\" alt=\"\" /></figure>`);\n        }\n    }\n}\nexport default iamMarketing;\n"],"names":["iamMarketing","template"],"mappings":";;;IACA,OAAO,UAAY,OAAO,WAAa,CAAA,EACvC,OAAO,UAAU,KAAK,CAClB,MAAO,0BACP,QAAS,WACb,CAAC,EACD,MAAMA,UAAqB,WAAY,CACnC,aAAc,CACV,MAAK,EACL,KAAK,aAAa,CAAE,KAAM,MAAM,CAAE,EACZ,SAAS,KAAK,aAAa,sBAAsB,GACjE,SAAS,KAAK,aAAa,sBAAsB,EAGvD,MAAMC,EAAW,SAAS,cAAc,UAAU,EAClDA,EAAS,UAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWrB,KAAK,WAAW,YAAYA,EAAS,QAAQ,UAAU,EAAI,CAAC,CAChE,CACA,mBAAoB,CAChB,KAAK,UAAU,IAAI,gBAAgB,EAC/B,KAAK,aAAa,UAAU,GAC5B,KAAK,WACA,cAAc,YAAY,EAC1B,mBAAmB,aAAc,qBAAqB,KAAK,aAAa,UAAU,CAAC,sBAAsB,CAEtH,CACJ"}

package/assets/js/components/menu/menu.component.js

@@ -7,12 +7,12 @@ class iamMenu extends HTMLElement {
             : '/assets';
         const menuCSS = `@import "${assetLocation}/css/components/menu.component.css";`;
         const template = document.createElement('template');
-        template.innerHTML = `
-    <style>
-    ${menuCSS}
-    </style>
-    <div class="menu--inner" part="inner">
-      <slot></slot>
+        template.innerHTML = `
+    <style>
+    ${menuCSS}
+    </style>
+    <div class="menu--inner" part="inner">
+      <slot></slot>
     </div>`;
         this.shadowRoot.appendChild(template.content.cloneNode(true));
     }