wj-elements 0.1.191 → 0.1.193

package/dist/wje-sliding-container.js

@@ -2,7 +2,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);
 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";
+import { event } from "./event.js";
+const styles = ":host {\n    display: block;\n    z-index: 9999;\n    position: relative;\n    height: 100%;\n    right: unset;\n    left: unset;\n    .close-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n        z-index: 1000;\n    }\n}\n\n:host([hide-button]) {\n    .close-button {\n        display: none;\n    }\n}\n\n.sliding-container-wrapper {\n    height: 100%;\n    position: relative;\n    overflow: hidden;\n}\n\n.native-sliding-container {\n\n    position: absolute;\n    width: 0;\n    height: 100%;\n}\n\n.native-sliding-container-inner {\n    height: 100%;\n    position: absolute;\n}\n";
 class SlidingContainer extends WJElement {
   /**
    * Creates an instance of SlidingContainer.
@@ -49,69 +50,168 @@ class SlidingContainer extends WJElement {
     });
     this._resizeObserver.observe(document.documentElement);
   }
+  /**
+   * Sets the maximum width of an element by updating the 'max-width' attribute.
+   * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).
+   */
   set maxWidth(value) {
     this.setAttribute("max-width", value);
   }
+  /**
+   * Gets the maximum width value of the element.
+   * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.
+   * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.
+   */
   get maxWidth() {
     return this.getAttribute("max-width") ?? "auto";
   }
+  /**
+   * Sets the maximum height for the element.
+   * @param {string} value The maximum height value to be applied to the element. This can include units such as "px", "em", "%", etc.
+   */
   set maxHeight(value) {
     this.setAttribute("max-height", value);
   }
+  /**
+   * Retrieves the maximum height value of the element, or returns 'auto' if not set.
+   * @returns {string} The maximum height value or 'auto' if the attribute is not specified.
+   */
   get maxHeight() {
     return this.getAttribute("max-height") ?? "auto";
   }
+  /**
+   * Sets the 'trigger' attribute for the element.
+   * @param {string} value The value to set for the 'trigger' attribute.
+   */
   set trigger(value) {
     this.setAttribute("trigger", value);
   }
+  /**
+   * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.
+   * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.
+   */
   get trigger() {
     return this.getAttribute("trigger") ?? "sliding-container";
   }
+  /**
+   * Sets the direction attribute for the element.
+   * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.
+   */
   set direction(value) {
     this.setAttribute("direction", value);
   }
+  /**
+   * Retrieves the direction attribute of the instance.
+   * If the direction attribute is not set, it defaults to 'right'.
+   * @returns {string} The value of the direction attribute or 'right' if not set.
+   */
   get direction() {
     return this.getAttribute("direction") ?? "right";
   }
+  /**
+   * Sets the value of the `remove-child-after-close` attribute.
+   * This attribute determines if a child element should be removed after a close operation.
+   * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.
+   */
   set removeChildAfterClose(value) {
     this.setAttribute("remove-child-after-close", value);
   }
+  /**
+   * Gets the value indicating whether the child element should be removed after closing.
+   *
+   * This property checks the presence of the 'remove-child-after-close' attribute on the element.
+   * Returns `false` if the attribute does not exist.
+   * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.
+   */
   get removeChildAfterClose() {
     return this.hasAttribute("remove-child-after-close") ?? false;
   }
+  /**
+   * Sets the 'variant' attribute to the specified value.
+   * @param {string} value The value to set for the 'variant' attribute.
+   */
   set variant(value) {
     this.setAttribute("variant", value);
   }
+  /**
+   * Retrieves the value of the "variant" attribute. If the attribute is not set,
+   * it returns the default value 'in-place'.
+   * @returns {string} The variant value or the default value 'in-place'.
+   */
   get variant() {
     return this.getAttribute("variant") ?? "in-place";
   }
+  /**
+   * Retrieves the value of the 'screen-break-point' attribute.
+   * @returns {string} The value of the 'screen-break-point' attribute.
+   */
   get screenBreakPoint() {
     return this.getAttribute("screen-break-point");
   }
+  /**
+   * Sets the screen break point value to determine responsive behavior.
+   * @param {string} value The value to set as the screen break point.
+   */
   set screenBreakPoint(value) {
     this.setAttribute("screen-break-point", value);
   }
-  get animationDuration() {
-    return this.getAttribute("animation-duration") ?? "500";
-  }
+  /**
+   * Sets the duration of the animation by updating the `animation-duration` attribute.
+   * @param {string} value The duration value for the animation, specified in a format
+   * such as seconds (e.g., "2s") or milliseconds (e.g., "200ms").
+   */
   set animationDuration(value) {
     this.setAttribute("animation-duration", value);
   }
-  get animationEasing() {
-    return this.getAttribute("animation-easing") ?? "linear";
+  /**
+   * Gets the animation duration for an element.
+   * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.
+   * @returns {string} The value of the animation duration, either from the attribute or the default '500'.
+   */
+  get animationDuration() {
+    return this.getAttribute("animation-duration") ?? "500";
   }
+  /**
+   * Sets the easing function for the animation.
+   * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as "ease", "linear", "ease-in", "ease-out", etc.
+   */
   set animationEasing(value) {
     this.setAttribute("animation-easing", value);
   }
+  /**
+   * Retrieves the easing function for the animation.
+   * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.
+   */
+  get animationEasing() {
+    return this.getAttribute("animation-easing") ?? "linear";
+  }
+  /**
+   * Determines if the element has an 'has-opacity' attribute.
+   * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.
+   */
   get hasOpacity() {
     return this.hasAttribute("has-opacity") ?? false;
   }
-  get addToHeight() {
-    return this.getAttribute("add-to-height") ?? "0";
-  }
+  /**
+   * Sets the value of the 'add-to-height' attribute.
+   * This attribute is used to modify or adjust the height dynamically.
+   * @param {string} value The value to be assigned to the 'add-to-height' attribute.
+   */
   set addToHeight(value) {
     this.setAttribute("add-to-height", value);
   }
+  /**
+   * Retrieves the value of the 'add-to-height' attribute from the element.
+   * If the attribute is not set, it defaults to '0'.
+   * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.
+   */
+  get addToHeight() {
+    return this.getAttribute("add-to-height") ?? "0";
+  }
+  /**
+   * Determines whether the current state is open.
+   * @returns {boolean} True if the state is open, otherwise false.
+   */
   get isOpen() {
     return this._isOpen;
   }
@@ -120,18 +220,7 @@ class SlidingContainer extends WJElement {
    * @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"
-    ];
+    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.
@@ -147,6 +236,15 @@ class SlidingContainer extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * 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);
+  }
   /**
    * Draws the component.
    * @param {object} context The context for drawing.
@@ -156,19 +254,16 @@ class SlidingContainer extends WJElement {
    */
   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");
