@iamproperty/components 5.2.0 → 5.3.0-beta1

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/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/dist/components.es.js

@@ -48,8 +48,8 @@ function vt(e, a, t, i, s, o) {
 }
 const Li = /* @__PURE__ */ y(gt, [["render", vt]]);
 /*!
-  * iamKey v5.2.0
-  * Copyright 2022-2023 iamproperty
+  * iamKey v5.3.0-beta1
+  * Copyright 2022-2024 iamproperty
   */
 const _t = function(e) {
   return typeof e != "string" ? !1 : !isNaN(e) && !isNaN(parseFloat(e));
@@ -557,8 +557,8 @@ class Mt extends HTMLElement {
   }
 }
 /*!
-  * iamKey v5.2.0
-  * Copyright 2022-2023 iamproperty
+  * iamKey v5.3.0-beta1
+  * Copyright 2022-2024 iamproperty
   */
 class ot extends HTMLElement {
   constructor() {
@@ -1152,7 +1152,7 @@ const be = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-87390949.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/accordion/accordion.component.js": () => import("./accordion.component-bd9af0d7.mjs"), "../../../assets/js/components/accordion/accordion.component.min.js": () => import("./accordion.component.min-1515894d.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((e) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1263,7 +1263,7 @@ const Ei = /* @__PURE__ */ y(xe, [["render", Ee]]), Te = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-3bb86b22.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-7002c67c.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/card/card.component.js": () => import("./card.component-8399b3cb.mjs"), "../../../assets/js/components/card/card.component.min.js": () => import("./card.component.min-def4451e.mjs") }), "../../../assets/js/components/card/card.component.js").then((e) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1317,7 +1317,7 @@ const Hi = /* @__PURE__ */ y(Me, [["render", je]]), Ce = {
   },
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-a9092fe6.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/header/header.component.js": () => import("./header.component-cc8263fb.mjs"), "../../../assets/js/components/header/header.component.min.js": () => import("./header.component.min-73a64e36.mjs") }), "../../../assets/js/components/header/header.component.js").then((e) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1713,7 +1713,7 @@ const Di = /* @__PURE__ */ y(oa, [["render", ya]]), wa = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-19f8e1b6.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/nav/nav.component.js": () => import("./nav.component-ff8d1484.mjs"), "../../../assets/js/components/nav/nav.component.min.js": () => import("./nav.component.min-0812bdc7.mjs") }), "../../../assets/js/components/nav/nav.component.js").then((e) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1833,7 +1833,7 @@ const Pa = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-d27dd837.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/tabs/tabs.component.js": () => import("./tabs.component-1dfbdb3b.mjs"), "../../../assets/js/components/tabs/tabs.component.min.js": () => import("./tabs.component.min-f0407824.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((e) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1963,8 +1963,8 @@ function Za(e, a, t, i, s, o) {
 }
 const Oi = /* @__PURE__ */ y(Ka, [["render", Za]]);
 /*!
-  * iamKey v5.2.0
-  * Copyright 2022-2023 iamproperty
+  * iamKey v5.3.0-beta1
+  * Copyright 2022-2024 iamproperty
   */
 function ti(e, a) {
   function t(i, s) {
@@ -2059,8 +2059,8 @@ function ii(e, a, t, i, s, o) {
 }
 const Bi = /* @__PURE__ */ y(ai, [["render", ii]]);
 /*!
-  * iamKey v5.2.0
-  * Copyright 2022-2023 iamproperty
+  * iamKey v5.3.0-beta1
+  * Copyright 2022-2024 iamproperty
   */
 function ni(e, a) {
   oi(e, a);
@@ -2229,7 +2229,7 @@ const Vi = /* @__PURE__ */ y(mi, [["render", hi]]), pi = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-6252c5d8.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
+      N(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-3f2c98c0.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-d93c7710.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((e) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -2276,8 +2276,8 @@ function wi(e, a, t, i, s, o) {
 }
 const Gi = /* @__PURE__ */ y(yi, [["render", wi]]);
 /*!
-  * iamKey v5.2.0
-  * Copyright 2022-2023 iamproperty
+  * iamKey v5.3.0-beta1
+  * Copyright 2022-2024 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });
 class vi extends HTMLElement {