@supersoniks/concorde 3.1.88 → 3.1.90

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

@@ -1,14 +1,7 @@
-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";
-import {
-  customElement,
-  property,
-  query,
-  queryAssignedElements,
-  state,
-} from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "@supersoniks/concorde/core/components/ui/modal/modal-actions";
@@ -56,70 +49,57 @@ export class Modal extends Subscriber(LitElement) {
     customScroll,
     css`
       :host {
-        --sc-modal-py: 2.5rem;
-        --sc-modal-px: 1.5rem;
-        --sc-modal-max-w: min(100vw, 40rem);
-        --sc-modal-max-h: 85vh;
-        --sc-modal-rounded: var(--sc-rounded-lg);
-        --sc-modal-z-index: 990;
+        --sc_py: 2.5rem;
+        --sc_px: 1.5rem;
+        --sc_max-w: min(100vw, 40rem);
+        --sc_max-h: 85vh;
+        --sc_rounded: var(--sc-rounded-lg);
+        --sc_z-index: 990;
+        --sc_backdrop-opacity: 0;
       }
 
       * {
         box-sizing: border-box;
       }
 
-      .modal-wrapper {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        z-index: var(--sc-modal-z-index);
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        display: flex;
-        pointer-events: none;
-      }
-
-      .modal-content {
-        display: flex;
-        flex-direction: column;
-        min-height: 10rem;
-        line-height: 1.25;
-      }
-
-      .modal {
+      #modal {
         background: var(--sc-base, #fff);
         color: var(--sc-base-content, #000);
         width: 100%;
         box-shadow: var(--sc-shadow-lg);
-        border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;
-        pointer-events: auto;
-        /*overflow: hidden;*/
+        border-radius: var(--sc_rounded) var(--sc_rounded) 0 0;
         transform: translateZ(0);
+        border: none;
+        outline: none;
+        height: fit-content;
+        padding: 0;
+        pointer-events: none;
+        transition: none !important;
+        opacity: 0;
+        position: fixed;
+        inset: 0;
+        z-index: var(--sc_z-index);
       }
 
-      .overlay {
+      /*#modal::backdrop {*/
+      #backdrop {
+        opacity: var(--sc_backdrop-opacity, 0);
         background: var(
-          --sc-modal-overlay-bg,
+          --sc_overlay-bg,
           var(--sc-base-200, rgba(0, 0, 0, 0.12))
         );
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        z-index: var(--sc-modal-z-index);
-        opacity: 0.8;
+        transition: opacity 0.2s ease-in-out;
+        inset: 0;
         position: fixed;
+        z-index: var(--sc_z-index);
       }
 
-      ::slotted(sonic-modal-title),
-      sonic-modal-title {
-        margin-bottom: 1.25rem;
-      }
-      :host([align="left"]) ::slotted(sonic-modal-title),
-      :host([align="left"]) sonic-modal-title {
-        padding-right: 1em;
+      #modal-content {
+        display: flex;
+        flex-direction: column;
+        min-height: 10rem;
+        line-height: 1.25;
+        padding: var(--sc_py) var(--sc_px);
       }
 
       ::slotted(sonic-modal-subtitle),
@@ -129,44 +109,29 @@ export class Modal extends Subscriber(LitElement) {
       }
 
       @media (max-width: 767.5px) {
-        .modal-wrapper,
-        .modal {
+        #modal {
           max-width: none !important;
+          margin: auto 0 0 !important;
           width: 100% !important;
-          border-radius: var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0 !important;
+          border-radius: var(--sc_rounded) var(--sc_rounded) 0 0 !important;
         }
       }
+      :host([fullScreen]) #modal {
+        width: 100% !important;
+        height: 100% !important;
+        max-width: none !important;
+        max-height: none !important;
+        transform: none !important;
+      }
 
-      @media (min-width: 768px) {
-        .modal-wrapper {
-          top: 50%;
-          left: 50%;
-          bottom: auto;
-          right: auto;
-          transform: translateX(-50%) translateY(-50%);
-        }
-
-        /* Solution améliorée pour les navigateurs supportant round() */
-        @supports (transform: translateX(round(-50%, 1px))) {
-          .modal-wrapper {
-            transform: translateX(round(-50%, 1px)) translateY(round(-50%, 1px));
-          }
-        }
-
-        :host([fullScreen]) .modal-wrapper {
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          transform: none;
-        }
-
-        .modal {
-          top: 50%;
-          bottom: auto;
-          right: auto;
-          border-radius: var(--sc-modal-rounded);
-        }
+      /* Layout des éléments slottés */
+      ::slotted(sonic-modal-title),
+      sonic-modal-title {
+        margin-bottom: 1.25rem;
+      }
+      :host([align="left"]) ::slotted(sonic-modal-title),
+      :host([align="left"]) sonic-modal-title {
+        padding-right: 1em;
       }
 
       :host([align="left"]) .modal-content {
@@ -184,6 +149,27 @@ export class Modal extends Subscriber(LitElement) {
         align-items: flex-end;
       }
 
+      /* Close button */
+      ::slotted(sonic-modal-close),
+      sonic-modal-close {
+        position: sticky;
+        display: block;
+        align-self: flex-end;
+        height: 0;
+        top: 0.5rem;
+        right: 0.5rem;
+        transform: translateX(calc(var(--sc_px) - 0.2rem))
+          translateY(calc(-1 * var(--sc_py) + 0.2rem));
+        z-index: 20;
+      }
+      :host([align="right"]) ::slotted(sonic-modal-close),
+      :host([align="right"]) sonic-modal-close {
+        right: auto;
+        left: 0.5rem;
+        transform: translateX(calc(-1 * var(--sc_px)))
+          translateY(calc(-1 * var(--sc_py)));
+      }
+
       /* Border radius */
       :host([rounded="none"]) modal {
         --sc-img-radius: 0 !important;
@@ -191,7 +177,6 @@ export class Modal extends Subscriber(LitElement) {
     `,
   ];
   static modals: Array<Modal> = [];
