@pushengineering/umg-web-components 2.0.4 → 2.0.6

package/dist/components/modal/modal.js

@@ -1,18 +1,18 @@
-import { css as m, LitElement as c, html as b } from "lit";
+import { css as c, LitElement as m, html as b } from "lit";
 import { customElement as p } from "lit/decorators/custom-element.js";
-import { property as n } from "lit/decorators/property.js";
+import { property as d } from "lit/decorators/property.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { global as v } from "../../styles/global.js";
 import { settings as g } from "../../scripts/settings.js";
-import { mergeStyles as f } from "../../scripts/mergeStyles.js";
+import { mergeStyles as h } from "../../scripts/mergeStyles.js";
 import "../button-icon/button-icon.js";
-var h = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, r, a, l) => {
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, r, a, l) => {
   for (var o = l > 1 ? void 0 : l ? _(r, a) : r, i = e.length - 1, s; i >= 0; i--)
     (s = e[i]) && (o = (l ? s(r, a, o) : s(o)) || o);
-  return l && o && h(r, a, o), o;
+  return l && o && f(r, a, o), o;
 };
 const { prefix: y } = g;
-let t = class extends c {
+let t = class extends m {
   constructor() {
     super(), this.visible = !1, this.layout = "list", this.addEventListener("keyup", (e) => {
       e.code.toUpperCase() === "ESCAPE" && this.toggleModal();
@@ -70,9 +70,9 @@ let t = class extends c {
       `;
   }
 };
-t.styles = f([
+t.styles = h([
   v,
-  m`
+  c`
             /* Base */
             .modal {
                 background-color: rgba(var(--um-color-modal-bg, 255, 255, 255), var(--um-opacity-modal-bg, 0.95));
@@ -112,11 +112,17 @@ t.styles = f([
             }
 
             .modal__content {
-                padding: var(--um-space-48, 3rem) 0;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                padding: var(--um-space-24, 1.5rem) 0;
                 width: calc(var(--um-breakpoint-lg, 64rem) - var(--um-space-48, 3rem));
             }
             .modal__content-inner {
                 padding: 0 var(--um-space-24, 1.5rem);
+                min-height: 0;
             }
             .modal__content-inner ::slotted(*) {
                 display: block;
@@ -129,7 +135,7 @@ t.styles = f([
                 align-items: center;
                 justify-content: center;
                 padding: var(--um-space-16) 0;
-                position: fixed;
+                position: sticky;
                 right: 0;
                 top: 0;
                 left: 0;
@@ -158,13 +164,13 @@ t.styles = f([
             }
         `
 ]);
-d([
-  n({ type: Boolean })
+n([
+  d({ type: Boolean })
 ], t.prototype, "visible", 2);
-d([
-  n()
+n([
+  d()
 ], t.prototype, "layout", 2);
-t = d([
+t = n([
   p(`${y}-modal`)
 ], t);
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushengineering/umg-web-components",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "type": "module",
   "module": "dist/components/index.js",
   "files": [