@warp-ds/elements 2.1.1 → 2.2.0-next.2

package/dist/packages/modal/index.js

@@ -2297,7 +2297,6 @@ if (!customElements.get("w-icon-close-16")) {
 
 // packages/modal/modal-header.js
 import WarpElement2 from "@warp-ds/elements-core";
-import { createRef, ref } from "lit/directives/ref.js";
 
 // packages/i18n.ts
 var supportedLocales3 = ["en", "nb", "fi", "da", "sv"];
@@ -2354,7 +2353,6 @@ var NO_CLOSE_BUTTON = "no-close";
 var ModalHeader = class extends CanCloseMixin(WarpElement2) {
   constructor() {
     super();
-    __publicField(this, "titleEl", createRef());
     activateI18n3(messages8, messages10, messages9, messages7, messages11);
     this._hasTopContent = false;
   }
@@ -2364,15 +2362,18 @@ var ModalHeader = class extends CanCloseMixin(WarpElement2) {
         <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
         <div class="${this._hasTopContent ? "" : modalElement.headerTitleBar}">
           ${this.backButton}
-          <h1 ${ref(this.titleEl)} class="${this.titleClasses}">${this.title}</h1>
+          <h1 class="title-el ${this.titleClasses}">${this.title}</h1>
           ${this.closeButton}
         </div>
       </div>
     `;
   }
+  get titleEl() {
+    return this.shadowRoot.querySelector(".title-el");
+  }
   async willUpdate(changedProperties) {
     if (changedProperties.has("back")) {
-      const move = new Move(this.titleEl.value);
+      const move = new Move(this.titleEl);
       move.when(async () => {
         await this.updateComplete;
       });
@@ -2431,7 +2432,6 @@ __publicField(ModalHeader, "styles", [WarpElement2.styles]);
 // packages/modal/modal-main.js
 import { css, html as html5 } from "lit";
 import WarpElement3 from "@warp-ds/elements-core";
-import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 
 // node_modules/.pnpm/scroll-doctor@2.0.2/node_modules/scroll-doctor/dist/scroll-doctor.js
 var n = [];
@@ -2497,29 +2497,26 @@ var CONTENT_ID = "content-id";
 var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
   constructor() {
     super();
-    __publicField(this, "dialogEl", createRef2());
-    __publicField(this, "dialogInnerEl", createRef2());
-    __publicField(this, "contentEl", createRef2());
     this.interceptEscape = this.interceptEscape.bind(this);
     this.closeOnBackdropClick = this.closeOnBackdropClick.bind(this);
     this.eventPreventer = this.eventPreventer.bind(this);
     this.modifyBorderRadius = this.modifyBorderRadius.bind(this);
   }
   async open() {
-    this.dialogEl.value.showModal();
+    this.dialogEl.showModal();
     this.handleListeners();
-    E(this.contentEl.value);
+    E(this.contentEl);
     await this.updateComplete;
     this.dispatchEvent(new CustomEvent("shown", { bubbles: true, composed: true }));
   }
   close() {
     this.handleListeners("removeEventListener");
-    this.dialogEl.value.classList.add("close");
-    this.dialogEl.value.addEventListener(
+    this.dialogEl.classList.add("close");
+    this.dialogEl.addEventListener(
       "animationend",
       async () => {
-        this.dialogEl.value.classList.remove("close");
-        this.dialogEl.value.close();
+        this.dialogEl.classList.remove("close");
+        this.dialogEl.close();
         T();
         await this.updateComplete;
         this.dispatchEvent(new CustomEvent("hidden", { bubbles: true, composed: true }));
@@ -2529,10 +2526,10 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
   }
   render() {
     return html5`
-      <dialog ${ref2(this.dialogEl)} class="w-modal ${modalElement.dialogEl}">
-        <div ${ref2(this.dialogInnerEl)} class="${modalElement.dialogInner}">
+      <dialog class="dialog-el w-modal ${modalElement.dialogEl}">
+        <div class="dialog-inner-el ${modalElement.dialogInner}">
           <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
-          <div ${ref2(this.contentEl)} class="${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
+          <div class="content-el ${modalElement.contentSlot}" id=${this[CONTENT_ID]}>
             <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
           </div>
           <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
@@ -2540,15 +2537,24 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
       </dialog>
     `;
   }
-  willUpdate(changedProperties) {
+  get dialogEl() {
+    return this.shadowRoot.querySelector(".dialog-el");
+  }
+  get dialogInnerEl() {
+    return this.shadowRoot.querySelector(".dialog-inner-el");
+  }
+  get contentEl() {
+    return this.shadowRoot.querySelector(".content-el");
+  }
+  updated(changedProperties) {
     if (changedProperties.has("show")) this[this.show ? "open" : "close"]();
   }
   handleListeners(verb = "addEventListener") {
     document[verb]("keydown", this.interceptEscape);
-    if (!this[NO_BACKDROP_CLICKS]) this.dialogEl.value[verb]("mousedown", this.closeOnBackdropClick);
-    this.dialogEl.value[verb]("close", this.eventPreventer);
-    this.dialogEl.value[verb]("cancel", this.eventPreventer);
-    this.dialogInnerEl.value[verb]("transitionend", this.modifyBorderRadius);
+    if (!this[NO_BACKDROP_CLICKS]) this.dialogEl[verb]("mousedown", this.closeOnBackdropClick);
+    this.dialogEl[verb]("close", this.eventPreventer);
+    this.dialogEl[verb]("cancel", this.eventPreventer);
+    this.dialogInnerEl[verb]("transitionend", this.modifyBorderRadius);
   }
   /** @param {Event} evt */
   eventPreventer(evt) {
@@ -2556,7 +2562,7 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
   }
   /** @param {MouseEvent} evt */
   closeOnBackdropClick(evt) {
-    if (this.dialogEl.value === evt.target) this.close();
+    if (this.dialogEl === evt.target) this.close();
   }
   /** @param {KeyboardEvent} evt */
   interceptEscape(evt) {
@@ -2566,8 +2572,8 @@ var ModalMain = class extends ProvidesCanCloseToSlotsMixin(WarpElement3) {
     }
   }
   modifyBorderRadius() {
-    if (this.dialogInnerEl.value.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.value.style.borderRadius = "0px";
-    else this.dialogInnerEl.value.style.borderRadius = null;
+    if (this.dialogInnerEl.scrollHeight * 1.02 > innerHeight) this.dialogInnerEl.style.borderRadius = "0px";
+    else this.dialogInnerEl.style.borderRadius = null;
   }
 };
 __publicField(ModalMain, "properties", {