-
   @property({ type: Boolean }) forceAction = false;
   @property({ type: Boolean }) removeOnHide = false;
   @property({ type: Boolean }) removeHashOnHide = false;
@@ -200,28 +185,30 @@ export class Modal extends Subscriber(LitElement) {
     | "right"
     | "left" = "left";
 
-  @property({ type: String }) padding = "var(--sc-modal-py) var(--sc-modal-px)";
-  @property({ type: String }) maxWidth = "var(--sc-modal-max-w) ";
-  @property({ type: String }) maxHeight = "var(--sc-modal-max-h) ";
+  @property({ type: String }) padding = "var(--sc_py) var(--sc_px)";
+  @property({ type: String }) maxWidth = "var(--sc_max-w)";
+  @property({ type: String }) maxHeight = "var(--sc_max-h)";
   @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: String }) height = "fit-content";
+  @property({ type: String }) zIndex = "var(--sc_z-index)";
+  @property({ type: String }) effect: effectType = "slide";
+
   @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;
+  @query("#modal") _modalElement!: HTMLDialogElement;
 
   @property({ type: Boolean }) closeOnLocationChange = false;
   @state() location = "";
 
-  @queryAssignedElements({ selector: "sonic-modal-close" })
-  closeBtn!: Array<HTMLElement>;
-  static create(options: ModalCreateOptions): Modal {
+  @state() private _animationState: "visible" | "in" | "out" | "hidden" =
+    "hidden";
+
+  _animationDuration = 400;
+
+  static async create(options: ModalCreateOptions): Promise<Modal> {
     const modal = document.createElement(tagName) as Modal;
     // modal styles
     modal.options = options;
@@ -241,16 +228,15 @@ export class Modal extends Subscriber(LitElement) {
     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);
-    if (options.paddingY)
-      modal.style.setProperty("--sc-modal-py", options?.paddingY);
+    if (options.paddingX) modal.style.setProperty("--sc_px", options?.paddingX);
+    if (options.paddingY) modal.style.setProperty("--sc_py", options?.paddingY);
     if (options.zIndex)
-      modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
+      modal.style.setProperty("--sc_z-index", options?.zIndex);
 
     const container = Theme.getPopContainer();
     container.appendChild(modal);
-    modal.show();
+    await modal.updateComplete;
+    await modal.show();
     return modal;
   }
 
@@ -258,31 +244,21 @@ export class Modal extends Subscriber(LitElement) {
     Modal.modals.push(this);
     LocationHandler.onChange(this);
     super.connectedCallback();
-    this.handleFullsceen();
   }
+
   disconnectedCallback(): void {
     LocationHandler.offChange(this);
     Modal.modals.splice(Modal.modals.indexOf(this), 1);
+    this.removeEventListener("keydown", this.handleEscape);
     super.disconnectedCallback();
   }
 
-  updated(): void {
-    const currentModal = this as Modal;
-
-    document.addEventListener("keydown", this.handleEscape);
-
-    currentModal.closeBtn.forEach((closeBtn) => {
-      closeBtn.addEventListener(
-        "click",
-        function () {
-          currentModal.hide();
-        },
-        { once: true }
-      );
-    });
+  firstUpdated(): void {
+    this.addEventListener("keydown", this.handleEscape);
   }
 
   willUpdate(_changedProperties: PropertyValues): void {
+    // CLOSE modal on location change
     if (this.closeOnLocationChange && _changedProperties.has("location")) {
       const previousLocation = _changedProperties.get("location");
       if (
@@ -296,104 +272,80 @@ export class Modal extends Subscriber(LitElement) {
       }
     }
 
-    if (_changedProperties.has("fullScreen")) {
-      this.handleFullsceen();
+    super.willUpdate(_changedProperties);
+  }
+
+  protected updated(_changedProperties: PropertyValues): void {
+    const changedToVisible = !_changedProperties.get("visible") && this.visible;
+    const changedToHidden = _changedProperties.get("visible") && !this.visible;
+    if (changedToVisible && this._animationState === "hidden") {
+      this.show();
+    } else if (changedToHidden && this._animationState === "visible") {
+      this.hide();
     }
-    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,
-            },
-          ],
-        };
-      }
+  }
+
+  // SI c'est en modal
+  // handleModalClick(e: MouseEvent): void {
+  //   const isBackdropClick = e.target === e.currentTarget;
+  //   if (
+  //     isBackdropClick &&
+  //     !this.forceAction &&
+  //     this._animationState === "visible"
+  //   ) {
+  //     this.hide();
+  //   }
+  // }
+
+  handleOverlayClick(_e: MouseEvent) {
+    if (!this.forceAction && this._animationState === "visible") {
+      this.hide();
     }
-    super.willUpdate(_changedProperties);
   }
 
   render() {
-    if (this.visible == false) return nothing;
-
     const modalStyles = {
-      padding: this.padding,
       maxWidth: this.maxWidth,
       maxHeight: this.maxHeight,
       width: this.width,
       height: this.height,
       zIndex: this.zIndex,
-      borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+      borderRadius: this.fullScreen ? "0" : "var(--sc_rounded)",
+      pointerEvents: this._animationState === "visible" ? "auto" : "none",
     };
 
-    const modalWrapperStyles = {
-      maxWidth: this.maxWidth,
-      maxHeight: this.maxHeight,
-      width: this.width,
-      height: this.height,
-      borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)",
+    const modalContentStyles = {
+      padding: this.padding,
+    };
+
+    const overlayStyles = {
+      pointerEvents: this._animationState === "visible" ? "auto" : "none",
     };
 
     return html`
       <div
-        class="overlay"
-        @click="${!this.forceAction ? this.hide : null}"
-        ${animate({
-          keyframeOptions: {
-            duration: 500,
-          },
-          in: fadeIn,
-          out: [{ opacity: 0, pointerEvents: "none" }],
-        })}
+        id="backdrop"
+        @click=${this.handleOverlayClick}
+        style=${styleMap(overlayStyles)}
       ></div>
-      <div
-        class="modal-wrapper"
-        style=${styleMap(modalWrapperStyles)}
-        ${animate({
-          out: fadeOut,
-        })}
-        tabindex="0"
+      <dialog
+        id="modal"
+        part="modal"
+        class="custom-scroll"
+        aria-modal="true"
+        style=${styleMap(modalStyles)}
       >
-        <div
-          part="modal"
-          class="modal custom-scroll"
-          style=${styleMap(modalStyles)}
-          ${animate(this.animation)}
-        >
-          <div class="modal-content">
-            ${!this.forceAction
-              ? html`<sonic-modal-close></sonic-modal-close>`
-              : nothing}
-            ${this.modalFragment("title")} ${this.modalFragment("subtitle")}
-            ${this.modalFragment("content")} ${this.modalFragment("actions")}
-
-            <slot></slot>
-          </div>
-        </div>
-      </div>
+        ${this._animationState !== "hidden"
+          ? html`<div id="modal-content" style=${styleMap(modalContentStyles)}>
+              ${!this.forceAction
+                ? html`<sonic-modal-close></sonic-modal-close>`
+                : nothing}
+              ${this.modalFragment("title")} ${this.modalFragment("subtitle")}
+              ${this.modalFragment("content")} ${this.modalFragment("actions")}
+              <slot></slot>
+            </div>`
+          : nothing}
+      </dialog>
     `;
   }
 
