wj-elements 0.1.136 → 0.1.137

package/dist/wje-sliding-container.js

@@ -0,0 +1,474 @@
+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);
+import WJElement from "./wje-element.js";
+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}\n";
+class SlidingContainer extends WJElement {
+  /**
+   * Creates an instance of SlidingContainer.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "SlidingContainer");
+    /**
+     * Triggers the event based on the target element.
+     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.
+     * 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", async (e) => {
+      if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {
+        await this.open(e);
+      } else {
+        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);
+  }
+  get maxWidth() {
+    return this.getAttribute("max-width") ?? "auto";
+  }
+  set maxHeight(value) {
+    this.setAttribute("max-height", value);
+  }
+  get maxHeight() {
+    return this.getAttribute("max-height") ?? "auto";
+  }
+  set trigger(value) {
+    this.setAttribute("trigger", value);
+  }
+  get trigger() {
+    return this.getAttribute("trigger") ?? "sliding-container";
+  }
+  set direction(value) {
+    this.setAttribute("direction", value);
+  }
+  get direction() {
+    return this.getAttribute("direction") ?? "right";
+  }
+  set removeChildAfterClose(value) {
+    this.setAttribute("remove-child-after-close", value);
+  }
+  get removeChildAfterClose() {
+    return this.hasAttribute("remove-child-after-close") ?? false;
+  }
+  set variant(value) {
+    this.setAttribute("variant", value);
+  }
+  get variant() {
+    return this.getAttribute("variant") ?? "in-place";
+  }
+  get screenBreakPoint() {
+    return this.getAttribute("screen-break-point");
+  }
+  set screenBreakPoint(value) {
+    this.setAttribute("screen-break-point", value);
+  }
+  get animationDuration() {
+    return this.getAttribute("animation-duration") ?? "500";
+  }
+  set animationDuration(value) {
+    this.setAttribute("animation-duration", value);
+  }
+  get animationEasing() {
+    return this.getAttribute("animation-easing") ?? "linear";
+  }
+  set animationEasing(value) {
+    this.setAttribute("animation-easing", value);
+  }
+  get hasOpacity() {
+    return this.hasAttribute("has-opacity") ?? false;
+  }
+  get addToHeight() {
+    return this.getAttribute("add-to-height") ?? "0";
+  }
+  set addToHeight(value) {
+    this.setAttribute("add-to-height", value);
+  }
+  /**
+   * Returns the observed attributes for the component.
+   * @returns {string[]}
+   */
+  static get observedAttributes() {
+    return [
+      "max-width",
+      "max-height",
+      "trigger",
+      "direction",
+      "variant",
+      "screen-break-point",
+      "remove-child-after-close",
+      "animation-duration",
+      "animation-easing",
+      "has-opacity"
+    ];
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   * @param {object} context The context for drawing.
+   * @param {object} store The store for drawing.
+   * @param {object} params The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(context, store, params) {
+    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");
+    if (this.direction === "right") {
+      native.style.right = 0;
+    } else {
+      native.style.left = 0;
+    }
+    let slot = document.createElement("slot");
+    const nativeInner = document.createElement("div");
+    nativeInner.classList.add("native-sliding-container-inner");
+    nativeInner.style.height = "100%";
+    nativeInner.style.position = "absolute";
+    nativeInner.style.width = this.maxWidth;
+    nativeInner.appendChild(slot);
+    nativeInner.appendChild(this.getCloseButton());
+    native.appendChild(nativeInner);
+    this.wrapperDiv.appendChild(this.transparentDiv);
+    this.wrapperDiv.appendChild(native);
+    fragment.appendChild(this.wrapperDiv);
+    this.nativeElement = native;
+    return fragment;
+  }
+  /**
+   * Creates and returns a close button element.
+   * @returns {HTMLElement} The close button element.
+   */
+  getCloseButton() {
+    let closeButton = document.createElement("wje-button");
+    closeButton.setAttribute("part", "close-button");
+    closeButton.style.position = "absolute";
+    closeButton.style.top = "0";
+    closeButton.style.right = "0";
+    closeButton.style.zIndex = "1000";
+    let icon = document.createElement("wje-icon");
+    icon.setAttribute("slot", "icon-only");
+    icon.setAttribute("name", "x");
+    closeButton.appendChild(icon);
+    closeButton.addEventListener("click", () => {
+      this.close();
+    });
+    return closeButton;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Performs actions after the element is drawn on the screen.
+   * Attaches an event listener to the document based on the specified trigger.
+   * Sets the variant to "over" if the document width is smaller than the screen break point.
+   * Calls the checkForVariant method with the current variant.
+   * @returns {Promise<void>} A promise that resolves after the actions are completed.
+   */
+  afterDraw() {
+    document.addEventListener(this.trigger, this.triggerEvent);
+    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
+      this.variant = "over";
+    }
+    this.checkForVariant(this.variant);
+  }
+  getParentElement() {
+    let parentElement = this.parentElement;
+    if (!parentElement) {
+      parentElement = this.getRootNode().host;
+    }
+    return parentElement;
+  }
+  /**
+   * Checks for a specific variant and applies corresponding styles.
+   * @param {string} variant The variant to check for.
+   */
+  checkForVariant(variant) {
+    if (variant === "over") {
+      this.style.position = "fixed";
+      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());
+      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();
+      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);
+      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";
+      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) + "px";
+        }
+      }
+    }
+  }
+  /**
+   * Executes before the element is opened.
+   */
+  beforeOpen(event) {
+  }
+  /**
+   * Callback function called after the element is opened.
+   */
+  afterOpen(event) {
+  }
+  /**
+   * Executes before closing the element.
+   */
+  beforeClose(event) {
+  }
+  /**
+   * Callback function that is called after the container is closed.
+   */
+  afterClose(event) {
+  }
+  /**
+   * 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 is complete.
+   */
+  doAnimateTransition() {
+    var _a, _b, _c, _d;
+    const options = {
+      delay: 0,
+      endDelay: 0,
+      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 && this.nativeAnimation) {
+        this.animation.reverse();
+        this.nativeAnimation.reverse();
+      } 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
+        );
+      }
+    } else {
+      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();
+      };
+    });
+  }
+  /**
+   * Opens the container with an animation.
+   * @returns {Promise<void>} A promise that resolves when the container is opened.
+   */
+  async open(event) {
+    await Promise.resolve(this.beforeOpen(event)).then(async () => {
+      if (!this._isOpen) {
+        this.dispatchEvent(
+          new CustomEvent("wje-sliding-container:beforeOpen", {
+            bubbles: true,
+            composed: true
+          })
+        );
+        await this.doAnimateTransition();
+        await Promise.resolve(this.afterOpen(event)).then(() => {
+          this.dispatchEvent(
+            new CustomEvent("wje-sliding-container:open", {
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+      }
+    });
+  }
+  /**
+   * Closes the animation container.
+   * @returns {Promise<void>} A promise that resolves when the container is closed.
+   */
+  async close(event) {
+    await Promise.resolve(this.beforeClose(event)).then(async () => {
+      if (this._isOpen) {
+        this.dispatchEvent(
+          new CustomEvent("wje-sliding-container:beforeClose", {
+            bubbles: true,
+            composed: true
+          })
+        );
+        await this.doAnimateTransition();
+        await Promise.resolve(this.afterClose(event)).then(() => {
+          if (this.removeChildAfterClose) {
+            this.childNodes.forEach((child) => {
+              child.remove();
+            });
+          }
+          this.dispatchEvent(
+            new CustomEvent("wje-sliding-container:close", {
+              bubbles: true,
+              composed: true
+            })
+          );
+        });
+      }
+    });
+  }
+  /**
+   * Toggles the state of the element.
+   * If the element is open, it will be closed. If it is closed, it will be opened.
+   * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.
+   */
+  async toggle(event) {
+    if (this._isOpen) {
+      await this.close(event);
+    } else {
+      await this.open(event);
+    }
+  }
+  componentCleanup() {
+    var _a;
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    this._resizeObserver = null;
+  }
+}
+SlidingContainer.define("wje-sliding-container", SlidingContainer);
+export {
+  SlidingContainer as default
+};
+//# sourceMappingURL=wje-sliding-container.js.map

package/dist/wje-sliding-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-sliding-container.js","sources":["../experimental-packages/wje-sliding-container/sliding-container.element.js","../experimental-packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement } from '../../packages/wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - The direction of the SlidingContainer.\n * @property {string} variant - The variant of the SlidingContainer.\n * @property {string} screenBreakPoint - The screen break point of the SlidingContainer.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - The duration of the animation.\n * @property {string} animationEasing - The easing of the animation.\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n  /**\n   * Creates an instance of SlidingContainer.\n   * @class\n   */\n  constructor() {\n    super();\n\n    this._isOpen = false;\n    this._lastCaller = null;\n\n    this._resizeObserver = new ResizeObserver((entries) => {\n      for (let entry of entries) {\n        if (entry.contentBoxSize) {\n          if (this.drawingStatus < 3) return;\n\n          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            if (this.variant !== 'over') {\n              this.variant = 'over';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          } else {\n            if (this.variant !== 'in-place') {\n              this.variant = 'in-place';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          }\n        }\n      }\n    });\n\n    this._resizeObserver.observe(document.documentElement);\n  }\n\n  set maxWidth(value) {\n    this.setAttribute('max-width', value);\n  }\n\n  get maxWidth() {\n    return this.getAttribute('max-width') ?? 'auto';\n  }\n\n  set maxHeight(value) {\n    this.setAttribute('max-height', value);\n  }\n\n  get maxHeight() {\n    return this.getAttribute('max-height') ?? 'auto';\n  }\n\n  set trigger(value) {\n    this.setAttribute('trigger', value);\n  }\n\n  get trigger() {\n    return this.getAttribute('trigger') ?? 'sliding-container';\n  }\n\n  set direction(value) {\n    this.setAttribute('direction', value);\n  }\n\n  get direction() {\n    return this.getAttribute('direction') ?? 'right';\n  }\n\n  set removeChildAfterClose(value) {\n    this.setAttribute('remove-child-after-close', value);\n  }\n\n  get removeChildAfterClose() {\n    return this.hasAttribute('remove-child-after-close') ?? false;\n  }\n\n  set variant(value) {\n    this.setAttribute('variant', value);\n  }\n\n  get variant() {\n    return this.getAttribute('variant') ?? 'in-place';\n  }\n\n  get screenBreakPoint() {\n    return this.getAttribute('screen-break-point');\n  }\n\n  set screenBreakPoint(value) {\n    this.setAttribute('screen-break-point', value);\n  }\n\n  get animationDuration() {\n    return this.getAttribute('animation-duration') ?? '500';\n  }\n\n  set animationDuration(value) {\n    this.setAttribute('animation-duration', value);\n  }\n\n  get animationEasing() {\n    return this.getAttribute('animation-easing') ?? 'linear';\n  }\n\n  set animationEasing(value) {\n    this.setAttribute('animation-easing', value);\n  }\n\n  get hasOpacity() {\n    return this.hasAttribute('has-opacity') ?? false;\n  }\n\n  get addToHeight() {\n    return this.getAttribute('add-to-height') ?? '0';\n  }\n\n  set addToHeight(value) {\n    this.setAttribute('add-to-height', value);\n  }\n\n  className = 'SlidingContainer';\n\n  /**\n   * Returns the observed attributes for the component.\n   * @returns {string[]}\n   */\n  static get observedAttributes() {\n    return [\n      'max-width',\n      'max-height',\n      'trigger',\n      'direction',\n      'variant',\n      'screen-break-point',\n      'remove-child-after-close',\n      'animation-duration',\n      'animation-easing',\n      'has-opacity',\n    ];\n  }\n\n  /**\n   * Returns the CSS styles for the component.\n   * @static\n   * @returns {CSSStyleSheet}\n   */\n  static get cssStyleSheet() {\n    return styles;\n  }\n\n  /**\n   * Sets up the attributes for the component.\n   */\n  setupAttributes() {\n    this.isShadowRoot = 'open';\n  }\n\n  /**\n   * Draws the component.\n   * @param {object} context The context for drawing.\n   * @param {object} store The store for drawing.\n   * @param {object} params The parameters for drawing.\n   * @returns {DocumentFragment}\n   */\n  draw(context, store, params) {\n    let fragment = document.createDocumentFragment();\n\n    this.style.position = 'relative';\n    this.style.height = '100%';\n    this.style.right = 'unset';\n    this.style.left = 'unset';\n\n    this.wrapperDiv = document.createElement('div');\n    this.wrapperDiv.classList.add('sliding-container-wrapper');\n\n    this.transparentDiv = document.createElement('div');\n    this.transparentDiv.classList.add('sliding-container-transparent');\n    if (this._isOpen) {\n      this.transparentDiv.style.width = this.maxWidth;\n    }\n\n    let native = document.createElement('div');\n    native.style.position = 'absolute';\n    native.style.width = 0;\n    if (this.hasOpacity) {\n      native.style.opacity = 0;\n    }\n\n    if (this._isOpen) {\n      native.style.width = this.maxWidth;\n      if (this.hasOpacity) {\n        native.style.opacity = 1;\n      }\n    }\n\n    native.style.height = '100%';\n\n    native.classList.add('native-sliding-container');\n    native.setAttribute('part', 'sliding-container');\n\n    if (this.direction === 'right') {\n      native.style.right = 0;\n    } else {\n      native.style.left = 0;\n    }\n\n    let slot = document.createElement('slot');\n\n    const nativeInner = document.createElement('div');\n    nativeInner.classList.add('native-sliding-container-inner');\n    nativeInner.style.height = '100%';\n    nativeInner.style.position = 'absolute';\n    nativeInner.style.width = this.maxWidth;\n\n    nativeInner.appendChild(slot);\n    nativeInner.appendChild(this.getCloseButton());\n\n    native.appendChild(nativeInner);\n    this.wrapperDiv.appendChild(this.transparentDiv);\n    this.wrapperDiv.appendChild(native);\n    fragment.appendChild(this.wrapperDiv);\n\n    this.nativeElement = native;\n\n    return fragment;\n  }\n\n  /**\n   * Creates and returns a close button element.\n   * @returns {HTMLElement} The close button element.\n   */\n  getCloseButton() {\n    let closeButton = document.createElement('wje-button');\n    closeButton.setAttribute('part', 'close-button');\n    closeButton.style.position = 'absolute';\n    closeButton.style.top = '0';\n    closeButton.style.right = '0';\n    closeButton.style.zIndex = '1000';\n\n    let icon = document.createElement('wje-icon');\n    icon.setAttribute('slot', 'icon-only');\n    icon.setAttribute('name', 'x');\n    closeButton.appendChild(icon);\n\n    closeButton.addEventListener('click', () => {\n      this.close();\n    });\n\n    return closeButton;\n  }\n\n  /**\n   * Executes before drawing the element.\n   */\n  beforeDraw() {\n    this.animation?.cancel();\n    this.nativeAnimation?.cancel();\n    document.removeEventListener(this.trigger, this.triggerEvent);\n  }\n\n  /**\n   * Performs actions after the element is drawn on the screen.\n   * Attaches an event listener to the document based on the specified trigger.\n   * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n   * Calls the checkForVariant method with the current variant.\n   * @returns {Promise<void>} A promise that resolves after the actions are completed.\n   */\n  afterDraw() {\n    document.addEventListener(this.trigger, this.triggerEvent);\n\n    // if document width is on small screen set variant to over\n    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n      this.variant = 'over';\n    }\n\n    this.checkForVariant(this.variant);\n  }\n\n  getParentElement() {\n    let parentElement = this.parentElement;\n\n    if (!parentElement) {\n      parentElement = this.getRootNode().host;\n    }\n\n    return parentElement;\n  }\n\n  /**\n   * Checks for a specific variant and applies corresponding styles.\n   * @param {string} variant The variant to check for.\n   */\n  checkForVariant(variant) {\n    if (variant === 'over') {\n      this.style.position = 'fixed';\n      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n      let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n      this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.style.top = topOfParrentElement + 'px';\n\n      const leftSibling = this.previousElementSibling;\n      const rightSibling = this.nextElementSibling;\n      const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n      const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n      if (this.direction === 'right') {\n        // attach to left sibling\n        if (leftSiblingBoundingbox) {\n          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n        } else {\n          this.style.left = parentElementBoundingbox.left + 'px';\n        }\n      } else {\n        // attach to right sibling\n        if (rightSiblingBoundingbox) {\n          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n        } else {\n          this.style.right =\n            window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the event based on the target element.\n   * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n   * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n   * @param {Event} e The event object.\n   */\n  triggerEvent = async (e) => {\n    if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n      // same oppener event but different caller so just refresh inner content\n      await this.open(e);\n    } else {\n      // came caller so toggle\n      await this.toggle(e);\n    }\n\n    this._lastCaller = e.composedPath()[0];\n  };\n\n  /**\n   * Executes before the element is opened.\n   */\n  beforeOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function called after the element is opened.\n   */\n  afterOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Executes before closing the element.\n   */\n  beforeClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function that is called after the container is closed.\n   */\n  afterClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Animates the transition of the element's width from 0 to the maximum width or vice versa.\n   * @returns {Promise<void>} A promise that resolves when the animation is complete.\n   */\n  doAnimateTransition() {\n    const options = {\n      delay: 0,\n      endDelay: 0,\n      fill: 'forwards',\n      duration: +this.animationDuration,\n      iterationStart: 0,\n      iterations: 1,\n      direction: 'normal',\n      easing: this.animationEasing,\n    };\n\n    if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n      this.animation.cancel();\n      this.animation = null;\n    }\n\n    if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n      this.nativeAnimation.cancel();\n      this.nativeAnimation = null;\n    }\n\n    if (!this._isOpen) {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: 0,\n            },\n            {\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n      }\n    } else {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: this.maxWidth,\n            },\n            {\n              width: 0,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n          ],\n          options,\n        );\n      }\n    }\n\n    return new Promise((resolve, reject) => {\n      this.animation.onfinish = () => {\n        this._isOpen = !this._isOpen;\n        resolve();\n      };\n    });\n  }\n\n  /**\n   * Opens the container with an animation.\n   * @returns {Promise<void>} A promise that resolves when the container is opened.\n   */\n  async open(event) {\n    await Promise.resolve(this.beforeOpen(event)).then(async () => {\n      if (!this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeOpen', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterOpen(event)).then(() => {\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:open', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Closes the animation container.\n   * @returns {Promise<void>} A promise that resolves when the container is closed.\n   */\n  async close(event) {\n    await Promise.resolve(this.beforeClose(event)).then(async () => {\n      if (this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeClose', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterClose(event)).then(() => {\n          if (this.removeChildAfterClose) {\n            this.childNodes.forEach((child) => {\n              child.remove();\n            });\n          }\n\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:close', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Toggles the state of the element.\n   * If the element is open, it will be closed. If it is closed, it will be opened.\n   * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.\n   */\n  async toggle(event) {\n    if (this._isOpen) {\n      await this.close(event);\n    } else {\n      await this.open(event);\n    }\n  }\n\n  componentCleanup() {\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":"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"}

package/dist/wje-split-view.js

@@ -0,0 +1,153 @@
+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);
+import WJElement from "./wje-element.js";
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options == null ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options == null ? void 0 : options.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+}
+const styles = "/*\n[ WJ Split View ]\n*/\n\n:host {\n    --wje-split-view-divider-area: 12px;\n    --wje-split-view-divider-width: 4px;\n    --wje-split-view-min: 0%;\n    --wje-split-view-max: 100%;\n    --wje-split-view-calc-a: 50%;\n    --wje-split-view-calc-b: 50%;\n    --wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));\n    --wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));\n\n    --wje-split-view-divider-background: var(--wje-border-color);\n    --wje-split-view-divider-size: 4px;\n    height: 100%;\n    width: 100%;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n:host(:not([vertical])) ::slotted([slot='start']) {\n    width: var(--wje-split-view-clamp-a);\n}\n\n:host(:not([vertical])) ::slotted([slot='end']) {\n    width: var(--wje-split-view-clamp-b);\n}\n\n:host([vertical]) ::slotted([slot='start']) {\n    height: var(--wje-split-view-clamp-a);\n    width: 100%;\n}\n\n:host([vertical]) ::slotted([slot='end']) {\n    height: var(--wje-split-view-clamp-b);\n    width: 100%;\n}\n\n.native-split-view {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    overflow: hidden;\n    position: relative;\n}\n\n:host([vertical]) .native-split-view {\n    flex-direction: column;\n}\n\n.wje-divider {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n    background-color: var(--wje-split-view-divider-background);\n    height: 100%;\n    width: var(--wje-split-view-divider-size);\n    cursor: col-resize;\n    &:after {\n        display: flex;\n        align-items: center;\n        content: '';\n        position: absolute;\n        height: 100%;\n        left: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        width: var(--wje-split-view-divider-area);\n    }\n}\n\n:host([vertical]) .wje-divider {\n    height: var(--wje-split-view-divider-size);\n    width: 100%;\n    cursor: row-resize;\n    &:after {\n        width: 100%;\n        top: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        height: var(--wje-split-view-divider-area);\n    }\n}\n";
+class SplitView extends WJElement {
+  /**
+   * Creates an instance of SplitView.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "SplitView");
+    /**
+     * Handles the drag event.
+     * @param {Event} e The event object.
+     */
+    __publicField(this, "handleDrag", (e) => {
+      if (this.hasAttribute("disabled")) return;
+      drag(this, {
+        onMove: (x, y) => {
+          console.log("x", x);
+          console.log("y", y);
+          console.log("this.hasAttribute(vertical)", this.hasAttribute("vertical"));
+          let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
+          console.log("newPositionInPixels", newPositionInPixels);
+          let sizeA = this.pixelsToPercentage(newPositionInPixels);
+          let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
+          console.log("sizeA", sizeA);
+          console.log("sizeB", sizeB);
+          this.style.setProperty("--wje-split-view-calc-a", sizeA + "%");
+          this.style.setProperty("--wje-split-view-calc-b", sizeB + "%");
+        },
+        initialEvent: e
+      });
+    });
+  }
+  set initial(value) {
+    this.setAttribute("initial", value);
+  }
+  get initial() {
+    return +this.getAttribute("initial") || 50;
+  }
+  /**
+   * Returns the CSS styles for the component.
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return [];
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component for the split view.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-split-view");
+    let start = document.createElement("slot");
+    start.setAttribute("name", "start");
+    let end = document.createElement("slot");
+    end.setAttribute("name", "end");
+    let divider = document.createElement("slot");
+    divider.setAttribute("name", "divider");
+    let dividerElement = document.createElement("div");
+    dividerElement.classList.add("wje-divider");
+    dividerElement.setAttribute("part", "divider");
+    dividerElement.appendChild(divider);
+    dividerElement.addEventListener("mousedown", this.handleDrag, false);
+    native.appendChild(start);
+    native.appendChild(dividerElement);
+    native.appendChild(end);
+    fragment.appendChild(native);
+    return fragment;
+  }
+  /**
+   * Sets up the event listeners after the component is drawn.
+   */
+  afterDraw() {
+    this.detectSize();
+    if (this.min) this.style.setProperty("--wje-split-view-min", this.pixelsToPercentage(this.min) + "%");
+    if (this.max) this.style.setProperty("--wje-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%");
+    if (this.initial) {
+      this.style.setProperty("--wje-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%");
+      this.style.setProperty("--wje-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%");
+    }
+    this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
+  }
+  /**
+   * Detects the size of the split view.
+   */
+  detectSize() {
+    const { width, height } = this.getBoundingClientRect();
+    console.log("VERTICAL:", this.hasAttribute("vertical"), this.getBoundingClientRect(), this);
+    console.log("width", width);
+    console.log("height", height);
+    this.size = this.hasAttribute("vertical") ? height : width;
+  }
+  /**
+   * Converts pixels to a percentage.
+   * @param {number} value The pixel value.
+   * @returns {number} The percentage value.
+   */
+  pixelsToPercentage(value) {
+    console.log("pixelsToPercentage", value, value / this.size * 100);
+    return value / this.size * 100;
+  }
+}
+SplitView.define("wje-split-view", SplitView);
+export {
+  SplitView as default
+};
+//# sourceMappingURL=wje-split-view.js.map