+    let wrapperDiv = document.createElement("div");
+    wrapperDiv.classList.add("sliding-container-wrapper");
+    let transparentDiv = document.createElement("div");
+    transparentDiv.classList.add("sliding-container-transparent");
     if (this._isOpen) {
-      this.transparentDiv.style.width = this.maxWidth;
+      transparentDiv.style.width = this.maxWidth;
     }
     let native = document.createElement("div");
-    native.style.position = "absolute";
+    native.setAttribute("part", "sliding-container");
+    native.classList.add("native-sliding-container");
     native.style.width = 0;
     if (this.hasOpacity) {
       native.style.opacity = 0;
@@ -179,9 +274,6 @@ class SlidingContainer extends WJElement {
         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 {
@@ -190,47 +282,18 @@ class SlidingContainer extends WJElement {
     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);
+    nativeInner.append(slot);
+    nativeInner.append(this.htmlCloseButton());
+    native.append(nativeInner);
+    wrapperDiv.append(transparentDiv);
+    wrapperDiv.append(native);
+    fragment.append(wrapperDiv);
+    this.transparentDiv = transparentDiv;
+    this.wrapperDiv = 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.
@@ -244,6 +307,29 @@ class SlidingContainer extends WJElement {
     }
     this.checkForVariant(this.variant);
   }
+  /**
+   * Creates and returns a styled close button element with an icon,
+   * including an event listener to trigger the close method.
+   * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.
+   */
+  htmlCloseButton() {
+    let closeButton = document.createElement("wje-button");
+    closeButton.setAttribute("part", "close-button");
+    closeButton.classList.add("close-button");
+    let icon = document.createElement("wje-icon");
+    icon.setAttribute("slot", "icon-only");
+    icon.setAttribute("name", "x");
+    closeButton.append(icon);
+    event.addListener(closeButton, "wje-button:click", null, (e) => {
+      this.close();
+    });
+    return closeButton;
+  }
+  /**
+   * Retrieves the parent element of the current element.
+   * If the parent element is not found, it attempts to find the root host element.
+   * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.
+   */
   getParentElement() {
     let parentElement = this.parentElement;
     if (!parentElement) {
@@ -252,8 +338,12 @@ class SlidingContainer extends WJElement {
     return parentElement;
   }
   /**
-   * Checks for a specific variant and applies corresponding styles.
-   * @param {string} variant The variant to check for.
+   * Adjusts the position and dimensions of the current element based on the specified variant.
+   *
+   * The method handles modifications to the element's positioning style, aligns it relative to its parent,
+   * and manages alignment to its siblings based on the specified direction.
+   * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.
+   * @returns {void} No value is returned, the method modifies the element's style properties directly.
    */
   checkForVariant(variant) {
     if (variant === "over") {
@@ -287,26 +377,31 @@ class SlidingContainer extends WJElement {
   /**
    * Executes before the element is opened.
    */
-  beforeOpen(event) {
+  beforeOpen(e) {
   }
   /**
    * Callback function called after the element is opened.
    */
-  afterOpen(event) {
+  afterOpen(e) {
   }
   /**
    * Executes before closing the element.
    */
-  beforeClose(event) {
+  beforeClose(e) {
   }
   /**
    * Callback function that is called after the container is closed.
    */
-  afterClose(event) {
+  afterClose(e) {
   }
   /**
-   * 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.
+   * Animates the transition of elements with specified options, toggling the visibility and/or dimensions
+   * of the associated elements based on their current state.
+   *
+   * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)
+   * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided
+   * elements before initiating a new animation sequence.
+   * @returns {Promise<void>} A promise that resolves when the transition animation is completed.
    */
   doAnimateTransition() {
     var _a, _b, _c, _d;
@@ -397,73 +492,62 @@ class SlidingContainer extends WJElement {
     });
   }
   /**
-   * Opens the container with an animation.
-   * @returns {Promise<void>} A promise that resolves when the container is opened.
+   * Opens the sliding container by performing necessary preparatory and transitional operations.
+   * @param {Event} e The event that triggered the open operation.
+   * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.
    */
-  async open(event) {
-    await Promise.resolve(this.beforeOpen(event)).then(async () => {
+  async open(e) {
+    await Promise.resolve(this.beforeOpen(e)).then(async () => {
       if (!this._isOpen) {
-        this.dispatchEvent(
-          new CustomEvent("wje-sliding-container:beforeOpen", {
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.classList.add("open");
+        event.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen");
         this.checkForVariant(this.variant);
         await this.doAnimateTransition();
-        await Promise.resolve(this.afterOpen(event)).then(() => {
-          this.dispatchEvent(
-            new CustomEvent("wje-sliding-container:open", {
-              bubbles: true,
-              composed: true
-            })
-          );
+        await Promise.resolve(this.afterOpen(e)).then(() => {
+          event.dispatchCustomEvent(this, "wje-sliding-container:open");
         });
       }
     });
   }
   /**
-   * Closes the animation container.
-   * @returns {Promise<void>} A promise that resolves when the container is closed.
+   * Closes the sliding container and performs associated operations such as animations and event dispatches.
+   * @param {Event} e The event object associated with the close action.
+   * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.
    */
-  async close(event) {
-    await Promise.resolve(this.beforeClose(event)).then(async () => {
+  async close(e) {
+    await Promise.resolve(this.beforeClose(e)).then(async () => {
       if (this._isOpen) {
-        this.dispatchEvent(
-          new CustomEvent("wje-sliding-container:beforeClose", {
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.classList.remove("open");
+        event.dispatchCustomEvent(this, "wje-sliding-container:beforeClose");
         await this.doAnimateTransition();
-        await Promise.resolve(this.afterClose(event)).then(() => {
+        await Promise.resolve(this.afterClose(e)).then(() => {
           if (this.removeChildAfterClose) {
             this.childNodes.forEach((child) => {
               child.remove();
             });
           }
-          this.dispatchEvent(
-            new CustomEvent("wje-sliding-container:close", {
-              bubbles: true,
-              composed: true
-            })
-          );
+          event.dispatchCustomEvent(this, "wje-sliding-container:afterClose");
         });
       }
     });
   }
   /**
-   * 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.
+   * Toggles the state between open and closed.
+   * @param {Event} e The event object triggering the toggle.
+   * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.
    */
-  async toggle(event) {
+  async toggle(e) {
     if (this._isOpen) {
       await this.close(event);
     } else {
       await this.open(event);
     }
   }
+  /**
+   * Cleans up resources associated with the component by disconnecting
+   * the resize observer and setting it to null.
+   * @returns {void} Does not return a value.
+   */
   componentCleanup() {
     var _a;
     (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();

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

@@ -1 +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 - Specifies the sliding direction of the container (e.g., 'left' or 'right').\n * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.\n * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the \"over\" variant for smaller screens.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.\n * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').\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    get isOpen() {\n        return this._isOpen;\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     */\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                this.checkForVariant(this.variant);\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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"}
+{"version":3,"file":"wje-sliding-container.js","sources":["../packages/wje-sliding-container/sliding-container.element.js","../packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement, event } from '../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 - Specifies the sliding direction of the container (e.g., 'left' or 'right').\n * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.\n * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the \"over\" variant for smaller screens.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.\n * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').\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    /**\n     * Sets the maximum width of an element by updating the 'max-width' attribute.\n     * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).\n     */\n    set maxWidth(value) {\n        this.setAttribute('max-width', value);\n    }\n\n    /**\n     * Gets the maximum width value of the element.\n     * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.\n     * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.\n     */\n    get maxWidth() {\n        return this.getAttribute('max-width') ?? 'auto';\n    }\n\n    /**\n     * Sets the maximum height for the element.\n     * @param {string} value The maximum height value to be applied to the element. This can include units such as \"px\", \"em\", \"%\", etc.\n     */\n    set maxHeight(value) {\n        this.setAttribute('max-height', value);\n    }\n\n    /**\n     * Retrieves the maximum height value of the element, or returns 'auto' if not set.\n     * @returns {string} The maximum height value or 'auto' if the attribute is not specified.\n     */\n    get maxHeight() {\n        return this.getAttribute('max-height') ?? 'auto';\n    }\n\n    /**\n     * Sets the 'trigger' attribute for the element.\n     * @param {string} value The value to set for the 'trigger' attribute.\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.\n     * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.\n     */\n    get trigger() {\n        return this.getAttribute('trigger') ?? 'sliding-container';\n    }\n\n    /**\n     * Sets the direction attribute for the element.\n     * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.\n     */\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    /**\n     * Retrieves the direction attribute of the instance.\n     * If the direction attribute is not set, it defaults to 'right'.\n     * @returns {string} The value of the direction attribute or 'right' if not set.\n     */\n    get direction() {\n        return this.getAttribute('direction') ?? 'right';\n    }\n\n    /**\n     * Sets the value of the `remove-child-after-close` attribute.\n     * This attribute determines if a child element should be removed after a close operation.\n     * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.\n     */\n    set removeChildAfterClose(value) {\n        this.setAttribute('remove-child-after-close', value);\n    }\n\n    /**\n     * Gets the value indicating whether the child element should be removed after closing.\n     *\n     * This property checks the presence of the 'remove-child-after-close' attribute on the element.\n     * Returns `false` if the attribute does not exist.\n     * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.\n     */\n    get removeChildAfterClose() {\n        return this.hasAttribute('remove-child-after-close') ?? false;\n    }\n\n    /**\n     * Sets the 'variant' attribute to the specified value.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Retrieves the value of the \"variant\" attribute. If the attribute is not set,\n     * it returns the default value 'in-place'.\n     * @returns {string} The variant value or the default value 'in-place'.\n     */\n    get variant() {\n        return this.getAttribute('variant') ?? 'in-place';\n    }\n\n    /**\n     * Retrieves the value of the 'screen-break-point' attribute.\n     * @returns {string} The value of the 'screen-break-point' attribute.\n     */\n    get screenBreakPoint() {\n        return this.getAttribute('screen-break-point');\n    }\n\n    /**\n     * Sets the screen break point value to determine responsive behavior.\n     * @param {string} value The value to set as the screen break point.\n     */\n    set screenBreakPoint(value) {\n        this.setAttribute('screen-break-point', value);\n    }\n\n    /**\n     * Sets the duration of the animation by updating the `animation-duration` attribute.\n     * @param {string} value The duration value for the animation, specified in a format\n     * such as seconds (e.g., \"2s\") or milliseconds (e.g., \"200ms\").\n     */\n    set animationDuration(value) {\n        this.setAttribute('animation-duration', value);\n    }\n\n    /**\n     * Gets the animation duration for an element.\n     * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.\n     * @returns {string} The value of the animation duration, either from the attribute or the default '500'.\n     */\n    get animationDuration() {\n        return this.getAttribute('animation-duration') ?? '500';\n    }\n\n    /**\n     * Sets the easing function for the animation.\n     * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as \"ease\", \"linear\", \"ease-in\", \"ease-out\", etc.\n     */\n    set animationEasing(value) {\n        this.setAttribute('animation-easing', value);\n    }\n\n    /**\n     * Retrieves the easing function for the animation.\n     * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.\n     */\n    get animationEasing() {\n        return this.getAttribute('animation-easing') ?? 'linear';\n    }\n\n    /**\n     * Determines if the element has an 'has-opacity' attribute.\n     * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.\n     */\n    get hasOpacity() {\n        return this.hasAttribute('has-opacity') ?? false;\n    }\n\n    /**\n     * Sets the value of the 'add-to-height' attribute.\n     * This attribute is used to modify or adjust the height dynamically.\n     * @param {string} value The value to be assigned to the 'add-to-height' attribute.\n     */\n    set addToHeight(value) {\n        this.setAttribute('add-to-height', value);\n    }\n\n    /**\n     * Retrieves the value of the 'add-to-height' attribute from the element.\n     * If the attribute is not set, it defaults to '0'.\n     * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.\n     */\n    get addToHeight() {\n        return this.getAttribute('add-to-height') ?? '0';\n    }\n\n    /**\n     * Determines whether the current state is open.\n     * @returns {boolean} True if the state is open, otherwise false.\n     */\n    get isOpen() {\n        return this._isOpen;\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 ['max-width', 'max-height', 'trigger', 'direction', 'variant', 'screen-break-point', 'remove-child-after-close', 'animation-duration', 'animation-easing', 'has-opacity'];\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     * Executes before drawing the element.\n     */\n    beforeDraw() {\n        this.animation?.cancel();\n        this.nativeAnimation?.cancel();\n\n        document.removeEventListener(this.trigger, this.triggerEvent);\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        let wrapperDiv = document.createElement('div');\n        wrapperDiv.classList.add('sliding-container-wrapper');\n\n        let transparentDiv = document.createElement('div');\n        transparentDiv.classList.add('sliding-container-transparent');\n\n        if (this._isOpen) {\n            transparentDiv.style.width = this.maxWidth;\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'sliding-container');\n        native.classList.add('native-sliding-container');\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        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.width = this.maxWidth;\n\n        // APPEND\n        nativeInner.append(slot);\n        nativeInner.append(this.htmlCloseButton());\n\n        native.append(nativeInner);\n\n        wrapperDiv.append(transparentDiv);\n        wrapperDiv.append(native);\n\n        fragment.append(wrapperDiv);\n\n        this.transparentDiv = transparentDiv;\n        this.wrapperDiv = wrapperDiv\n        this.nativeElement = native;\n\n        return fragment;\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     */\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    /**\n     * Creates and returns a styled close button element with an icon,\n     * including an event listener to trigger the close method.\n     * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.\n     */\n    htmlCloseButton() {\n        let closeButton = document.createElement('wje-button');\n        closeButton.setAttribute('part', 'close-button');\n        closeButton.classList.add('close-button');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'x');\n\n        closeButton.append(icon);\n\n        event.addListener(closeButton, 'wje-button:click', null,(e) => {\n            this.close();\n        });\n\n        return closeButton;\n    }\n\n    /**\n     * Retrieves the parent element of the current element.\n     * If the parent element is not found, it attempts to find the root host element.\n     * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.\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     * Adjusts the position and dimensions of the current element based on the specified variant.\n     *\n     * The method handles modifications to the element's positioning style, aligns it relative to its parent,\n     * and manages alignment to its siblings based on the specified direction.\n     * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.\n     * @returns {void} No value is returned, the method modifies the element's style properties directly.\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(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function called after the element is opened.\n     */\n    afterOpen(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Executes before closing the element.\n     */\n    beforeClose(e) {\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(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Animates the transition of elements with specified options, toggling the visibility and/or dimensions\n     * of the associated elements based on their current state.\n     *\n     * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)\n     * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided\n     * elements before initiating a new animation sequence.\n     * @returns {Promise<void>} A promise that resolves when the transition animation is completed.\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 sliding container by performing necessary preparatory and transitional operations.\n     * @param {Event} e The event that triggered the open operation.\n     * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.\n     */\n    async open(e) {\n        await Promise.resolve(this.beforeOpen(e)).then(async () => {\n            if (!this._isOpen) {\n                this.classList.add('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeOpen')\n\n                this.checkForVariant(this.variant);\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterOpen(e)).then(() => {\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:open')\n                });\n            }\n        });\n    }\n\n    /**\n     * Closes the sliding container and performs associated operations such as animations and event dispatches.\n     * @param {Event} e The event object associated with the close action.\n     * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.\n     */\n    async close(e) {\n        await Promise.resolve(this.beforeClose(e)).then(async () => {\n            if (this._isOpen) {\n                this.classList.remove('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeClose');\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterClose(e)).then(() => {\n                    if (this.removeChildAfterClose) {\n                        this.childNodes.forEach((child) => {\n                            child.remove();\n                        });\n                    }\n\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:afterClose');\n                });\n            }\n        });\n    }\n\n    /**\n     * Toggles the state between open and closed.\n     * @param {Event} e The event object triggering the toggle.\n     * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.\n     */\n    async toggle(e) {\n        if (this._isOpen) {\n            await this.close(event);\n        } else {\n            await this.open(event);\n        }\n    }\n\n    /**\n     * Cleans up resources associated with the component by disconnecting\n     * the resize observer and setting it to null.\n     * @returns {void} Does not return a value.\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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"}