@supersoniks/concorde 3.1.15 → 3.1.16

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

@@ -1,22 +1,27 @@
-import {animate, fadeIn, fadeOut} from "@lit-labs/motion";
-import {customScroll} from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { animate, fadeIn, fadeOut } 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} from "lit/decorators.js";
-import {styleMap} from "lit/directives/style-map.js";
+import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+} from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import "@supersoniks/concorde/core/components/ui/modal/modal-actions";
 import "@supersoniks/concorde/core/components/ui/modal/modal-close";
 import "@supersoniks/concorde/core/components/ui/modal/modal-content";
 import "@supersoniks/concorde/core/components/ui/modal/modal-subtitle";
 import "@supersoniks/concorde/core/components/ui/modal/modal-title";
-import {PublisherManager} from "@supersoniks/concorde/utils";
-import {ConcordeWindow} from "@supersoniks/concorde/core/_types/types";
-import {Theme} from "@supersoniks/concorde/core/components/ui/theme/theme";
-import {PrimitiveType} from "@supersoniks/concorde/core/_types/types";
-import {DirectiveResult} from "lit/directive.js";
+import { PublisherManager } from "@supersoniks/concorde/utils";
+import { ConcordeWindow } from "@supersoniks/concorde/core/_types/types";
+import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
+import { PrimitiveType } from "@supersoniks/concorde/core/_types/types";
+import { DirectiveResult } from "lit/directive.js";
 
-import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 declare const window: ConcordeWindow;
 declare type ModalCreateOptions = {
@@ -97,14 +102,17 @@ export class Modal extends Subscriber(LitElement) {
         position: fixed;
       }
 
-      ::slotted(sonic-modal-title) {
+      ::slotted(sonic-modal-title),
+      sonic-modal-title {
         margin-bottom: 1.25rem;
       }
-      :host([align="left"]) ::slotted(sonic-modal-title) {
+      :host([align="left"]) ::slotted(sonic-modal-title),
+      :host([align="left"]) sonic-modal-title {
         padding-right: 1em;
       }
 
-      ::slotted(sonic-modal-subtitle) {
+      ::slotted(sonic-modal-subtitle),
+      sonic-modal-subtitle {
         margin-top: -0.9rem;
         margin-bottom: 1.25rem;
       }
@@ -158,33 +166,38 @@ 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;
-  @property({type: String, reflect: true}) align: "center" | "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}) width = "100%";
-  @property({type: String}) height = "auto";
-  @property({type: String}) zIndex = "var(--sc-modal-z-index)";
-  @property({type: Object}) options?: ModalCreateOptions;
-  @property({type: Boolean, reflect: true}) fullScreen = false;
-  @property({type: Boolean, reflect: true}) visible = false;
+  @property({ type: Boolean }) forceAction = false;
+  @property({ type: Boolean }) removeOnHide = false;
+  @property({ type: Boolean }) removeHashOnHide = false;
+  @property({ type: String, reflect: true }) align:
+    | "center"
+    | "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 }) width = "100%";
+  @property({ type: String }) height = "auto";
+  @property({ type: String }) zIndex = "var(--sc-modal-z-index)";
+  @property({ type: Object }) options?: ModalCreateOptions;
+  @property({ type: Boolean, reflect: true }) fullScreen = false;
+  @property({ type: Boolean, reflect: true }) visible = false;
 
   @query(".modal-wrapper") modalWrapper!: HTMLDivElement;
   @query(".modal") modalElement!: HTMLDivElement;
 
-  @queryAssignedElements({selector: "sonic-modal-close"})
+  @queryAssignedElements({ selector: "sonic-modal-close" })
   closeBtn!: Array<HTMLElement>;
   static create(options: ModalCreateOptions): Modal {
     const modal = document.createElement(tagName) as Modal;
     // modal styles
     modal.options = options;
 
-    if (options.removeHashOnHide === true) modal.setAttribute("removeHashOnHide", "true");
-    if (options.removeOnHide === true) modal.setAttribute("removeOnHide", "true");
+    if (options.removeHashOnHide === true)
+      modal.setAttribute("removeHashOnHide", "true");
+    if (options.removeOnHide === true)
+      modal.setAttribute("removeOnHide", "true");
 
     if (options.maxWidth) modal.maxWidth = options?.maxWidth;
     if (options.width) modal.width = options?.width;
@@ -192,9 +205,12 @@ export class Modal extends Subscriber(LitElement) {
     if (options.height) modal.height = options?.height;
     if (options.forceAction) modal.forceAction = true;
 
-    if (options.paddingX) modal.style.setProperty("--sc-modal-px", options?.paddingX);
-    if (options.paddingY) modal.style.setProperty("--sc-modal-py", options?.paddingY);
-    if (options.zIndex) modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
+    if (options.paddingX)
+      modal.style.setProperty("--sc-modal-px", options?.paddingX);
+    if (options.paddingY)
+      modal.style.setProperty("--sc-modal-py", options?.paddingY);
+    if (options.zIndex)
+      modal.style.setProperty("--sc-modal-z-index", options?.zIndex);
 
     const container = Theme.getPopContainer();
     container.appendChild(modal);
@@ -223,7 +239,7 @@ export class Modal extends Subscriber(LitElement) {
         function () {
           currentModal.hide();
         },
-        {once: true}
+        { once: true }
       );
     });
   }
@@ -273,13 +289,28 @@ export class Modal extends Subscriber(LitElement) {
               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}],
+            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,
+              },
+            ],
           })}
         >
           <div class="modal-content">
-            ${!this.options?.forceAction ? html`<sonic-modal-close></sonic-modal-close>` : nothing} ${this.modalFragment("title")}
-            ${this.modalFragment("subtitle")} ${this.modalFragment("content")} ${this.modalFragment("actions")}
+            ${!this.options?.forceAction
+              ? html`<sonic-modal-close></sonic-modal-close>`
+              : nothing}
+            ${this.modalFragment("title")} ${this.modalFragment("subtitle")}
+            ${this.modalFragment("content")} ${this.modalFragment("actions")}
 
             <slot></slot>
           </div>
@@ -293,7 +324,7 @@ export class Modal extends Subscriber(LitElement) {
             duration: 500,
           },
           in: fadeIn,
-          out: [{opacity: 0, pointerEvents: "none"}],
+          out: [{ opacity: 0, pointerEvents: "none" }],
         })}
       ></div>`;
   }
@@ -337,7 +368,9 @@ export class Modal extends Subscriber(LitElement) {
     this.modalElement?.setAttribute("tabindex", "-1");
     this.dispatchEvent(new CustomEvent("hide"));
     if (this.hasAttribute("resetDataProviderOnHide")) {
-      PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
+      PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set(
+        {}
+      );
     }
     if (this.removeOnHide) {
       this.remove();

package/vite/config.js

@@ -164,6 +164,7 @@ const scopeComponents = (prefix, filesFilter) => {
     resolveId(source) {
       const source0 = source;
       if (shortPathMapping[source]) {
+        console.log("shortPathMapping", shortPathMapping[source]);
         return shortPathMapping[source][0];
       }
       /** old way */
@@ -200,6 +201,8 @@ const scopeComponents = (prefix, filesFilter) => {
         source.replace("@supersoniks/concorde", __dirname + "/../src") +
           extension
       );
+      // console.log("longPathMapping", result);
+
       return result;
       // return resolveURI(source0);
     },