@supersoniks/concorde 3.2.4 → 3.2.5

package/package.json

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

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

@@ -3,6 +3,7 @@ import { customElement, property } from "lit/decorators.js";
 import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
 import { ifDefined } from "lit/directives/if-defined.js";
 import HTML from "@supersoniks/concorde/core/utils/HTML";
+import { ButtonType } from "../button/button";
 const tagName = "sonic-modal-close";
 
 @customElement(tagName)
@@ -16,6 +17,7 @@ export class ModalClose extends LitElement {
   };
 
   @property() reset?: string;
+  @property() type?: ButtonType;
 
   connectedCallback() {
     super.connectedCallback();
@@ -23,10 +25,12 @@ export class ModalClose extends LitElement {
   }
   render() {
     return html`<sonic-button
-      aria-label=${this.translation[this.lang]}
+      noAutoFill
+      data-aria-label=${this.translation[this.lang]}
       reset=${ifDefined(this.reset)}
       shape="circle"
       @click=${this.handleClick}
+      type=${ifDefined(this.type)}
       ><sonic-icon name="cancel" size="lg"></sonic-icon
     ></sonic-button>`;
   }

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

@@ -17,6 +17,8 @@ import { DirectiveResult } from "lit/directive.js";
 import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { ButtonType } from "../button/button";
 
 declare const window: ConcordeWindow;
 declare type ModalCreateOptions = {
@@ -38,6 +40,7 @@ declare type ModalCreateOptions = {
   effect?: effectType;
   closeOnLocationChange?: boolean;
   noCloseButton?: boolean;
+  closeButtonType?: ButtonType;
 };
 
 type effectType = "fade" | "slide" | "none";
@@ -156,32 +159,48 @@ export class Modal extends Subscriber(LitElement) {
       /* Close button */
       ::slotted(sonic-modal-close),
       sonic-modal-close {
-        --sc_translate-x: calc(var(--sc-modal-px) - 0.25rem);
-        --sc_translate-y: calc(-1 * var(--sc-modal-py) - 0.25rem);
         --sc_top: 0.25rem;
         --sc_x: 0.25rem;
         position: sticky;
         display: block;
-        height: 0;
         top: var(--sc_top);
         margin-left: auto;
+        margin-bottom: -1rem;
         margin-top: calc(-1 * var(--sc-modal-py) - 0.25rem);
-        margin-bottom: var(--sc-modal-py);
-        transform: translateX(var(--sc_translate-x));
+        margin-right: calc(-1 * var(--sc-modal-px) + 0.25rem);
         z-index: 20;
+        opacity: 0;
+        transform: scale(0);
+        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+          opacity 0.1s linear;
+        transform-origin: center center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
       :host([align="right"]) ::slotted(sonic-modal-close),
       :host([align="right"]) sonic-modal-close {
         right: auto;
         margin-right: auto;
-        margin-left: 0;
-        transform: translateX(calc(-1 * var(--sc_translate-x)));
+        margin-left: calc(-1 * var(--sc-modal-px) + 0.25rem);
       }
 
       /* Border radius */
       :host([rounded="none"]) #modal {
         --sc-img-radius: 0 !important;
       }
+
+      sonic-modal-close.animate-in {
+        transform: scale(1);
+        opacity: 1 !important;
+        transition-delay: 0.2s;
+      }
+      sonic-modal-close.animate-out {
+        opacity: 0 !important;
+        transition-delay: 0s !important;
+        transform: scale(0) !important;
+        transition: 0.2s linear !important;
+      }
     `,
   ];
   static modals: Array<Modal> = [];
@@ -209,6 +228,7 @@ export class Modal extends Subscriber(LitElement) {
 
   @property({ type: Boolean, reflect: true }) fullScreen = false;
   @property({ type: Boolean, reflect: true }) visible = false;
+  @property({ type: String }) closeButtonType?: ButtonType;
 
   @query("#modal") _modalElement!: HTMLDialogElement;
 
@@ -238,6 +258,8 @@ export class Modal extends Subscriber(LitElement) {
     if (options.fullScreen) modal.fullScreen = options?.fullScreen;
     if (options.effect) modal.effect = options?.effect;
     if (options.noCloseButton) modal.noCloseButton = true;
+    if (options.closeButtonType)
+      modal.closeButtonType = options?.closeButtonType;
     if (options.paddingX) modal.paddingX = options?.paddingX;
     if (options.paddingY) modal.paddingY = options?.paddingY;
     if (options.zIndex) modal.zIndex = options?.zIndex;
@@ -355,7 +377,12 @@ export class Modal extends Subscriber(LitElement) {
         ${this._animationState !== "hidden"
           ? html`<div id="modal-content">
               ${!this.forceAction && !this.noCloseButton
-                ? html`<sonic-modal-close></sonic-modal-close>`
+                ? html`<sonic-modal-close
+                    class="${this._animationState == "visible"
+                      ? "animate-in"
+                      : "animate-out"}"
+                    type=${ifDefined(this.closeButtonType)}
+                  ></sonic-modal-close>`
                 : nothing}
               ${this.modalFragment("title")} ${this.modalFragment("subtitle")}
               ${this.modalFragment("content")} ${this.modalFragment("actions")}