@iamproperty/components 7.7.0 → 7.7.1--beta1

package/assets/ts/components/header/header.component.ts

@@ -22,47 +22,52 @@ class iamHeader extends HTMLElement {
     ${loadCSS}
     </style>
     <div class="header-banner">
-      <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;
-            }
+      <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-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"/>
+              .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>
-        </g>
-      </svg>
-      <picture>
-        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
-      </picture>
+        </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>
     `;
@@ -80,6 +85,12 @@ class iamHeader extends HTMLElement {
 
     if(this.querySelector('[slot="panel"]'))
       this.classList.add('has-panel');
+
+    if(this.querySelector('[slot="toolbox"]'))
+      this.classList.add('has-toolbox');
+
+    if(this.querySelector('.breadcrumbs:first-child'))
+      this.classList.add('has-breadcrumbs');
   }
 }
 

package/assets/ts/components/modal/modal.component.ts

@@ -170,7 +170,7 @@ class iamModal extends HTMLElement {
     });
 
 
-    if (modalType == 'transactional'){
+    if (modalType == 'transactional' || modalType == 'acknowledgement' ){
       this.shadowRoot?.querySelector('.scroll')?.insertAdjacentHTML('afterbegin',
         `<i class="fa-light fa-circle" aria-hidden="true">
           <i class="fa-regular fa-${this.hasAttribute('data-icon') ? this.getAttribute('data-icon') : 'info'}" aria-hidden="true"></i>