@@ -409,7 +361,6 @@ export class Modal extends Subscriber(LitElement) {
     } else {
       output = unsafeHTML(optionValue as string);
     }
-
     switch (optionKey) {
       case "title":
         return html`<sonic-modal-title>${output}</sonic-modal-title>`;
@@ -424,26 +375,32 @@ export class Modal extends Subscriber(LitElement) {
     }
   }
 
-  show(): void {
-    this.visible = true;
-    this.modalElement?.setAttribute("tabindex", "0");
-    this.modalElement?.focus();
-    this.dispatchEvent(new CustomEvent("show"));
+  // Show the modal
+  async show(): Promise<void> {
+    this._modalElement.show();
+    this._animationState = "in";
+    this.animateIn(this._modalElement, this.effect).then(() => {
+      this._animationState = "visible";
+      this.visible = true;
+      this.dispatchEvent(new CustomEvent("show"));
+      this._modalElement.focus();
+    });
   }
 
-  hide(): Promise<void> {
-    return new Promise((resolve) => {
-      this.visible = false;
-      this.modalElement?.setAttribute("tabindex", "-1");
-      this.dispatchEvent(new CustomEvent("hide"));
-
-      if (this.hasAttribute("resetDataProviderOnHide")) {
-        PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set(
-          {}
-        );
-      }
-
-      setTimeout(() => {
+  // Hide the modal
+  async hide(): Promise<void> {
+    this._animationState = "out";
+    this.dispatchEvent(new CustomEvent("hide"));
+    await Promise.all([this.animateOut(this._modalElement, this.effect)]).then(
+      () => {
+        this._modalElement.close();
+        this._animationState = "hidden";
+        this.visible = false;
+        if (this.hasAttribute("resetDataProviderOnHide")) {
+          PublisherManager.get(
+            this.getAttribute("resetDataProviderOnHide")
+          ).set({});
+        }
         if (this.removeHashOnHide) {
           window.history.replaceState({}, "", window.location.pathname);
         }
@@ -451,39 +408,114 @@ export class Modal extends Subscriber(LitElement) {
           this.remove();
         }
         this.dispatchEvent(new CustomEvent("hidden"));
-        resolve();
-      }, 480);
-    });
+      }
+    );
   }
 
+  // Hide and remove the modal
   dispose() {
     this.hide();
     this.remove();
   }
+
+  // Hide and remove all modals
   static disposeAll() {
     Modal.modals.forEach((modal) => {
       modal.dispose();
     });
   }
 
+  // Hide the last visible modal
   handleEscape(e: KeyboardEvent): void {
     if (e.key === "Escape") {
-      Modal.modals.forEach((modal: Modal) => {
-        if (!modal.forceAction) {
-          modal.hide();
-        }
-      });
+      e.preventDefault();
+      const visibleModals = Modal.modals.filter(
+        (modal) => modal._animationState === "visible" && !modal.forceAction
+      );
+      if (visibleModals.length > 0) {
+        const lastVisibleModal = visibleModals[visibleModals.length - 1];
+        lastVisibleModal.hide();
+      }
     }
   }
 
-  handleFullsceen(): void {
-    // set fullscreen
-    if (this.fullScreen) {
-      this.width = "100%";
-      this.height = "100%";
-      this.maxWidth = "none";
-      this.maxHeight = "none";
-    }
+  // ------------------------
+  // ANIMATIONS
+  // ------------------------
+  private animateIn(
+    element: HTMLElement,
+    effect: effectType = "slide"
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      if (!element) return resolve();
+
+      this.style.setProperty("--sc_backdrop-opacity", "0.8");
+      let animation: Animation;
+      if (effect === "slide") {
+        animation = element.animate(
+          [
+            {
+              opacity: 0,
+              transform: "translateY(3.25rem)",
+            },
+            {
+              opacity: 1,
+              transform: "translateY(0)",
+            },
+          ],
+          {
+            duration: this._animationDuration,
+            easing: "cubic-bezier(0.250, 0.250, 0.420, 1.225)",
+            fill: "forwards",
+            delay: 80,
+          }
+        );
+      } else {
+        // fade (ou none)
+        animation = element.animate([{ opacity: 0 }, { opacity: 1 }], {
+          duration: this._animationDuration,
+          fill: "forwards",
+        });
+      }
+      animation.onfinish = () => resolve();
+    });
+  }
+
+  private animateOut(
+    element: HTMLElement,
+    effect: effectType = "slide"
+  ): Promise<void> {
+    return new Promise((resolve) => {
+      if (!element) return resolve();
+      this.style.setProperty("--sc_backdrop-opacity", "0");
+      let animation: Animation;
+      if (effect === "slide") {
+        animation = element.animate(
+          [
+            {
+              opacity: 1,
+              transform: "translateY(0)",
+            },
+            {
+              opacity: 0,
+              transform: "translateY(3.25rem)",
+            },
+          ],
+          {
+            duration: this._animationDuration,
+            easing: "cubic-bezier(0.250, 0.250, 0.420, 1.225)",
+            fill: "forwards",
+          }
+        );
+      } else {
+        // fade (ou none)
+        animation = element.animate([{ opacity: 1 }, { opacity: 0 }], {
+          duration: this._animationDuration,
+          fill: "forwards",
+        });
+      }
+      animation.onfinish = () => resolve();
+    });
   }
 }