@supersoniks/concorde 3.1.21 → 3.1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "3.1.21",
+  "version": "3.1.22",
   "license": "MIT",
   "type": "module",
   "main": "",

package/src/core/components/ui/modal/modal.ts

@@ -1,4 +1,4 @@
-import { animate, fadeIn, fadeOut } from "@lit-labs/motion";
+import { animate, fadeIn, fadeOut, Options } from "@lit-labs/motion";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
 import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { css, html, LitElement, nothing, PropertyValues } from "lit";
@@ -39,7 +39,12 @@ declare type ModalCreateOptions = {
   removeOnHide?: boolean;
   forceAction?: boolean;
   removeHashOnHide?: boolean;
+  fullScreen?: boolean;
+  effect?: effectType;
 };
+
+type effectType = "fade" | "slide" | "none";
+
 const tagName = "sonic-modal";
 
 @customElement(tagName)
@@ -180,10 +185,13 @@ export class Modal extends Subscriber(LitElement) {
   @property({ type: String }) width = "100%";
   @property({ type: String }) height = "auto";
   @property({ type: String }) zIndex = "var(--sc-modal-z-index)";
+  @property({ type: String }) effect?: effectType;
   @property({ type: Object }) options?: ModalCreateOptions;
   @property({ type: Boolean, reflect: true }) fullScreen = false;
   @property({ type: Boolean, reflect: true }) visible = false;
 
+  @property({ type: Object }) animation?: Options;
+
   @query(".modal-wrapper") modalWrapper!: HTMLDivElement;
   @query(".modal") modalElement!: HTMLDivElement;
 
@@ -204,6 +212,8 @@ export class Modal extends Subscriber(LitElement) {
     if (options.maxHeight) modal.maxHeight = options?.maxHeight;
     if (options.height) modal.height = options?.height;
     if (options.forceAction) modal.forceAction = true;
+    if (options.fullScreen) modal.fullScreen = options?.fullScreen;
+    if (options.effect) modal.effect = options?.effect;
 
     if (options.paddingX)
       modal.style.setProperty("--sc-modal-px", options?.paddingX);
@@ -248,6 +258,40 @@ export class Modal extends Subscriber(LitElement) {
     if (_changedProperties.has("fullScreen")) {
       this.handleFullsceen();
     }
+    if (_changedProperties.has("effect")) {
+      if (this.effect == "fade") {
+        this.animation = {
+          keyframeOptions: {
+            duration: 400,
+          },
+          in: fadeIn,
+          out: fadeOut,
+        };
+      } else if (this.effect == "none") {
+        this.animation = undefined;
+      } else {
+        this.animation = {
+          keyframeOptions: {
+            duration: 400,
+            easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+          },
+          in: [
+            {
+              transform: "translateY(25%) scale(1)",
+              boxShadow: "0 0 0 rgba(0,0,0,0)",
+              opacity: 0,
+            },
+          ],
+          out: [
+            {
+              transform: "translateY(20%) scale(1)",
+              boxShadow: "0 0 0 rgba(0,0,0,0)",
+              opacity: 0,
+            },
+          ],
+        };
+      }
+    }
     super.willUpdate(_changedProperties);
   }
 
@@ -284,26 +328,7 @@ export class Modal extends Subscriber(LitElement) {
           part="modal"
           class="modal custom-scroll"
           style=${styleMap(modalStyles)}
-          ${animate({
-            keyframeOptions: {
-              duration: 400,
-              easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
-            },
-            in: [
-              {
-                transform: "translateY(25%) scale(1)",
-                boxShadow: "0 0 0 rgba(0,0,0,0)",
-                opacity: 0,
-              },
-            ],
-            out: [
-              {
-                transform: "translateY(20%) scale(1)",
-                boxShadow: "0 0 0 rgba(0,0,0,0)",
-                opacity: 0,
-              },
-            ],
-          })}
+          ${animate(this.animation)}
         >
           <div class="modal-content">
             ${!this.options?.forceAction