@iamproperty/components 5.2.0 → 5.3.0-beta2

package/assets/sass/components/card.scss

@@ -122,6 +122,14 @@
       }
     }    
   }
+
+  
+  .card__total {
+    font-size: rem(48);
+    line-height: rem(48);
+    padding-right: rem(16);
+    margin-top: 0.5rem;
+  }
 }
 
 ::slotted(i){
@@ -218,9 +226,8 @@
   }
     
   .card__total {
-    font-size: rem(48);
-    line-height: rem(48);
-    padding-right: rem(16);
+    margin-top: 0;
+    order: -1;
   }
 }
 
@@ -319,3 +326,47 @@
   }
 }
 // #endregion
+
+
+//#region Dashboard card
+.card--secondary {
+
+  --card-top-padding: #{rem(16)};
+  --card-bottom-padding: #{rem(24)};
+
+  &:before,
+  &:after {
+    display: none;
+  }
+}
+
+.card--secondary .btn-compact {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0.5rem 0.5rem 0 0;
+  z-index: 99;
+}
+
+.card--secondary:has(.btn-compact:is(:hover, :focus, :active)) {
+
+  pointer-events: none;
+  outline: none;
+
+  .card__body {
+    background: none;
+    border-color: transparent!important;
+  }
+
+  .btn-compact {
+    pointer-events: all;
+  }
+}
+
+.card--secondary ::slotted(i) {
+  display: block !important;
+  font-size: rem(40)!important;
+  margin: 0.5rem 0 0.5rem 0!important;
+  line-height: rem(40);
+}
+// #endregion

package/assets/sass/helpers/max-height.scss

@@ -31,15 +31,15 @@
 }
 
 .mh-sm {
-  max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+  max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
 }
 
 .mh-md {
-  max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+  max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
 }
 
 .mh-lg {
-  max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+  max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
 }
 
 
@@ -56,15 +56,15 @@
   }
   
   .mh-sm-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
   }
   
   .mh-sm-md {
-    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
   }
   
   .mh-sm-lg {
-    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
   }
 }
 
@@ -81,14 +81,14 @@
   }
   
   .mh-md-sm {
-    max-height: calc(#{rem(200)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(200)} - var(--mh-modifier,0rem));
   }
   
   .mh-md-md {
-    max-height: calc(#{rem(400)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(400)} - var(--mh-modifier,0rem));
   }
   
   .mh-md-lg {
-    max-height: calc(#{rem(600)} - var(--mh-modifier,0));
+    max-height: calc(#{rem(600)} - var(--mh-modifier,0rem));
   }
 }

package/assets/ts/components/card/card.component.ts

@@ -31,15 +31,16 @@ class iamCard extends HTMLElement {
     ${loadCSS}
     ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
     </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/26fdbf0179.css" crossorigin="anonymous">
     <div class="card ${classList}" tabindex="0" role="button">
       ${this.hasAttribute('data-image') ? `<div class="card__head"><img src="${this.getAttribute('data-image')}" alt="" loading="lazy" /><div class="card__badges"><slot name="badges"></slot></div></div>` : ''}
       <div class="card__body">
       ${!this.hasAttribute('data-image') ? `<div class="card__badges"><slot name="badges"></slot></div>` : ''}
-      ${this.classList.contains('card--filter') && this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
       ${this.hasAttribute('data-illustration') ? `<div class="card__illustration"><img src="${this.getAttribute('data-illustration')}" alt="" loading="lazy" /></div>` : ''}
         <slot></slot>
+      ${this.hasAttribute('data-total') ? `<div class="card__total">${this.getAttribute('data-total')}</div>` : ''}
       </div>
-        
+      ${this.hasAttribute('data-add-link') ? `<button class="btn btn-compact btn-secondary fa-plus">Add property</button>` : ''}
       <slot name="checkbox"></slot>
       ${this.hasAttribute('data-cta') ? `<div class="card__footer"><span class="link">${this.getAttribute('data-cta')}</span></div>` : ''}
     </div>
@@ -58,6 +59,7 @@ class iamCard extends HTMLElement {
     // Mimic clicking the parent node so the focus and target events can be on the card
     const parentNode = this.parentNode.closest('a, button, label')
     const card = this.shadowRoot.querySelector('.card')
+    const btnCompact =  this.shadowRoot.querySelector('.btn-compact');
 
     parentNode.setAttribute('tabindex','-1');
     
@@ -157,6 +159,18 @@ class iamCard extends HTMLElement {
               break;
       }
     });
+
+    if(btnCompact){
+
+      let addLocation = this.getAttribute('data-add-link');
+
+      btnCompact.addEventListener('click', (event) => {
+
+          event.stopPropagation();
+          event.preventDefault();
+          window.location = addLocation;
+      });
+    }
   }
 
   static get observedAttributes() {

package/assets/ts/components/table/table.component.ts

@@ -65,7 +65,7 @@ class iamTable extends HTMLElement {
 
     classList = classList.replace('table--cta','');
     classList = classList.replace('table--loading','');
-    classList = classList.replace('mh-md','');
+    //classList = classList.replace('mh-md','');
     this.shadowRoot.querySelector('.table__wrapper').className += ` ${classList}`;
 
     // set actionbar class if needed