wj-elements 0.1.127 → 0.1.129

package/dist/wje-sliding-container.js

@@ -1,11 +1,8 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "\n:host \n    {\n        display: block;\n        /* make css property for width height position  and if it is on top lef bottom right  */\n    }\n\n.sliding-container-wrapper{\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n    overflow: auto;\n}\n\n";
+const styles = ":host {\n    display: block;\n    z-index: 1000;\n    /* make css property for width height position  and if it is on top lef bottom right  */\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n    overflow: auto;\n}";
 class SlidingContainer extends WJElement {
   /**
    * Creates an instance of SlidingContainer.
@@ -21,16 +18,37 @@ class SlidingContainer extends WJElement {
      * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.
      * @param {Event} e - The event object.
      */
-    __publicField(this, "triggerEvent", (e) => {
+    __publicField(this, "triggerEvent", async (e) => {
       if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {
-        this.open(e);
+        await this.open(e);
       } else {
-        this.toggle(e);
+        await this.toggle(e);
       }
       this._lastCaller = e.composedPath()[0];
     });
     this._isOpen = false;
     this._lastCaller = null;
+    this._resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        if (entry.contentBoxSize) {
+          if (this.drawingStatus < 3) return;
+          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
+            if (this.variant !== "over") {
+              this.variant = "over";
+            } else {
+              this.checkForVariant(this.variant);
+            }
+          } else {
+            if (this.variant !== "in-place") {
+              this.variant = "in-place";
+            } else {
+              this.checkForVariant(this.variant);
+            }
+          }
+        }
+      }
+    });
+    this._resizeObserver.observe(document.documentElement);
   }
   set maxWidth(value) {
     this.setAttribute("max-width", value);
@@ -140,16 +158,27 @@ class SlidingContainer extends WJElement {
     let fragment = document.createDocumentFragment();
     this.style.position = "relative";
     this.style.height = "100%";
+    this.style.right = "unset";
+    this.style.left = "unset";
     this.wrapperDiv = document.createElement("div");
     this.wrapperDiv.classList.add("sliding-container-wrapper");
     this.transparentDiv = document.createElement("div");
     this.transparentDiv.classList.add("sliding-container-transparent");
+    if (this._isOpen) {
+      this.transparentDiv.style.width = this.maxWidth;
+    }
     let native = document.createElement("div");
     native.style.position = "absolute";
     native.style.width = 0;
     if (this.hasOpacity) {
       native.style.opacity = 0;
     }
+    if (this._isOpen) {
+      native.style.width = this.maxWidth;
+      if (this.hasOpacity) {
+        native.style.opacity = 1;
+      }
+    }
     native.style.height = "100%";
     native.classList.add("native-sliding-container");
     native.setAttribute("part", "sliding-container");
@@ -197,6 +226,9 @@ class SlidingContainer extends WJElement {
    * Executes before drawing the element.
    */
   beforeDraw() {
+    var _a, _b;
+    (_a = this.animation) == null ? void 0 : _a.cancel();
+    (_b = this.nativeAnimation) == null ? void 0 : _b.cancel();
     document.removeEventListener(this.trigger, this.triggerEvent);
   }
   /**
@@ -206,9 +238,9 @@ class SlidingContainer extends WJElement {
    * Calls the checkForVariant method with the current variant.
    * @returns {Promise<void>} A promise that resolves after the actions are completed.
    */
-  async afterDraw() {
+  afterDraw() {
     document.addEventListener(this.trigger, this.triggerEvent);
-    if (this.screenBreakPoint && window.innerWidth < this.screenBreakPoint) {
+    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
       this.variant = "over";
     }
     this.checkForVariant(this.variant);
@@ -226,7 +258,6 @@ class SlidingContainer extends WJElement {
    * @param {string} variant - The variant to check for.
    */
   checkForVariant(variant) {
-    var _a, _b;
     if (variant === "over") {
       this.style.position = "fixed";
       let computentStyleOfParent = window.getComputedStyle(
@@ -236,23 +267,26 @@ class SlidingContainer extends WJElement {
       let heightOfParrentElement = parseFloat(
         computentStyleOfParent.height
       );
-      let widthOfParrentElement = parseFloat(
-        computentStyleOfParent.width
-      );
       let topOfParrentElement = parseFloat(computentStyleOfParent.top);
       this.style.height = heightOfParrentElement + +this.addToHeight + "px";
       this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + "px";
       this.style.top = topOfParrentElement + "px";
-      let isFirstChildInContainer = this.getParentElement().firstElementChild === this || ((_a = this.getParentElement().shadowRoot) == null ? void 0 : _a.firstElementChild) === this;
-      let isLastChildInContainer = this.getParentElement().lastElementChild === this || ((_b = this.getParentElement().shadowRoot) == null ? void 0 : _b.lastElementChild) === this;
-      if (isFirstChildInContainer) {
-        if (this.direction === "right") {
+      const leftSibling = this.previousElementSibling;
+      const rightSibling = this.nextElementSibling;
+      const leftSiblingBoundingbox = leftSibling == null ? void 0 : leftSibling.getBoundingClientRect();
+      const rightSiblingBoundingbox = rightSibling == null ? void 0 : rightSibling.getBoundingClientRect();
+      if (this.direction === "right") {
+        if (leftSiblingBoundingbox) {
+          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + "px";
+        } else {
           this.style.left = parentElementBoundingbox.left + "px";
+        }
+      } else {
+        if (rightSiblingBoundingbox) {
+          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + "px";
         } else {
-          this.style.right = window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + widthOfParrentElement + "px";
+          this.style.right = window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + "px";
         }
-      } else if (isLastChildInContainer) {
-        this.style.right = window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + "px";
       }
     }
   }
@@ -278,55 +312,92 @@ class SlidingContainer extends WJElement {
   }
   /**
    * Animates the transition of the element's width from 0 to the maximum width or vice versa.
-   * @returns {Promise<void>} A promise that resolves when the animation finishes.
+   * @returns {Promise<void>} A promise that resolves when the animation is complete.
    */
   doAnimateTransition() {
+    var _a, _b, _c, _d;
     const options = {
       delay: 0,
       endDelay: 0,
-      fill: "both",
+      fill: "forwards",
       duration: +this.animationDuration,
       iterationStart: 0,
       iterations: 1,
       direction: "normal",
       easing: this.animationEasing
     };
+    if (this.animation && ((_b = (_a = this.animation) == null ? void 0 : _a.effect) == null ? void 0 : _b.target) !== this.transparentDiv) {
+      this.animation.cancel();
+      this.animation = null;
+    }
+    if (this.nativeAnimation && ((_d = (_c = this.nativeAnimation) == null ? void 0 : _c.effect) == null ? void 0 : _d.target) !== this.nativeElement) {
+      this.nativeAnimation.cancel();
+      this.nativeAnimation = null;
+    }
     if (!this._isOpen) {
-      if (this.animation) {
+      if (this.animation && this.nativeAnimation) {
         this.animation.reverse();
         this.nativeAnimation.reverse();
-        return;
+      } else {
+        this.animation = this.transparentDiv.animate(
+          [
+            {
+              width: 0
+            },
+            {
+              width: this.maxWidth
+            }
+          ],
+          options
+        );
+        this.nativeAnimation = this.nativeElement.animate(
+          [
+            {
+              ...this.hasOpacity ? { opacity: 0 } : {},
+              width: 0
+            },
+            {
+              ...this.hasOpacity ? { opacity: 1 } : {},
+              width: this.maxWidth
+            }
+          ],
+          options
+        );
       }
-      this.animation = this.transparentDiv.animate(
-        [
-          {
-            width: 0
-          },
-          {
-            width: this.maxWidth
-          }
-        ],
-        options
-      );
-      this.nativeAnimation = this.nativeElement.animate(
-        [
-          {
-            ...this.hasOpacity ? { opacity: 0 } : {},
-            width: 0
-          },
-          {
-            ...this.hasOpacity ? { opacity: 1 } : {},
-            width: this.maxWidth
-          }
-        ],
-        options
-      );
     } else {
-      this.animation.reverse();
-      this.nativeAnimation.reverse();
+      if (this.animation && this.nativeAnimation) {
+        this.animation.reverse();
+        this.nativeAnimation.reverse();
+      } else {
+        this.animation = this.transparentDiv.animate(
+          [
+            {
+              width: this.maxWidth
+            },
+            {
+              width: 0
+            }
+          ],
+          options
+        );
+        this.nativeAnimation = this.nativeElement.animate(
+          [
+            {
+              ...this.hasOpacity ? { opacity: 1 } : {},
+              width: this.maxWidth
+            },
+            {
+              ...this.hasOpacity ? { opacity: 0 } : {},
+              width: 0
+            }
+          ],
+          options
+        );
+      }
     }
     return new Promise((resolve, reject) => {
       this.animation.onfinish = () => {
+        this._isOpen = !this._isOpen;
         resolve();
       };
     });
@@ -346,7 +417,6 @@ class SlidingContainer extends WJElement {
         );
         await this.doAnimateTransition();
         await Promise.resolve(this.afterOpen(event)).then(() => {
-          this._isOpen = true;
           this.dispatchEvent(
             new CustomEvent("wje-sliding-container:open", {
               bubbles: true,
@@ -378,7 +448,6 @@ class SlidingContainer extends WJElement {
               child.remove();
             });
           }
-          this._isOpen = false;
           this.dispatchEvent(
             new CustomEvent("wje-sliding-container:close", {
               bubbles: true,
@@ -401,6 +470,10 @@ class SlidingContainer extends WJElement {
       await this.open(event);
     }
   }
+  componentCleanup() {
+    this._resizeObserver.disconnect();
+    this._resizeObserver = null;
+  }
 }
 SlidingContainer.define("wje-sliding-container", SlidingContainer);
 export {

package/dist/wje-split-view.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 function drag(container, options) {
   function move(pointerEvent) {
@@ -47,7 +44,7 @@ class SplitView extends WJElement {
      */
     __publicField(this, "handleDrag", (e) => {
       if (this.hasAttribute("disabled"))
-        return false;
+        return;
       drag(this, {
         onMove: (x, y) => {
           let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
@@ -60,6 +57,12 @@ class SplitView extends WJElement {
       });
     });
   }
+  set initial(value) {
+    this.setAttribute("initial", value);
+  }
+  get initial() {
+    return +this.getAttribute("initial") || 50;
+  }
   /**
    * Returns the CSS styles for the component.
    *
@@ -92,7 +95,7 @@ class SplitView extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-split-view");
@@ -133,7 +136,9 @@ class SplitView extends WJElement {
    */
   detectSize() {
     const { width, height } = this.getBoundingClientRect();
+    console.log(this, this.getBoundingClientRect());
     this.size = this.hasAttribute("vertical") ? height : width;
+    console.log("detectSize:", this.hasAttribute("vertical"), this.size);
   }
   /**
    * Converts pixels to a percentage.

package/dist/wje-status.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = '/*\n[ WJ Status ]\n*/\n\n.native-status {\n  display: flex;\n  align-items: center;\n}\n\n.bullet {\n  width: var(--wje-status-size);\n  height: var(--wje-status-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-width: 1px;\n  border-style: solid;\n  border-color: transparent;\n  border-radius: var(--wje-border-radius-circle);\n}\n\n:host ::slotted([slot="start"]) {\n  margin-right: var(--wje-spacing-x-small);\n}\n\n:host ::slotted([slot="end"]) {\n  margin-left: var(--wje-spacing-x-small);\n}\n\n/* Size */\n:host([size=small]) {\n  --wje-status-size: var(--wje-size-small);\n}\n\n:host([size=medium]) {\n  --wje-status-size: var(--wje-size);\n}\n\n:host([size=large]) {\n  --wje-status-size: var(--wje-size-large);\n}\n\n/* Color */\n:host([color=primary]) .bullet {\n  background-color: var(--wje-color-primary-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=complete]) .bullet {\n  background-color: var(--wje-color-complete-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=success]) .bullet {\n  background-color: var(--wje-color-success-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=warning]) .bullet{\n  background-color: var(--wje-color-warning-9);\n  color: var(--wje-color-contrast-11);\n}\n\n:host([color=danger]) .bullet {\n  background-color: var(--wje-color-danger-9);\n  color: var(--wje-color-contrast-0);\n}\n\n:host([color=contrast]) .bullet {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-contrast-11);\n}\n\n:host([color=contrast-reverse]) .bullet {\n  background-color: var(--wje-color-contrast-11);\n  color: var(--wje-color-contrast-0);\n}\n\n/* Border */\n:host([border=primary]) .bullet {\n  border-color: var(--wje-color-primary-9);\n}\n\n:host([border=complete]) .bullet {\n  border-color: var(--wje-color-complete-9);\n}\n\n:host([border=success]) .bullet {\n  border-color: var(--wje-color-success-9);\n}\n\n:host([border=warning]) .bullet {\n  border-color: var(--wje-color-warning-9);\n}\n\n:host([border=danger]) .bullet {\n  border-color: var(--wje-color-danger-9);\n}\n\n:host([border=contrast]) .bullet {\n  border-color: var(--wje-color-contrast-2);\n}\n\n:host([border=contrast-reverse]) .bullet {\n  border-color: var(--wje-color-contrast-11);\n}';
 class Status extends WJElement {
@@ -40,7 +37,7 @@ class Status extends WJElement {
    * @param {Object} params - The parameters
    * @returns {Object} fragment - The document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");

package/dist/wje-step.js

@@ -1,9 +1,6 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "";
 class Step extends WJElement {