@iamproperty/components 7.2.1 → 7.2.2--beta2

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

@@ -57,8 +57,37 @@ class iamCard extends HTMLElement {
         <slot name="btns"></slot>
       </div>
     </div>`;
+
+      // safari and firefox anchor fix for cards
+      if (!CSS.supports('top', 'anchor(top)')) {
+
+
+        const actionButton = this.shadowRoot?.querySelector('[popovertarget="actions"]');
+        const actionPopover = this.shadowRoot?.querySelector('[popover]');
+
+        actionButton?.addEventListener('click', (event) => {
+
+          this.style.setProperty('overflow', 'visible');
+          this.style.setProperty('z-index', '999999');
+
+          const viewportOffset = actionButton.getBoundingClientRect();
+          const top = viewportOffset.top;
+          const left = viewportOffset.left;
+
+          actionPopover.style.setProperty('display', 'block');
+          actionPopover.style.setProperty('top', top + 'px');
+          actionPopover.style.setProperty('left', (left - 100) + 'px');
+        });
+
+        document.addEventListener("scroll", (event) => {
+
+          actionPopover.style.setProperty('display', 'none');
+        });
+
+      }
     }
 
+
     // Make sure slotted buttons and links have correct button classes
     Array.from(cardComponent.querySelectorAll('[slot="btns"]')).forEach((button) => {
       button.classList.add('btn');

package/assets/ts/components/fileupload/fileupload.component.ts

@@ -66,7 +66,7 @@ class iamFileupload extends HTMLElement {
           const filesWrapper = this.shadowRoot.querySelector('.files');
 
           if (newVal != null && newVal != 'null' && newVal != '')
-            filesWrapper.innerHTML = `<span class="file">${newVal} <button data-file="${newVal}">Remove</button></span>`;
+            filesWrapper.innerHTML = `<span class="file" part="file">${newVal} <button data-file="${newVal}" part="file__remove">Remove</button></span>`;
         }
         break;
       }

package/assets/ts/modules/fileupload.ts

@@ -128,7 +128,7 @@ function fileupload(fileupload: Element, wrapper: Element): void {
     filesWrapper.innerHTML = '';
 
     for (const file of input.files) {
-      filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}">Remove</button></span>`;
+      filesWrapper.innerHTML += `<span class="file" part="file">${file.name} <button data-file="${file.name}" part="file__remove">Remove</button></span>`;
     }
 
     const elementChangeEvent = new CustomEvent('elementchange', { detail: { files: input.files } });
@@ -144,7 +144,7 @@ function fileupload(fileupload: Element, wrapper: Element): void {
     const filename = fileupload.getAttribute('data-filename');
 
     if (filename)
-      filesWrapper.innerHTML = `<span class="file">${filename} <button data-file="${filename}">Remove</button></span>`;
+      filesWrapper.innerHTML = `<span class="file" part="file">${filename} <button data-file="${filename}" part="file__remove">Remove</button></span>`;
   }
 }
 

package/dist/components.es.js

