@iamproperty/components 5.3.0-beta5 → 5.3.0-beta7

package/assets/sass/components/card.global.scss

@@ -26,6 +26,12 @@ iam-card {
       overflow: hidden;
     }
   }
+
+  &.card--has-icon:not(.card--filter):not(.card--secondary) i {
+    position: absolute;
+    top: calc(50% - 0.5rem - 2px);
+    left: 1rem;
+  }
 }
 
 

package/assets/sass/components/card.scss

@@ -130,6 +130,28 @@
     padding-right: rem(16);
     margin-top: 0.5rem;
   }
+
+  &.card--has-icon:not(.card--secondary):not(.card--filter) { 
+    display: flex;
+    align-items: center;
+
+    &:before,
+    &:after {
+      top: calc(50% - 0.75rem);
+      bottom: auto;
+    }
+  }
+
+  &.card--has-icon:not(.card--secondary):not(.card--filter) .card__body {
+    padding-left: 4rem;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    inset: 0;
+    align-items: flex-start;
+    justify-content: center;
+  }
 }
 
 ::slotted(i){

package/assets/sass/components/component.reset.scss

@@ -1,4 +1,8 @@
-@use "../_func.scss" as *;
+$darkModeLocal: 'false'!default;
+
+@use "../_func.scss" as * with (
+  $darkMode: $darkModeLocal
+);
 
 @use "../foundations/root.scss" with (
   $root: ":is(iam-card,iam-nav,iam-table,.iamkey)" // copied directory from iamkey repo

package/assets/sass/elements/dialog.scss

@@ -178,7 +178,7 @@ dialog::backdrop {
 // #endregion
 
 // #region Transactional 
-*:not(.dialog__wrapper) > dialog[open]:not(.dialog--multi):is(:has(:is(button,a):last-child),:has(form:last-child > :is(button,a):last-child)):not(:has(.youtube-embed)) {
+*:not(.dialog__wrapper) > dialog[open]:is(.dialog--transactional, .dialog--acknowledgement) {
 
   text-align: center;
 

package/assets/sass/foundations/reboot.scss

@@ -188,3 +188,7 @@ main > :is(.full-width, .container, iam-header) {
 main > :is(.full-width, [class*="bg-"]) {
   grid-column: full-width;
 }
+
+.row > .col {
+  min-height: var(--min-height,0);
+}

package/assets/ts/modules/dialogs.ts

@@ -105,7 +105,7 @@ const extendDialogs = (body) => {
         dialog = dialog.parentNode.closest('dialog[open]');
       
       // Dont allow the backdrop to be clicked when transactional
-      if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
+      if(!dialog.classList.contains('dialog--transactional') && !dialog.classList.contains('dialog--acknowledgement')){
 
         const dialogDimensions = dialog.getBoundingClientRect()
 
@@ -213,14 +213,7 @@ const extendDialogs = (body) => {
   return null
 }
 
-export const createDialog = (dialog) => {
-
-  // Prevent the user from escaping the model when transactional
-  if(dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') && !dialog.classList.contains('dialog--multi')) {
-    dialog.addEventListener("cancel", (e) => {
-      e.preventDefault();
-    });        
-  }
+export const createDialog = (dialog) => { 
 
   // Create the video embed
   let videoButton = dialog.querySelector('.youtube-embed a');

package/assets/ts/modules/helpers.ts

@@ -80,6 +80,17 @@ export const addGlobalEvents = (body) => {
 
   });
 
+  document.addEventListener("keydown", (e) => {
+
+    if(e.key === "Escape") {
+      
+      if(document.querySelector('.dialog--transactional[open], .dialog--acknowledgement[open]')){
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }
+  });
+
   return null
 }
 

package/dist/components.es.js

@@ -67,7 +67,10 @@ const Da = /* @__PURE__ */ p(B, [["render", K]]), G = (t) => t.charAt(0).toUpper
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component.min-06d6f25e.mjs").then((t) => {
+      import(
+        /* @vite-ignore */
+        "./table.component.min-711285c4.mjs"
+      ).then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -546,7 +549,7 @@ const Te = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      S(/* @__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-8733cd09.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((t) => {
+      S(/* @__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-a1bedca3.mjs") }), "../../../assets/js/components/accordion/accordion.component.js").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -657,7 +660,10 @@ const Ba = /* @__PURE__ */ p(Pe, [["render", Be]]), Ue = {
   name: "Card",
   mounted() {
     this.$nextTick(function() {
-      import("./card.component.min-ac55f728.mjs").then((t) => {
+      import(
+        /* @vite-ignore */
+        "./card.component.min-fc499786.mjs"
+      ).then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -711,7 +717,7 @@ const Wa = /* @__PURE__ */ p(Ke, [["render", Ge]]), Qe = {
   },
   mounted() {
     this.$nextTick(function() {
-      S(/* @__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-4d555f59.mjs") }), "../../../assets/js/components/header/header.component.js").then((t) => {
+      S(/* @__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-5223e76d.mjs") }), "../../../assets/js/components/header/header.component.js").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1107,7 +1113,7 @@ const Ya = /* @__PURE__ */ p(_t, [["render", jt]]), Ct = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-7993b768.mjs").then((t) => {
+      import("./nav.component.min-1f3de17d.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1227,7 +1233,7 @@ const ta = {
   name: "Tabs",
   mounted() {
     this.$nextTick(function() {
-      S(/* @__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-7cf074e7.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((t) => {
+      S(/* @__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-2b05cd66.mjs") }), "../../../assets/js/components/tabs/tabs.component.js").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1357,7 +1363,7 @@ function ha(t, a, e, i, o, n) {
 }
 const ii = /* @__PURE__ */ p(la, [["render", ha]]);
 /*!
-  * iamKey v5.3.0-beta5
+  * iamKey v5.3.0-beta7
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1453,7 +1459,7 @@ function ya(t, a, e, i, o, n) {
 }
 const si = /* @__PURE__ */ p(ga, [["render", ya]]);
 /*!
-  * iamKey v5.3.0-beta5
+  * iamKey v5.3.0-beta7
   * Copyright 2022-2024 iamproperty
   */
 function va(t, a) {
@@ -1623,7 +1629,7 @@ const oi = /* @__PURE__ */ p(Sa, [["render", qa]]), Ea = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      S(/* @__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-d238f0d4.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((t) => {
+      S(/* @__PURE__ */ Object.assign({ "../../../assets/js/components/actionbar/actionbar.component.js": () => import("./actionbar.component-151b3ba4.mjs"), "../../../assets/js/components/actionbar/actionbar.component.min.js": () => import("./actionbar.component.min-eb4f4bc2.mjs") }), "../../../assets/js/components/actionbar/actionbar.component.js").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1638,7 +1644,7 @@ function Ta(t, a, e, i, o, n) {
 }
 const ri = /* @__PURE__ */ p(Ea, [["render", Ta]]);
 /*!
-  * iamKey v5.3.0-beta5
+  * iamKey v5.3.0-beta7
   * Copyright 2022-2024 iamproperty
   */
 class z extends HTMLElement {
@@ -1778,7 +1784,7 @@ function Na(t, a, e, i, o, n) {
 }
 const di = /* @__PURE__ */ p(Ca, [["render", Na]]);
 /*!
-  * iamKey v5.3.0-beta5
+  * iamKey v5.3.0-beta7
   * Copyright 2022-2024 iamproperty
   */
 window.dataLayer = window.dataLayer || [], window.dataLayer.push({ event: "customElementRegistered", element: "collapsible side menu" });