wj-elements 0.1.134 → 0.1.136

package/dist/wje-slider.js

@@ -1,220 +0,0 @@
-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, { event } from "./wje-element.js";
-const styles = ":host {\n    --wje-slider-track-height: 0.25rem;\n    --wje-slider-color: var(--wje-color-primary-9); /* Predvolená farba */\n    --wje-slider-thumb-color: var(--wje-color-primary-9); /* Farba tiahla */\n    --wje-slider-thumb-border: none; /* Predvolene žiadny border */\n    --wje-slider-thumb-shadow: none; /* Tieň vo výchozom stave */\n    --wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-4) 60%, white) 0 0 0 7px;\n    --wje-slider-track-color: var(--wje-color-contrast-4); /* Farba tracku */\n\n    position: relative;\n    display: flex;\n    align-items: center;\n    max-width: 100%;\n}\n\n.native-slider {\n    display: flex;\n    position: relative;\n    flex-grow: 1;\n    align-items: center;\n    height: inherit;\n}\n\n.slider {\n    display: flex;\n    align-items: center;\n    position: relative;\n    flex: 1 1 0%;\n    width: 100%;\n    height: var(--height);\n    contain: size layout style;\n    cursor: grab;\n    touch-action: pan-y;\n}\n\ninput[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: var(--wje-slider-track-height);\n    margin: 0;\n    border-radius: 5px;\n    background-size: 70% 100%;\n    background-repeat: no-repeat;\n    background-color: var(--wje-slider-track-color);\n    background-image: linear-gradient(var(--wje-slider-color), var(--wje-slider-color));\n}\n\ninput[type='range']::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-moz-range-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: pointer;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-ms-thumb {\n    height: 18px;\n    width: 18px;\n    border-radius: 50%;\n    border: var(--wje-slider-thumb-border); /* Nastaviteľný border (predvolený: none) */\n    background: var(--wje-slider-thumb-color); /* Farba tiahla */\n    box-shadow: var(--wje-slider-thumb-shadow); /* Tieň vo výchozom stave */\n    cursor: ew-resize;\n    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;\n}\n\ninput[type='range']::-webkit-slider-thumb:active,\ninput[type='range']::-moz-range-thumb:active,\ninput[type='range']::-ms-thumb:active {\n    box-shadow: var(--wje-slider-thumb-shadow-active); /* Tieň pri aktívnom stave */\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range']::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n}\n\ninput[type='range'][color='primary'] {\n    --wje-slider-color: var(--wje-color-primary-9);\n    --wje-slider-thumb-color: var(--wje-color-primary-9);\n}\n\ninput[type='range'][color='success'] {\n    --wje-slider-color: var(--wje-color-success-9);\n    --wje-slider-thumb-color: var(--wje-color-success-9);\n}\n\ninput[type='range'][color='complete'] {\n    --wje-slider-color: var(--wje-color-complete-9);\n    --wje-slider-thumb-color: var(--wje-color-complete-9);\n}\n\ninput[type='range'][color='danger'] {\n    --wje-slider-color: var(--wje-color-danger-9);\n    --wje-slider-thumb-color: var(--wje-color-danger-9);\n}\n\ninput[type='range'][color='warning'] {\n    --wje-slider-color: var(--wje-color-warning-9);\n    --wje-slider-thumb-color: var(--wje-color-warning-9);\n}\n\ninput[type='range'][color='dark'] {\n    --wje-slider-color: var(--wje-color-contrast-11);\n    --wje-slider-thumb-color: var(--wje-color-contrast-11);\n}\n\ndatalist {\n    display: flex;\n    justify-content: space-between;\n    height: auto;\n    overflow: hidden;\n    margin-top: 16px;\n\n    option::before {\n        content: '';\n        display: block;\n        width: 0;\n        height: auto;\n        padding-left: 3px;\n        text-indent: 0;\n    }\n}\n\noutput {\n    position: absolute;\n    background: var(--wje-color-contrast-11);\n    color: var(--wje-color-contrast-0);\n    top: -46px;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n::slotted([slot='label']) {\n    margin-inline: 0 0.5rem;\n    font-size: var(--wje-font-size);\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0rem 0.75rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.75rem 0rem;\n}";
-class Slider extends WJElement {
-  /**
-   * Creates an instance of Slider.
-   * @class
-   */
-  constructor() {
-    super();
-    __publicField(this, "className", "Slider");
-    /**
-     * Sets the handle position of the slider.
-     */
-    __publicField(this, "setHandlePosition", () => {
-      this.input.style.backgroundSize = this.getPercentage(this.input.min, this.input.max, this.input.value) + "% 100%";
-    });
-    /**
-     * Updates the position and content of a bubble element based on the input value.
-     *
-     * This function calculates the position of the bubble using the percentage representation
-     * of the input's current value relative to its minimum and maximum bounds. It then adjusts
-     * the bubble's left position dynamically for aesthetic purposes and updates its displayed
-     * content to reflect the current input value.
-     *
-     * The function relies on the following elements:
-     * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.
-     * - `this.output`: Represents the bubble element to be positioned and updated.
-     *
-     * The left positioning of the bubble ensures precise alignment with the input value indicator.
-     */
-    __publicField(this, "setBubble", () => {
-      let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);
-      this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;
-      this.output.innerHTML = this.input.value;
-    });
-  }
-  /**
-   * Sets the value of the slider.
-   * @param {number} value The value to set.
-   */
-  set value(value) {
-    this.setAttribute("value", value);
-    if (this.input) {
-      this.input.value = value;
-      this.setHandlePosition();
-    }
-  }
-  /**
-   * Returns the value of the slider.
-   * @returns {number} The value of the slider input.
-   */
-  get value() {
-    return this.getAttribute("value") || 0;
-  }
-  /**
-   * Sets the minimum value of the slider.
-   * @param {number} value The minimum value to set.
-   */
-  set min(value) {
-    this.setAttribute("min", value);
-  }
-  /**
-   * Returns the minimum value of the slider.
-   * @returns {number} The minimum value of the slider.
-   */
-  get min() {
-    return this.getAttribute("min") || 0;
-  }
-  /**
-   * Sets the maximum value of the slider.
-   * @param {number} value The maximum value to set.
-   */
-  set max(value) {
-    this.setAttribute("max", value);
-  }
-  /**
-   * Returns the maximum value of the slider.
-   * @returns {number} The maximum value of the slider.
-   */
-  get max() {
-    return this.getAttribute("max") || 100;
-  }
-  /**
-   * Sets the step value of the slider.
-   * @param {number} value The step value to set.
-   */
-  set step(value) {
-    this.setAttribute("step", value);
-  }
-  /**
-   * Returns the step value of the slider.
-   * @returns {number} The step value of the slider.
-   */
-  get step() {
-    return this.getAttribute("step") || 1;
-  }
-  /**
-   * 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 ["max"];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component for the slider.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.className = "native-slider";
-    element.setAttribute("part", "native");
-    let slider = document.createElement("div");
-    slider.className = "slider";
-    let label = document.createElement("slot");
-    label.name = "label";
-    let start = document.createElement("slot");
-    start.name = "start";
-    let end = document.createElement("slot");
-    end.name = "end";
-    let output = document.createElement("output");
-    output.setAttribute("for", "slider");
-    output.id = "output";
-    output.setAttribute("hidden", "");
-    let input = document.createElement("input");
-    input.type = "range";
-    input.min = this.min;
-    input.max = this.max;
-    input.step = this.step;
-    input.value = this.value;
-    input.id = "slider";
-    input.name = "slider";
-    input.part = "slider";
-    input.setAttribute("autocomplete", "off");
-    input.setAttribute("color", this.color || "");
-    input.addEventListener("input", null, (e) => {
-      this.setHandlePosition(e.target);
-    });
-    slider.appendChild(input);
-    if (this.hasAttribute("bubble")) {
-      slider.appendChild(output);
-    }
-    element.appendChild(label);
-    element.appendChild(start);
-    element.appendChild(slider);
-    element.appendChild(end);
-    fragment.appendChild(element);
-    this.input = input;
-    this.output = output;
-    return fragment;
-  }
-  /**
-   * Handles the post-rendering logic for a custom slider component. This method performs the following tasks:
-   * - Sets the position of the handle.
-   * - Displays a bubble indicator with the current value, if the slider has a "bubble" attribute.
-   * - Dispatches initialization, movement, and change custom events for the slider input element.
-   * - Updates the bubble position and value dynamically on input changes.
-   * @returns {void} This method does not return a value.
-   */
-  afterDraw() {
-    this.setHandlePosition();
-    if (this.hasAttribute("bubble")) {
-      this.output.innerHTML = this.input.value;
-      this.output.removeAttribute("hidden");
-      setTimeout(this.setBubble, 50);
-    }
-    event.dispatchCustomEvent(this.input, "wje-slider:init", {
-      value: this.input.value,
-      output: this.output
-    });
-    event.addListener(this.input, "input", null, (e) => {
-      this.value = e.target.value;
-      event.dispatchCustomEvent(this.input, "wje-slider:move", {
-        value: e.target.value,
-        output: this.output
-      });
-      if (this.hasAttribute("bubble")) {
-        this.setBubble();
-      }
-    });
-    event.addListener(this.input, "change", null, (e) => {
-      event.dispatchCustomEvent(this.input, "wje-slider:change", {
-        value: e.target.value,
-        output: this.output
-      });
-    });
-  }
-  /**
-   * Calculates the percentage of a value within a given range.
-   * @param {number} min The minimum value of the range.
-   * @param {number} max The maximum value of the range.
-   * @param {number} [value] The current value within the range. Defaults to 0 if not provided.
-   * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.
-   */
-  getPercentage(min, max, value = 0) {
-    return Number((value - min) * 100 / (max - min)) || 0;
-  }
-}
-Slider.define("wje-slider", Slider);
-export {
-  Slider as default
-};

package/dist/wje-sliding-container.js

@@ -1,477 +0,0 @@
-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.
-   *
-   * @constructor
-   */
-  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() {
-    this._resizeObserver.disconnect();
-    this._resizeObserver = null;
-  }
-}
-SlidingContainer.define("wje-sliding-container", SlidingContainer);
-export {
-  SlidingContainer as default
-};