@@ -382,7 +382,7 @@ const R = /* @__PURE__ */ u(Q, [["render", gt]]), bt = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-DqVsO4qU.js").then((e) => {
+      import("./accordion.component.min-BwwVokPG.js").then((e) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -452,7 +452,7 @@ const Qi = /* @__PURE__ */ u(At, [["render", Lt]]), St = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-tPJGEn4e.js").then((e) => {
+      import("./actionbar.component.min-D_tNSNAa.js").then((e) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -545,7 +545,7 @@ const Zi = /* @__PURE__ */ u(Ct, [["render", Dt]]), Ft = {
   name: "Barchart",
   created() {
     this.$nextTick(function() {
-      import("./barchart.component.min-ByuFdYJ_.js").then((e) => {
+      import("./barchart.component.min-C3tGfwpn.js").then((e) => {
         window.customElements.get("iam-barchart") || window.customElements.define("iam-barchart", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -562,7 +562,7 @@ const ta = /* @__PURE__ */ u(Ft, [["render", zt]]), Bt = { ref: "wrapper" }, ea
   __name: "BentoGrid",
   setup(e) {
     return L(() => {
-      import("./bento-grid.component.min-LqTNHKMl.js").then((i) => {
+      import("./bento-grid.component.min-PJ5Sw2cN.js").then((i) => {
         window.customElements.get("iam-bento-grid") || window.customElements.define("iam-bento-grid", i.default);
       }).catch((i) => {
         console.log(i.message);
@@ -575,7 +575,7 @@ const ta = /* @__PURE__ */ u(Ft, [["render", zt]]), Bt = { ref: "wrapper" }, ea
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component.min-DSxoW8bM.js").then((e) => {
+      import("./card.component.min-CvHsSEgW.js").then((e) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -592,7 +592,7 @@ const ia = /* @__PURE__ */ u(Ot, [["render", Ut]]), Wt = {
   name: "Header",
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-BLqQZOX2.js").then((e) => {
+      import("./carousel.component.min-CfrGKzmB.js").then((e) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -685,7 +685,7 @@ const na = /* @__PURE__ */ u(Qt, [["render", Yt]]), Jt = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-CQ_UuM3i.js").then((e) => {
+      import("./fileupload.component.min-B8qXjoWV.js").then((e) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -715,7 +715,7 @@ const na = /* @__PURE__ */ u(Qt, [["render", Yt]]), Jt = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./filter-card.component.min-H5BE2Ru2.js").then((e) => {
+      import("./filter-card.component.min-DDPqKkJW.js").then((e) => {
         window.customElements.get("iam-filter-card") || window.customElements.define("iam-filter-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -730,7 +730,7 @@ function Zt(e, i, t, n, s, a) {
 }
 const oa = /* @__PURE__ */ u(Xt, [["render", Zt]]);
 /*!
-  * iamKey v7.2.1
+  * iamKey v7.2.2--beta2
   * Copyright 2022-2025 iamproperty
   */
 function te(e, i) {
@@ -814,7 +814,7 @@ const ra = /* @__PURE__ */ u(ae, [["render", ne]]), se = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-DjAn8TfE.js").then((e) => {
+      import("./header.component.min-BZX2ZoiZ.js").then((e) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -865,7 +865,7 @@ const la = /* @__PURE__ */ u(se, [["render", le]]), ce = {
   name: "Multiselect",
   mounted() {
     this.$nextTick(function() {
-      import("./multiselect.component.min-DVfgP5Ar.js").then((e) => {
+      import("./multiselect.component.min-rt55cqlJ.js").then((e) => {
         window.customElements.get("iam-multiselect") || window.customElements.define("iam-multiselect", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -913,7 +913,7 @@ const ua = /* @__PURE__ */ u(ue, [["render", he]]), fe = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-BEj9HL_b.js").then((e) => {
+      import("./nav.component.min-DPo7kA0d.js").then((e) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -946,7 +946,7 @@ const pa = /* @__PURE__ */ u(fe, [["render", be]]), ye = {
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component.min-ClthZhvT.js").then((e) => {
+      import("./table.component.min-BxT7sNsr.js").then((e) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1164,7 +1164,7 @@ function Ne(e, i, t, n, s, a) {
 }
 const fa = /* @__PURE__ */ u(Ce, [["render", Ne]]);
 /*!
-  * iamKey v7.2.1
+  * iamKey v7.2.2--beta2
   * Copyright 2022-2025 iamproperty
   */
 class I extends HTMLElement {
@@ -1537,7 +1537,7 @@ const ba = /* @__PURE__ */ u(Ie, [["render", Ke]]), Qe = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./record-card.component.min-DHZqq1oU.js").then((e) => {
+      import("./record-card.component.min-CLabRJU8.js").then((e) => {
         window.customElements.get("iam-record-card") || window.customElements.define("iam-record-card", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1571,7 +1571,7 @@ const _a = /* @__PURE__ */ u(Je, [["render", Xe]]), Ze = {
   name: "Slider",
   mounted() {
     this.$nextTick(function() {
-      import("./slider.component.min-CoMSsfP7.js").then((e) => {
+      import("./slider.component.min-B-U6uHO1.js").then((e) => {
         window.customElements.get("iam-slider") || window.customElements.define("iam-slider", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1687,7 +1687,7 @@ const ka = /* @__PURE__ */ u(fi, [["render", yi]]), _i = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-cqyqnhg6.js").then((e) => {
+      import("./tabs.component.min-Cf-gwDcj.js").then((e) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", e.default);
       }).catch((e) => {
         console.log(e.message);
@@ -1869,7 +1869,7 @@ const Sa = /* @__PURE__ */ u(Vi, [["render", Bi]]), Oi = {
   name: "Video card",
   created() {
     this.$nextTick(function() {
-      import("./video-card.component.min-B86P-93Q.js").then((e) => {
+      import("./video-card.component.min-n3Oq-45b.js").then((e) => {
         window.customElements.get("iam-video-card") || window.customElements.define("iam-video-card", e.default);
       }).catch((e) => {
         console.log(e.message);