wj-elements 0.1.135 → 0.1.137

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 *\n * @extends WJElement\n *\n * @csspart - Styles the element.\n *\n * @slot - The default slot for the SlidingContainer.\n *\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - The direction of the SlidingContainer.\n * @property {string} variant - The variant of the SlidingContainer.\n * @property {string} screenBreakPoint - The screen break point of the SlidingContainer.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - The duration of the animation.\n * @property {string} animationEasing - The easing of the animation.\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n *\n * @tag wje-sliding-container\n *\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 *\n */\nexport default class SlidingContainer extends WJElement {\n  /**\n   * Creates an instance of SlidingContainer.\n   *\n   * @constructor\n   */\n  constructor() {\n    super();\n\n    this._isOpen = false;\n    this._lastCaller = null;\n\n    this._resizeObserver = new ResizeObserver((entries) => {\n      for (let entry of entries) {\n        if (entry.contentBoxSize) {\n          if (this.drawingStatus < 3) return;\n\n          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            if (this.variant !== 'over') {\n              this.variant = 'over';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          } else {\n            if (this.variant !== 'in-place') {\n              this.variant = 'in-place';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          }\n        }\n      }\n    });\n\n    this._resizeObserver.observe(document.documentElement);\n  }\n\n  set maxWidth(value) {\n    this.setAttribute('max-width', value);\n  }\n\n  get maxWidth() {\n    return this.getAttribute('max-width') ?? 'auto';\n  }\n\n  set maxHeight(value) {\n    this.setAttribute('max-height', value);\n  }\n\n  get maxHeight() {\n    return this.getAttribute('max-height') ?? 'auto';\n  }\n\n  set trigger(value) {\n    this.setAttribute('trigger', value);\n  }\n\n  get trigger() {\n    return this.getAttribute('trigger') ?? 'sliding-container';\n  }\n\n  set direction(value) {\n    this.setAttribute('direction', value);\n  }\n\n  get direction() {\n    return this.getAttribute('direction') ?? 'right';\n  }\n\n  set removeChildAfterClose(value) {\n    this.setAttribute('remove-child-after-close', value);\n  }\n\n  get removeChildAfterClose() {\n    return this.hasAttribute('remove-child-after-close') ?? false;\n  }\n\n  set variant(value) {\n    this.setAttribute('variant', value);\n  }\n\n  get variant() {\n    return this.getAttribute('variant') ?? 'in-place';\n  }\n\n  get screenBreakPoint() {\n    return this.getAttribute('screen-break-point');\n  }\n\n  set screenBreakPoint(value) {\n    this.setAttribute('screen-break-point', value);\n  }\n\n  get animationDuration() {\n    return this.getAttribute('animation-duration') ?? '500';\n  }\n\n  set animationDuration(value) {\n    this.setAttribute('animation-duration', value);\n  }\n\n  get animationEasing() {\n    return this.getAttribute('animation-easing') ?? 'linear';\n  }\n\n  set animationEasing(value) {\n    this.setAttribute('animation-easing', value);\n  }\n\n  get hasOpacity() {\n    return this.hasAttribute('has-opacity') ?? false;\n  }\n\n  get addToHeight() {\n    return this.getAttribute('add-to-height') ?? '0';\n  }\n\n  set addToHeight(value) {\n    this.setAttribute('add-to-height', value);\n  }\n\n  className = 'SlidingContainer';\n\n  /**\n   * Returns the observed attributes for the component.\n   * @returns {string[]}\n   */\n  static get observedAttributes() {\n    return [\n      'max-width',\n      'max-height',\n      'trigger',\n      'direction',\n      'variant',\n      'screen-break-point',\n      'remove-child-after-close',\n      'animation-duration',\n      'animation-easing',\n      'has-opacity',\n    ];\n  }\n\n  /**\n   * Returns the CSS styles for the component.\n   *\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   *\n   * @param {Object} context - The context for drawing.\n   * @param {Object} store - The store for drawing.\n   * @param {Object} params - The parameters for drawing.\n   * @returns {DocumentFragment}\n   */\n  draw(context, store, params) {\n    let fragment = document.createDocumentFragment();\n\n    this.style.position = 'relative';\n    this.style.height = '100%';\n    this.style.right = 'unset';\n    this.style.left = 'unset';\n\n    this.wrapperDiv = document.createElement('div');\n    this.wrapperDiv.classList.add('sliding-container-wrapper');\n\n    this.transparentDiv = document.createElement('div');\n    this.transparentDiv.classList.add('sliding-container-transparent');\n    if (this._isOpen) {\n      this.transparentDiv.style.width = this.maxWidth;\n    }\n\n    let native = document.createElement('div');\n    native.style.position = 'absolute';\n    native.style.width = 0;\n    if (this.hasOpacity) {\n      native.style.opacity = 0;\n    }\n\n    if (this._isOpen) {\n      native.style.width = this.maxWidth;\n      if (this.hasOpacity) {\n        native.style.opacity = 1;\n      }\n    }\n\n    native.style.height = '100%';\n\n    native.classList.add('native-sliding-container');\n    native.setAttribute('part', 'sliding-container');\n\n    if (this.direction === 'right') {\n      native.style.right = 0;\n    } else {\n      native.style.left = 0;\n    }\n\n    let slot = document.createElement('slot');\n\n    const nativeInner = document.createElement('div');\n    nativeInner.classList.add('native-sliding-container-inner');\n    nativeInner.style.height = '100%';\n    nativeInner.style.position = 'absolute';\n    nativeInner.style.width = this.maxWidth;\n\n    nativeInner.appendChild(slot);\n    nativeInner.appendChild(this.getCloseButton());\n\n    native.appendChild(nativeInner);\n    this.wrapperDiv.appendChild(this.transparentDiv);\n    this.wrapperDiv.appendChild(native);\n    fragment.appendChild(this.wrapperDiv);\n\n    this.nativeElement = native;\n\n    return fragment;\n  }\n\n  /**\n   * Creates and returns a close button element.\n   * @returns {HTMLElement} The close button element.\n   */\n  getCloseButton() {\n    let closeButton = document.createElement('wje-button');\n    closeButton.setAttribute('part', 'close-button');\n    closeButton.style.position = 'absolute';\n    closeButton.style.top = '0';\n    closeButton.style.right = '0';\n    closeButton.style.zIndex = '1000';\n\n    let icon = document.createElement('wje-icon');\n    icon.setAttribute('slot', 'icon-only');\n    icon.setAttribute('name', 'x');\n    closeButton.appendChild(icon);\n\n    closeButton.addEventListener('click', () => {\n      this.close();\n    });\n\n    return closeButton;\n  }\n\n  /**\n   * Executes before drawing the element.\n   */\n  beforeDraw() {\n    this.animation?.cancel();\n    this.nativeAnimation?.cancel();\n    document.removeEventListener(this.trigger, this.triggerEvent);\n  }\n\n  /**\n   * Performs actions after the element is drawn on the screen.\n   * Attaches an event listener to the document based on the specified trigger.\n   * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n   * Calls the checkForVariant method with the current variant.\n   * @returns {Promise<void>} A promise that resolves after the actions are completed.\n   */\n  afterDraw() {\n    document.addEventListener(this.trigger, this.triggerEvent);\n\n    // if document width is on small screen set variant to over\n    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n      this.variant = 'over';\n    }\n\n    this.checkForVariant(this.variant);\n  }\n\n  getParentElement() {\n    let parentElement = this.parentElement;\n\n    if (!parentElement) {\n      parentElement = this.getRootNode().host;\n    }\n\n    return parentElement;\n  }\n\n  /**\n   * Checks for a specific variant and applies corresponding styles.\n   *\n   * @param {string} variant - The variant to check for.\n   */\n  checkForVariant(variant) {\n    if (variant === 'over') {\n      this.style.position = 'fixed';\n      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n      let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n      this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.style.top = topOfParrentElement + 'px';\n\n      const leftSibling = this.previousElementSibling;\n      const rightSibling = this.nextElementSibling;\n      const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n      const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n      if (this.direction === 'right') {\n        // attach to left sibling\n        if (leftSiblingBoundingbox) {\n          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n        } else {\n          this.style.left = parentElementBoundingbox.left + 'px';\n        }\n      } else {\n        // attach to right sibling\n        if (rightSiblingBoundingbox) {\n          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n        } else {\n          this.style.right =\n            window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the event based on the target element.\n   * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n   * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n   * @param {Event} e - The event object.\n   */\n  triggerEvent = async (e) => {\n    if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n      // same oppener event but different caller so just refresh inner content\n      await this.open(e);\n    } else {\n      // came caller so toggle\n      await this.toggle(e);\n    }\n\n    this._lastCaller = e.composedPath()[0];\n  };\n\n  /**\n   * Executes before the element is opened.\n   */\n  beforeOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function called after the element is opened.\n   */\n  afterOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Executes before closing the element.\n   */\n  beforeClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function that is called after the container is closed.\n   */\n  afterClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Animates the transition of the element's width from 0 to the maximum width or vice versa.\n   * @returns {Promise<void>} A promise that resolves when the animation is complete.\n   */\n  doAnimateTransition() {\n    const options = {\n      delay: 0,\n      endDelay: 0,\n      fill: 'forwards',\n      duration: +this.animationDuration,\n      iterationStart: 0,\n      iterations: 1,\n      direction: 'normal',\n      easing: this.animationEasing,\n    };\n\n    if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n      this.animation.cancel();\n      this.animation = null;\n    }\n\n    if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n      this.nativeAnimation.cancel();\n      this.nativeAnimation = null;\n    }\n\n    if (!this._isOpen) {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: 0,\n            },\n            {\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n      }\n    } else {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: this.maxWidth,\n            },\n            {\n              width: 0,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n          ],\n          options,\n        );\n      }\n    }\n\n    return new Promise((resolve, reject) => {\n      this.animation.onfinish = () => {\n        this._isOpen = !this._isOpen;\n        resolve();\n      };\n    });\n  }\n\n  /**\n   * Opens the container with an animation.\n   * @returns {Promise<void>} A promise that resolves when the container is opened.\n   */\n  async open(event) {\n    await Promise.resolve(this.beforeOpen(event)).then(async () => {\n      if (!this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeOpen', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterOpen(event)).then(() => {\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:open', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Closes the animation container.\n   *\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":["../experimental-packages/wje-sliding-container/sliding-container.element.js","../experimental-packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement } from '../../packages/wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - The direction of the SlidingContainer.\n * @property {string} variant - The variant of the SlidingContainer.\n * @property {string} screenBreakPoint - The screen break point of the SlidingContainer.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - The duration of the animation.\n * @property {string} animationEasing - The easing of the animation.\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n  /**\n   * Creates an instance of SlidingContainer.\n   * @class\n   */\n  constructor() {\n    super();\n\n    this._isOpen = false;\n    this._lastCaller = null;\n\n    this._resizeObserver = new ResizeObserver((entries) => {\n      for (let entry of entries) {\n        if (entry.contentBoxSize) {\n          if (this.drawingStatus < 3) return;\n\n          if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            if (this.variant !== 'over') {\n              this.variant = 'over';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          } else {\n            if (this.variant !== 'in-place') {\n              this.variant = 'in-place';\n            } else {\n              this.checkForVariant(this.variant);\n            }\n          }\n        }\n      }\n    });\n\n    this._resizeObserver.observe(document.documentElement);\n  }\n\n  set maxWidth(value) {\n    this.setAttribute('max-width', value);\n  }\n\n  get maxWidth() {\n    return this.getAttribute('max-width') ?? 'auto';\n  }\n\n  set maxHeight(value) {\n    this.setAttribute('max-height', value);\n  }\n\n  get maxHeight() {\n    return this.getAttribute('max-height') ?? 'auto';\n  }\n\n  set trigger(value) {\n    this.setAttribute('trigger', value);\n  }\n\n  get trigger() {\n    return this.getAttribute('trigger') ?? 'sliding-container';\n  }\n\n  set direction(value) {\n    this.setAttribute('direction', value);\n  }\n\n  get direction() {\n    return this.getAttribute('direction') ?? 'right';\n  }\n\n  set removeChildAfterClose(value) {\n    this.setAttribute('remove-child-after-close', value);\n  }\n\n  get removeChildAfterClose() {\n    return this.hasAttribute('remove-child-after-close') ?? false;\n  }\n\n  set variant(value) {\n    this.setAttribute('variant', value);\n  }\n\n  get variant() {\n    return this.getAttribute('variant') ?? 'in-place';\n  }\n\n  get screenBreakPoint() {\n    return this.getAttribute('screen-break-point');\n  }\n\n  set screenBreakPoint(value) {\n    this.setAttribute('screen-break-point', value);\n  }\n\n  get animationDuration() {\n    return this.getAttribute('animation-duration') ?? '500';\n  }\n\n  set animationDuration(value) {\n    this.setAttribute('animation-duration', value);\n  }\n\n  get animationEasing() {\n    return this.getAttribute('animation-easing') ?? 'linear';\n  }\n\n  set animationEasing(value) {\n    this.setAttribute('animation-easing', value);\n  }\n\n  get hasOpacity() {\n    return this.hasAttribute('has-opacity') ?? false;\n  }\n\n  get addToHeight() {\n    return this.getAttribute('add-to-height') ?? '0';\n  }\n\n  set addToHeight(value) {\n    this.setAttribute('add-to-height', value);\n  }\n\n  className = 'SlidingContainer';\n\n  /**\n   * Returns the observed attributes for the component.\n   * @returns {string[]}\n   */\n  static get observedAttributes() {\n    return [\n      'max-width',\n      'max-height',\n      'trigger',\n      'direction',\n      'variant',\n      'screen-break-point',\n      'remove-child-after-close',\n      'animation-duration',\n      'animation-easing',\n      'has-opacity',\n    ];\n  }\n\n  /**\n   * Returns the CSS styles for the component.\n   * @static\n   * @returns {CSSStyleSheet}\n   */\n  static get cssStyleSheet() {\n    return styles;\n  }\n\n  /**\n   * Sets up the attributes for the component.\n   */\n  setupAttributes() {\n    this.isShadowRoot = 'open';\n  }\n\n  /**\n   * Draws the component.\n   * @param {object} context The context for drawing.\n   * @param {object} store The store for drawing.\n   * @param {object} params The parameters for drawing.\n   * @returns {DocumentFragment}\n   */\n  draw(context, store, params) {\n    let fragment = document.createDocumentFragment();\n\n    this.style.position = 'relative';\n    this.style.height = '100%';\n    this.style.right = 'unset';\n    this.style.left = 'unset';\n\n    this.wrapperDiv = document.createElement('div');\n    this.wrapperDiv.classList.add('sliding-container-wrapper');\n\n    this.transparentDiv = document.createElement('div');\n    this.transparentDiv.classList.add('sliding-container-transparent');\n    if (this._isOpen) {\n      this.transparentDiv.style.width = this.maxWidth;\n    }\n\n    let native = document.createElement('div');\n    native.style.position = 'absolute';\n    native.style.width = 0;\n    if (this.hasOpacity) {\n      native.style.opacity = 0;\n    }\n\n    if (this._isOpen) {\n      native.style.width = this.maxWidth;\n      if (this.hasOpacity) {\n        native.style.opacity = 1;\n      }\n    }\n\n    native.style.height = '100%';\n\n    native.classList.add('native-sliding-container');\n    native.setAttribute('part', 'sliding-container');\n\n    if (this.direction === 'right') {\n      native.style.right = 0;\n    } else {\n      native.style.left = 0;\n    }\n\n    let slot = document.createElement('slot');\n\n    const nativeInner = document.createElement('div');\n    nativeInner.classList.add('native-sliding-container-inner');\n    nativeInner.style.height = '100%';\n    nativeInner.style.position = 'absolute';\n    nativeInner.style.width = this.maxWidth;\n\n    nativeInner.appendChild(slot);\n    nativeInner.appendChild(this.getCloseButton());\n\n    native.appendChild(nativeInner);\n    this.wrapperDiv.appendChild(this.transparentDiv);\n    this.wrapperDiv.appendChild(native);\n    fragment.appendChild(this.wrapperDiv);\n\n    this.nativeElement = native;\n\n    return fragment;\n  }\n\n  /**\n   * Creates and returns a close button element.\n   * @returns {HTMLElement} The close button element.\n   */\n  getCloseButton() {\n    let closeButton = document.createElement('wje-button');\n    closeButton.setAttribute('part', 'close-button');\n    closeButton.style.position = 'absolute';\n    closeButton.style.top = '0';\n    closeButton.style.right = '0';\n    closeButton.style.zIndex = '1000';\n\n    let icon = document.createElement('wje-icon');\n    icon.setAttribute('slot', 'icon-only');\n    icon.setAttribute('name', 'x');\n    closeButton.appendChild(icon);\n\n    closeButton.addEventListener('click', () => {\n      this.close();\n    });\n\n    return closeButton;\n  }\n\n  /**\n   * Executes before drawing the element.\n   */\n  beforeDraw() {\n    this.animation?.cancel();\n    this.nativeAnimation?.cancel();\n    document.removeEventListener(this.trigger, this.triggerEvent);\n  }\n\n  /**\n   * Performs actions after the element is drawn on the screen.\n   * Attaches an event listener to the document based on the specified trigger.\n   * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n   * Calls the checkForVariant method with the current variant.\n   * @returns {Promise<void>} A promise that resolves after the actions are completed.\n   */\n  afterDraw() {\n    document.addEventListener(this.trigger, this.triggerEvent);\n\n    // if document width is on small screen set variant to over\n    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n      this.variant = 'over';\n    }\n\n    this.checkForVariant(this.variant);\n  }\n\n  getParentElement() {\n    let parentElement = this.parentElement;\n\n    if (!parentElement) {\n      parentElement = this.getRootNode().host;\n    }\n\n    return parentElement;\n  }\n\n  /**\n   * Checks for a specific variant and applies corresponding styles.\n   * @param {string} variant The variant to check for.\n   */\n  checkForVariant(variant) {\n    if (variant === 'over') {\n      this.style.position = 'fixed';\n      let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n      let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n      let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n      let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n      this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n      this.style.top = topOfParrentElement + 'px';\n\n      const leftSibling = this.previousElementSibling;\n      const rightSibling = this.nextElementSibling;\n      const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n      const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n      if (this.direction === 'right') {\n        // attach to left sibling\n        if (leftSiblingBoundingbox) {\n          this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n        } else {\n          this.style.left = parentElementBoundingbox.left + 'px';\n        }\n      } else {\n        // attach to right sibling\n        if (rightSiblingBoundingbox) {\n          this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n        } else {\n          this.style.right =\n            window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n        }\n      }\n    }\n  }\n\n  /**\n   * Triggers the event based on the target element.\n   * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n   * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n   * @param {Event} e The event object.\n   */\n  triggerEvent = async (e) => {\n    if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n      // same oppener event but different caller so just refresh inner content\n      await this.open(e);\n    } else {\n      // came caller so toggle\n      await this.toggle(e);\n    }\n\n    this._lastCaller = e.composedPath()[0];\n  };\n\n  /**\n   * Executes before the element is opened.\n   */\n  beforeOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function called after the element is opened.\n   */\n  afterOpen(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Executes before closing the element.\n   */\n  beforeClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Callback function that is called after the container is closed.\n   */\n  afterClose(event) {\n    // Hook for extending behavior before the dialog opens\n  }\n\n  /**\n   * Animates the transition of the element's width from 0 to the maximum width or vice versa.\n   * @returns {Promise<void>} A promise that resolves when the animation is complete.\n   */\n  doAnimateTransition() {\n    const options = {\n      delay: 0,\n      endDelay: 0,\n      fill: 'forwards',\n      duration: +this.animationDuration,\n      iterationStart: 0,\n      iterations: 1,\n      direction: 'normal',\n      easing: this.animationEasing,\n    };\n\n    if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n      this.animation.cancel();\n      this.animation = null;\n    }\n\n    if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n      this.nativeAnimation.cancel();\n      this.nativeAnimation = null;\n    }\n\n    if (!this._isOpen) {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: 0,\n            },\n            {\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n          ],\n          options,\n        );\n      }\n    } else {\n      if (this.animation && this.nativeAnimation) {\n        this.animation.reverse();\n        this.nativeAnimation.reverse();\n      } else {\n        this.animation = this.transparentDiv.animate(\n          [\n            {\n              width: this.maxWidth,\n            },\n            {\n              width: 0,\n            },\n          ],\n          options,\n        );\n\n        this.nativeAnimation = this.nativeElement.animate(\n          [\n            {\n              ...(this.hasOpacity ? { opacity: 1 } : {}),\n              width: this.maxWidth,\n            },\n            {\n              ...(this.hasOpacity ? { opacity: 0 } : {}),\n              width: 0,\n            },\n          ],\n          options,\n        );\n      }\n    }\n\n    return new Promise((resolve, reject) => {\n      this.animation.onfinish = () => {\n        this._isOpen = !this._isOpen;\n        resolve();\n      };\n    });\n  }\n\n  /**\n   * Opens the container with an animation.\n   * @returns {Promise<void>} A promise that resolves when the container is opened.\n   */\n  async open(event) {\n    await Promise.resolve(this.beforeOpen(event)).then(async () => {\n      if (!this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeOpen', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterOpen(event)).then(() => {\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:open', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Closes the animation container.\n   * @returns {Promise<void>} A promise that resolves when the container is closed.\n   */\n  async close(event) {\n    await Promise.resolve(this.beforeClose(event)).then(async () => {\n      if (this._isOpen) {\n        this.dispatchEvent(\n          new CustomEvent('wje-sliding-container:beforeClose', {\n            bubbles: true,\n            composed: true,\n          }),\n        );\n\n        await this.doAnimateTransition();\n\n        await Promise.resolve(this.afterClose(event)).then(() => {\n          if (this.removeChildAfterClose) {\n            this.childNodes.forEach((child) => {\n              child.remove();\n            });\n          }\n\n          this.dispatchEvent(\n            new CustomEvent('wje-sliding-container:close', {\n              bubbles: true,\n              composed: true,\n            }),\n          );\n        });\n      }\n    });\n  }\n\n  /**\n   * Toggles the state of the element.\n   * If the element is open, it will be closed. If it is closed, it will be opened.\n   * @returns {Promise<void>} A promise that resolves when the toggle operation is complete.\n   */\n  async toggle(event) {\n    if (this._isOpen) {\n      await this.close(event);\n    } else {\n      await this.open(event);\n    }\n  }\n\n  componentCleanup() {\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":";;;;;AAkCe,MAAM,yBAAyB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKtD,cAAc;AACZ,UAAO;AAkHT,qCAAY;AAuNZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAe,OAAO,MAAM;AAC1B,UAAI,KAAK,eAAe,KAAK,gBAAgB,EAAE,aAAY,EAAG,CAAC,GAAG;AAEhE,cAAM,KAAK,KAAK,CAAC;AAAA,MACvB,OAAW;AAEL,cAAM,KAAK,OAAO,CAAC;AAAA,MACzB;AAEI,WAAK,cAAc,EAAE,aAAY,EAAG,CAAC;AAAA,IACtC;AAjVC,SAAK,UAAU;AACf,SAAK,cAAc;AAEnB,SAAK,kBAAkB,IAAI,eAAe,CAAC,YAAY;AACrD,eAAS,SAAS,SAAS;AACzB,YAAI,MAAM,gBAAgB;AACxB,cAAI,KAAK,gBAAgB,EAAG;AAE5B,cAAI,KAAK,oBAAoB,OAAO,cAAc,KAAK,kBAAkB;AACvE,gBAAI,KAAK,YAAY,QAAQ;AAC3B,mBAAK,UAAU;AAAA,YAC7B,OAAmB;AACL,mBAAK,gBAAgB,KAAK,OAAO;AAAA,YAC/C;AAAA,UACA,OAAiB;AACL,gBAAI,KAAK,YAAY,YAAY;AAC/B,mBAAK,UAAU;AAAA,YAC7B,OAAmB;AACL,mBAAK,gBAAgB,KAAK,OAAO;AAAA,YAC/C;AAAA,UACA;AAAA,QACA;AAAA,MACA;AAAA,IACA,CAAK;AAED,SAAK,gBAAgB,QAAQ,SAAS,eAAe;AAAA,EACzD;AAAA,EAEE,IAAI,SAAS,OAAO;AAClB,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA,EAEE,IAAI,WAAW;AACb,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EAC7C;AAAA,EAEE,IAAI,UAAU,OAAO;AACnB,SAAK,aAAa,cAAc,KAAK;AAAA,EACzC;AAAA,EAEE,IAAI,YAAY;AACd,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAC9C;AAAA,EAEE,IAAI,QAAQ,OAAO;AACjB,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA,EAEE,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA,EAEE,IAAI,UAAU,OAAO;AACnB,SAAK,aAAa,aAAa,KAAK;AAAA,EACxC;AAAA,EAEE,IAAI,YAAY;AACd,WAAO,KAAK,aAAa,WAAW,KAAK;AAAA,EAC7C;AAAA,EAEE,IAAI,sBAAsB,OAAO;AAC/B,SAAK,aAAa,4BAA4B,KAAK;AAAA,EACvD;AAAA,EAEE,IAAI,wBAAwB;AAC1B,WAAO,KAAK,aAAa,0BAA0B,KAAK;AAAA,EAC5D;AAAA,EAEE,IAAI,QAAQ,OAAO;AACjB,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA,EAEE,IAAI,UAAU;AACZ,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA,EAEE,IAAI,mBAAmB;AACrB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACjD;AAAA,EAEE,IAAI,iBAAiB,OAAO;AAC1B,SAAK,aAAa,sBAAsB,KAAK;AAAA,EACjD;AAAA,EAEE,IAAI,oBAAoB;AACtB,WAAO,KAAK,aAAa,oBAAoB,KAAK;AAAA,EACtD;AAAA,EAEE,IAAI,kBAAkB,OAAO;AAC3B,SAAK,aAAa,sBAAsB,KAAK;AAAA,EACjD;AAAA,EAEE,IAAI,kBAAkB;AACpB,WAAO,KAAK,aAAa,kBAAkB,KAAK;AAAA,EACpD;AAAA,EAEE,IAAI,gBAAgB,OAAO;AACzB,SAAK,aAAa,oBAAoB,KAAK;AAAA,EAC/C;AAAA,EAEE,IAAI,aAAa;AACf,WAAO,KAAK,aAAa,aAAa,KAAK;AAAA,EAC/C;AAAA,EAEE,IAAI,cAAc;AAChB,WAAO,KAAK,aAAa,eAAe,KAAK;AAAA,EACjD;AAAA,EAEE,IAAI,YAAY,OAAO;AACrB,SAAK,aAAa,iBAAiB,KAAK;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAQE,WAAW,qBAAqB;AAC9B,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,WAAW,gBAAgB;AACzB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKE,kBAAkB;AAChB,SAAK,eAAe;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE,KAAK,SAAS,OAAO,QAAQ;AAC3B,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,QAAQ;AACnB,SAAK,MAAM,OAAO;AAElB,SAAK,aAAa,SAAS,cAAc,KAAK;AAC9C,SAAK,WAAW,UAAU,IAAI,2BAA2B;AAEzD,SAAK,iBAAiB,SAAS,cAAc,KAAK;AAClD,SAAK,eAAe,UAAU,IAAI,+BAA+B;AACjE,QAAI,KAAK,SAAS;AAChB,WAAK,eAAe,MAAM,QAAQ,KAAK;AAAA,IAC7C;AAEI,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,MAAM,WAAW;AACxB,WAAO,MAAM,QAAQ;AACrB,QAAI,KAAK,YAAY;AACnB,aAAO,MAAM,UAAU;AAAA,IAC7B;AAEI,QAAI,KAAK,SAAS;AAChB,aAAO,MAAM,QAAQ,KAAK;AAC1B,UAAI,KAAK,YAAY;AACnB,eAAO,MAAM,UAAU;AAAA,MAC/B;AAAA,IACA;AAEI,WAAO,MAAM,SAAS;AAEtB,WAAO,UAAU,IAAI,0BAA0B;AAC/C,WAAO,aAAa,QAAQ,mBAAmB;AAE/C,QAAI,KAAK,cAAc,SAAS;AAC9B,aAAO,MAAM,QAAQ;AAAA,IAC3B,OAAW;AACL,aAAO,MAAM,OAAO;AAAA,IAC1B;AAEI,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,gCAAgC;AAC1D,gBAAY,MAAM,SAAS;AAC3B,gBAAY,MAAM,WAAW;AAC7B,gBAAY,MAAM,QAAQ,KAAK;AAE/B,gBAAY,YAAY,IAAI;AAC5B,gBAAY,YAAY,KAAK,gBAAgB;AAE7C,WAAO,YAAY,WAAW;AAC9B,SAAK,WAAW,YAAY,KAAK,cAAc;AAC/C,SAAK,WAAW,YAAY,MAAM;AAClC,aAAS,YAAY,KAAK,UAAU;AAEpC,SAAK,gBAAgB;AAErB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,iBAAiB;AACf,QAAI,cAAc,SAAS,cAAc,YAAY;AACrD,gBAAY,aAAa,QAAQ,cAAc;AAC/C,gBAAY,MAAM,WAAW;AAC7B,gBAAY,MAAM,MAAM;AACxB,gBAAY,MAAM,QAAQ;AAC1B,gBAAY,MAAM,SAAS;AAE3B,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,WAAW;AACrC,SAAK,aAAa,QAAQ,GAAG;AAC7B,gBAAY,YAAY,IAAI;AAE5B,gBAAY,iBAAiB,SAAS,MAAM;AAC1C,WAAK,MAAO;AAAA,IAClB,CAAK;AAED,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKE,aAAa;;AACX,eAAK,cAAL,mBAAgB;AAChB,eAAK,oBAAL,mBAAsB;AACtB,aAAS,oBAAoB,KAAK,SAAS,KAAK,YAAY;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE,YAAY;AACV,aAAS,iBAAiB,KAAK,SAAS,KAAK,YAAY;AAGzD,QAAI,KAAK,oBAAoB,OAAO,cAAc,KAAK,kBAAkB;AACvE,WAAK,UAAU;AAAA,IACrB;AAEI,SAAK,gBAAgB,KAAK,OAAO;AAAA,EACrC;AAAA,EAEE,mBAAmB;AACjB,QAAI,gBAAgB,KAAK;AAEzB,QAAI,CAAC,eAAe;AAClB,sBAAgB,KAAK,YAAW,EAAG;AAAA,IACzC;AAEI,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,gBAAgB,SAAS;AACvB,QAAI,YAAY,QAAQ;AACtB,WAAK,MAAM,WAAW;AACtB,UAAI,yBAAyB,OAAO,iBAAiB,KAAK,iBAAgB,CAAE;AAC5E,UAAI,2BAA2B,KAAK,iBAAgB,EAAG,sBAAuB;AAC9E,UAAI,yBAAyB,WAAW,uBAAuB,MAAM;AAErE,UAAI,sBAAsB,WAAW,uBAAuB,GAAG;AAE/D,WAAK,MAAM,SAAS,yBAAyB,CAAC,KAAK,cAAc;AACjE,WAAK,WAAW,MAAM,SAAS,yBAAyB,CAAC,KAAK,cAAc;AAC5E,WAAK,MAAM,MAAM,sBAAsB;AAEvC,YAAM,cAAc,KAAK;AACzB,YAAM,eAAe,KAAK;AAC1B,YAAM,yBAAyB,2CAAa;AAC5C,YAAM,0BAA0B,6CAAc;AAE9C,UAAI,KAAK,cAAc,SAAS;AAE9B,YAAI,wBAAwB;AAC1B,eAAK,MAAM,OAAO,uBAAuB,OAAO,uBAAuB,QAAQ;AAAA,QACzF,OAAe;AACL,eAAK,MAAM,OAAO,yBAAyB,OAAO;AAAA,QAC5D;AAAA,MACA,OAAa;AAEL,YAAI,yBAAyB;AAC3B,eAAK,MAAM,QAAQ,OAAO,aAAa,wBAAwB,OAAO;AAAA,QAChF,OAAe;AACL,eAAK,MAAM,QACT,OAAO,cAAc,yBAAyB,OAAO,yBAAyB,SAAS;AAAA,QACnG;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAuBE,WAAW,OAAO;AAAA,EAEpB;AAAA;AAAA;AAAA;AAAA,EAKE,UAAU,OAAO;AAAA,EAEnB;AAAA;AAAA;AAAA;AAAA,EAKE,YAAY,OAAO;AAAA,EAErB;AAAA;AAAA;AAAA;AAAA,EAKE,WAAW,OAAO;AAAA,EAEpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,sBAAsB;;AACpB,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU,CAAC,KAAK;AAAA,MAChB,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK;AAAA,IACd;AAED,QAAI,KAAK,eAAa,gBAAK,cAAL,mBAAgB,WAAhB,mBAAwB,YAAW,KAAK,gBAAgB;AAC5E,WAAK,UAAU,OAAQ;AACvB,WAAK,YAAY;AAAA,IACvB;AAEI,QAAI,KAAK,qBAAmB,gBAAK,oBAAL,mBAAsB,WAAtB,mBAA8B,YAAW,KAAK,eAAe;AACvF,WAAK,gBAAgB,OAAQ;AAC7B,WAAK,kBAAkB;AAAA,IAC7B;AAEI,QAAI,CAAC,KAAK,SAAS;AACjB,UAAI,KAAK,aAAa,KAAK,iBAAiB;AAC1C,aAAK,UAAU,QAAS;AACxB,aAAK,gBAAgB,QAAS;AAAA,MACtC,OAAa;AACL,aAAK,YAAY,KAAK,eAAe;AAAA,UACnC;AAAA,YACE;AAAA,cACE,OAAO;AAAA,YACR;AAAA,YACD;AAAA,cACE,OAAO,KAAK;AAAA,YACb;AAAA,UACF;AAAA,UACD;AAAA,QACD;AAED,aAAK,kBAAkB,KAAK,cAAc;AAAA,UACxC;AAAA,YACE;AAAA,cACE,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO;AAAA,YACR;AAAA,YACD;AAAA,cACE,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO,KAAK;AAAA,YACb;AAAA,UACF;AAAA,UACD;AAAA,QACD;AAAA,MACT;AAAA,IACA,OAAW;AACL,UAAI,KAAK,aAAa,KAAK,iBAAiB;AAC1C,aAAK,UAAU,QAAS;AACxB,aAAK,gBAAgB,QAAS;AAAA,MACtC,OAAa;AACL,aAAK,YAAY,KAAK,eAAe;AAAA,UACnC;AAAA,YACE;AAAA,cACE,OAAO,KAAK;AAAA,YACb;AAAA,YACD;AAAA,cACE,OAAO;AAAA,YACR;AAAA,UACF;AAAA,UACD;AAAA,QACD;AAED,aAAK,kBAAkB,KAAK,cAAc;AAAA,UACxC;AAAA,YACE;AAAA,cACE,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO,KAAK;AAAA,YACb;AAAA,YACD;AAAA,cACE,GAAI,KAAK,aAAa,EAAE,SAAS,EAAC,IAAK,CAAA;AAAA,cACvC,OAAO;AAAA,YACR;AAAA,UACF;AAAA,UACD;AAAA,QACD;AAAA,MACT;AAAA,IACA;AAEI,WAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,WAAK,UAAU,WAAW,MAAM;AAC9B,aAAK,UAAU,CAAC,KAAK;AACrB,gBAAS;AAAA,MACV;AAAA,IACP,CAAK;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,MAAM,KAAK,OAAO;AAChB,UAAM,QAAQ,QAAQ,KAAK,WAAW,KAAK,CAAC,EAAE,KAAK,YAAY;AAC7D,UAAI,CAAC,KAAK,SAAS;AACjB,aAAK;AAAA,UACH,IAAI,YAAY,oCAAoC;AAAA,YAClD,SAAS;AAAA,YACT,UAAU;AAAA,UACtB,CAAW;AAAA,QACF;AAED,cAAM,KAAK,oBAAqB;AAEhC,cAAM,QAAQ,QAAQ,KAAK,UAAU,KAAK,CAAC,EAAE,KAAK,MAAM;AACtD,eAAK;AAAA,YACH,IAAI,YAAY,8BAA8B;AAAA,cAC5C,SAAS;AAAA,cACT,UAAU;AAAA,YACxB,CAAa;AAAA,UACF;AAAA,QACX,CAAS;AAAA,MACT;AAAA,IACA,CAAK;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAME,MAAM,MAAM,OAAO;AACjB,UAAM,QAAQ,QAAQ,KAAK,YAAY,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9D,UAAI,KAAK,SAAS;AAChB,aAAK;AAAA,UACH,IAAI,YAAY,qCAAqC;AAAA,YACnD,SAAS;AAAA,YACT,UAAU;AAAA,UACtB,CAAW;AAAA,QACF;AAED,cAAM,KAAK,oBAAqB;AAEhC,cAAM,QAAQ,QAAQ,KAAK,WAAW,KAAK,CAAC,EAAE,KAAK,MAAM;AACvD,cAAI,KAAK,uBAAuB;AAC9B,iBAAK,WAAW,QAAQ,CAAC,UAAU;AACjC,oBAAM,OAAQ;AAAA,YAC5B,CAAa;AAAA,UACb;AAEU,eAAK;AAAA,YACH,IAAI,YAAY,+BAA+B;AAAA,cAC7C,SAAS;AAAA,cACT,UAAU;AAAA,YACxB,CAAa;AAAA,UACF;AAAA,QACX,CAAS;AAAA,MACT;AAAA,IACA,CAAK;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOE,MAAM,OAAO,OAAO;AAClB,QAAI,KAAK,SAAS;AAChB,YAAM,KAAK,MAAM,KAAK;AAAA,IAC5B,OAAW;AACL,YAAM,KAAK,KAAK,KAAK;AAAA,IAC3B;AAAA,EACA;AAAA,EAEE,mBAAmB;;AACjB,eAAK,oBAAL,mBAAsB;AACtB,SAAK,kBAAkB;AAAA,EAC3B;AACA;ACtkBA,iBAAiB,OAAO,yBAAyB,gBAAgB;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.135",
+  "version": "0.1.137",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",

package/dist/packages/index.d.ts

@@ -1,100 +0,0 @@
-export { default as SlidingContainer } from '../experimental-packages/wje-sliding-container/sliding-container.js';
-export { fetchAndParseCSS } from './utils/animations.js';
-export { formatDate } from './utils/date.js';
-export { event } from './utils/event.js';
-export { Localizer } from './utils/localize.js';
-export { skSk } from './translations/sk-sk.js';
-export { enGb } from './translations/en-gb.js';
-export { WjePermissionsApi } from './utils/permissions-api.js';
-export { default as Accordion } from './wje-accordion/accordion.js';
-export { default as AccordionItem } from './wje-accordion-item/accordion-item.js';
-export { default as Animation } from './wje-animation/animation.js';
-export { default as Aside } from './wje-aside/aside.js';
-export { default as Avatar } from './wje-avatar/avatar.js';
-export { default as Badge } from './wje-badge/badge.js';
-export { default as Breadcrumb } from './wje-breadcrumb/breadcrumb.js';
-export { default as Breadcrumbs } from './wje-breadcrumbs/breadcrumbs.js';
-export { default as Button } from './wje-button/button.js';
-export { default as ButtonGroup } from './wje-button-group/button-group.js';
-export { default as Card } from './wje-card/card.js';
-export { default as CardContent } from './wje-card-content/card-content.js';
-export { default as CardControls } from './wje-card-controls/card-controls.js';
-export { default as CardHeader } from './wje-card-header/card-header.js';
-export { default as CardSubtitle } from './wje-card-subtitle/card-subtitle.js';
-export { default as CardTitle } from './wje-card-title/card-title.js';
-export { default as Carousel } from './wje-carousel/carousel.js';
-export { default as CarouselItem } from './wje-carousel-item/carousel-item.js';
-export { default as Checkbox } from './wje-checkbox/checkbox.js';
-export { default as Chip } from './wje-chip/chip.js';
-export { default as Col } from './wje-col/col.js';
-export { default as ColorPicker } from './wje-color-picker/color-picker.js';
-export { default as Container } from './wje-container/container.js';
-export { default as CopyButton } from './wje-copy-button/copy-button.js';
-export { default as Dialog } from './wje-dialog/dialog.js';
-export { default as Divider } from './wje-divider/divider.js';
-export { default as Dropdown } from './wje-dropdown/dropdown.js';
-export { default as WJElement } from './wje-element/element.js';
-export { default as FileUpload } from './wje-file-upload/file-upload.js';
-export { default as FileUploadItem } from './wje-file-upload-item/file-upload-item.js';
-export { default as Footer } from './wje-footer/footer.js';
-export { default as FormatDigital } from './wje-format-digital/format-digital.js';
-export { default as Grid } from './wje-grid/grid.js';
-export { default as Header } from './wje-header/header.js';
-export { default as Icon } from './wje-icon/icon.js';
-export { default as IconPicker } from './wje-icon-picker/icon-picker.js';
-export { default as Img } from './wje-img/img.js';
-export { default as ImgComparer } from './wje-img-comparer/img-comparer.js';
-export { default as InfiniteScroll } from './wje-infinite-scroll/infinite-scroll.js';
-export { default as Input } from './wje-input/input.js';
-export { default as InputFile } from './wje-input-file/input-file.js';
-export { default as Item } from './wje-item/item.js';
-export { default as Kanban } from './wje-kanban/kanban.js';
-export { default as Label } from './wje-label/label.js';
-export { default as List } from './wje-list/list.js';
-export { default as Main } from './wje-main/main.js';
-export { default as Masonry } from './wje-masonry/masonry.js';
-export { default as Menu } from './wje-menu/menu.js';
-export { default as MenuButton } from './wje-menu-button/menu-button.js';
-export { default as MenuItem } from './wje-menu-item/menu-item.js';
-export { default as MenuLabel } from './wje-menu-label/menu-label.js';
-export { default as Option } from './wje-option/option.js';
-export { default as Options } from './wje-options/options.js';
-export { default as Orgchart } from './wje-orgchart/orgchart.js';
-export { default as OrgchartGroup } from './wje-orgchart-group/orgchart-group.js';
-export { default as OrgchartItem } from './wje-orgchart-item/orgchart-item.js';
-export { default as Popup } from './wje-popup/popup.js';
-export { default as ProgressBar } from './wje-progress-bar/progress-bar.js';
-export { default as QrCode } from './wje-qr-code/qr-code.js';
-export { default as Radio } from './wje-radio/radio.js';
-export { default as RadioGroup } from './wje-radio-group/radio-group.js';
-export { default as Rate } from './wje-rate/rate.js';
-export { default as RelativeTime } from './wje-relative-time/relative-time.js';
-export { default as Reorder } from './wje-reorder/reorder.js';
-export { default as ReorderDropzone } from './wje-reorder-dropzone/reorder-dropzone.js';
-export { default as ReorderHandle } from './wje-reorder-handle/reorder-handle.js';
-export { default as ReorderItem } from './wje-reorder-item/reorder-item.js';
-export { default as Route } from './wje-route/route.js';
-export { default as Routerx } from './wje-router/router.js';
-export { default as RouterLink } from './wje-router-link/router-link.js';
-export { default as RouterOutlet } from './wje-router-outlet/router-outlet.js';
-export { default as Row } from './wje-row/row.js';
-export { default as Select } from './wje-select/select.js';
-export { default as Slider } from './wje-slider/slider.js';
-export { default as SplitView } from './wje-split-view/split-view.js';
-export { default as Status } from './wje-status/status.js';
-export { default as Step } from './wje-step/step.js';
-export { default as Stepper } from './wje-stepper/stepper.js';
-export { default as Tab } from './wje-tab/tab.js';
-export { default as TabGroup } from './wje-tab-group/tab-group.js';
-export { default as TabPanel } from './wje-tab-panel/tab-panel.js';
-export { default as Textarea } from './wje-textarea/textarea.js';
-export { default as Thumbnail } from './wje-thumbnail/thumbnail.js';
-export { default as Timeline } from './wje-timeline/timeline.js';
-export { default as TimelineItem } from './wje-timeline-item/timeline-item.js';
-export { default as Toast } from './wje-toast/toast.js';
-export { default as Toggle } from './wje-toggle/toggle.js';
-export { default as Toolbar } from './wje-toolbar/toolbar.js';
-export { default as ToolbarAction } from './wje-toolbar-action/toolbar-action.js';
-export { default as Tooltip } from './wje-tooltip/tooltip.js';
-export { default as VisuallyHidden } from './wje-visually-hidden/visually-hidden.js';
-export { defaultStoreActions, store } from './wje-store/store.js';

package/dist/packages/localize/localize.d.ts

@@ -1,17 +0,0 @@
-export function registerTranslation(...translation: any[]): void;
-export class LocalizerDefault {
-    constructor(element: any);
-    element: any;
-    lang: any;
-    dir: any;
-    get languages(): any;
-    setLanguage(): void;
-    currentLang: any;
-    translate(key: any): any;
-    translatePlural(key: any, count?: number, type?: string): any;
-    formatNumber(number: any, options: any): string;
-    formatDate(date: any): string;
-    relativeTime(lang: any, value?: number, unit?: string, options?: {
-        numeric: string;
-    }): string;
-}

package/dist/packages/translations/en-gb.d.ts

@@ -1,13 +0,0 @@
-export const enGb: {
-    code: string;
-    name: string;
-    dir: string;
-    welcome: string;
-    'wj.file.upload.button': string;
-    'wj.file.upload.uploaded': string;
-    'wj.file.upload.from': string;
-    'wj.stepper.button.next': string;
-    'wj.stepper.button.finish': string;
-    'wj.stepper.button.previous': string;
-    'wj.stepper.step': string;
-};

package/dist/packages/translations/sk-sk.d.ts

@@ -1,13 +0,0 @@
-export const skSk: {
-    code: string;
-    name: string;
-    dir: string;
-    welcome: string;
-    'wj.file.upload.button': string;
-    'wj.file.upload.uploaded': string;
-    'wj.file.upload.from': string;
-    'wj.stepper.button.next': string;
-    'wj.stepper.button.finish': string;
-    'wj.stepper.button.previous': string;
-    'wj.stepper.step': string;
-};

package/dist/packages/utils/animations.d.ts

@@ -1,2 +0,0 @@
-export function fetchAndParseCSS(css: any): Promise<any[]>;
-export let animations: any[];

package/dist/packages/utils/date.d.ts

@@ -1 +0,0 @@
-export function formatDate(input: any, format: any): any;

package/dist/packages/utils/element-utils.d.ts

@@ -1,46 +0,0 @@
-export class WjElementUtils {
-    /**
-     * This function creates an element.
-     * @param element : HTMLElement - The element value.
-     * @param object : Object - The object value.
-     */
-    static setAttributesToElement(element: any, object: any): void;
-    /**
-     * This function gets the attributes from an element.
-     * @param {string|HTMLElement} el The element or selector to retrieve attributes from.
-     * @returns {object} - An object containing the element's attributes as key-value pairs.
-     */
-    static getAttributes(el: string | HTMLElement): object;
-    /**
-     * This function gets the events from an element.
-     * @param {string|HTMLElement} el The element or selector to retrieve events from.
-     * @returns {Map<any, any>} - The map value.
-     */
-    static getEvents(el: string | HTMLElement): Map<any, any>;
-    /**
-     * This function converts an object to a string.
-     * @param {object} object The object to convert.
-     * @returns {string} - The string value.
-     */
-    static attributesToString(object: object): string;
-    /**
-     * This function checks if the slot exists.
-     * @param {string|HTMLElement} el The element or selector to check for slots.
-     * @param slotName The slot name to check for.
-     * @returns {boolean} - The boolean value.
-     */
-    static hasSlot(el: string | HTMLElement, slotName?: any): boolean;
-    /**
-     * This function checks if the slot has content.
-     * @param {string|HTMLElement} el The element or selector to check for slot content
-     * @param slotName The slot name to check for.
-     * @returns {boolean} - The boolean value.
-     */
-    static hasSlotContent(el: string | HTMLElement, slotName?: any): boolean;
-    /**
-     * This function converts a string to a boolean.
-     * @param {string | object} value The value to convert to a boolean. If the value is a boolean, it will be returned as is.
-     * @returns {boolean} - The boolean value.
-     */
-    static stringToBoolean(value: string | object): boolean;
-}

package/dist/packages/utils/event.d.ts

@@ -1,67 +0,0 @@
-export let event: Event;
-declare class Event {
-    customEventStorage: any[];
-    /**
-     * Dispatch custom event to the element with the specified event name and detail.
-     * @param element
-     * @param event
-     * @param detail
-     */
-    dispatchCustomEvent(element: any, event: any, detail: any): void;
-    /**
-     * Find record by element in the storage.
-     * @param element
-     * @returns {*}
-     */
-    findRecordByElement(element: any): any;
-    /**
-     * Add listener to the element. If the element is an array, the listener will be added to all elements in the array.
-     * @param element
-     * @param originalEvent
-     * @param event
-     * @param listener
-     * @param options
-     */
-    addListener(element: any, originalEvent: any, event: any, listener: any, options: any): void;
-    /**
-     * Write record to the storage.
-     * @param element
-     * @param originalEvent
-     * @param event
-     * @param listener
-     * @param options
-     */
-    writeRecord(element: any, originalEvent: any, event: any, listener: any, options: any): void;
-    /**
-     * Performs a deep equality check between two objects.
-     * @param x The first object to compare.
-     * @param y The second object to compare.
-     * @returns - Returns `true` if the objects are deeply equal, `false` otherwise.
-     */
-    deepEqual(x: any, y: any): any;
-    /**
-     * Check if the listener already exists on the element.
-     * @param element
-     * @param event
-     * @param listener
-     * @returns
-     */
-    listenerExists(element: any, event: any, listener: any): any;
-    /**
-     * Remove listener from the element and delete the listener from the custom event storage.
-     * @param element
-     * @param originalEvent
-     * @param event
-     * @param listener
-     * @param options
-     */
-    removeListener(element: any, originalEvent: any, event: any, listener: any, options: any): void;
-    /**
-     * Remove all event listeners from the specified element and delete the element from the custom event storage.
-     * @param {HTMLElement} element The element from which all listeners will be removed.
-     */
-    removeElement(element: HTMLElement): void;
-    createPromiseFromEvent(element: any, event: any): Promise<any>;
-    #private;
-}
-export {};

package/dist/packages/utils/localize.d.ts

@@ -1,4 +0,0 @@
-import { LocalizerDefault } from '../localize/localize.js';
-export class Localizer extends LocalizerDefault {
-    static registerTranslation(...translation: any[]): void;
-}

package/dist/packages/utils/permissions-api.d.ts

@@ -1,34 +0,0 @@
-export class WjePermissionsApi {
-    static _permissionKey: string;
-    /**
-     * Sets the permission key.
-     * @param value
-     */
-    static set permissionKey(value: any | string);
-    /**
-     * Returns the permission key.
-     * @returns {*|string}
-     */
-    static get permissionKey(): any | string;
-    /**
-     * Sets the permissions.
-     * @param value
-     */
-    static set permissions(value: string[]);
-    /**
-     * Returns the permissions.
-     * @returns {string[]}
-     */
-    static get permissions(): string[];
-    /**
-     * Checks if the permission is included.
-     * @param key
-     * @returns {boolean}
-     */
-    static includesKey(key: any): boolean;
-    /**
-     * Checks if the permission is fulfilled.
-     * @returns {boolean}
-     */
-    static isPermissionFulfilled(permissions: any): boolean;
-}

package/dist/packages/utils/utils.d.ts

@@ -1 +0,0 @@
-export function bool(v: any): boolean;

package/dist/packages/wje-accordion/accordion.d.ts

@@ -1,2 +0,0 @@
-import { default as Accordion } from './accordion.element.js';
-export default Accordion;

package/dist/packages/wje-accordion/accordion.element.d.ts

@@ -1,72 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary This class represents an Accordion element, extending the WJElement class.
- * @documentation https://elements.webjet.sk/components/accordion
- * @status stable
- * @augments WJElement
- * @attribute {boolean} multiple - The multiple attribute for the accordion.
- * @attribute {number} index - The index attribute for the accordion.
- * @attribute {boolean} disabled - The disabled attribute for the accordion.
- * @attribute {boolean} expanded - The expanded attribute for the accordion.
- * @slot - The accordion main content.
- * //@fires [wje-accordion-item:open] The event fired when the accordion item is opened.
- * @tag wje-accordion
- */
-export default class Accordion extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {object} The styles for the Accordion element.
-     */
-    static get cssStyleSheet(): object;
-    /**
-     * Getter for the observed attributes.
-     * @returns {Array} An array containing the name of the observed attribute.
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Sets the `multiple` attribute on the element.
-     * If `true`, the `multiple` attribute is added.
-     * If `false`, the `multiple` attribute is removed.
-     * @param {boolean} value A boolean value indicating whether the element should support multiple selections.
-     */
-    set multiple(value: boolean);
-    /**
-     * Determines whether the element has the `multiple` attribute.
-     * @returns {boolean} `true` if the `multiple` attribute is present, otherwise `false`.
-     */
-    get multiple(): boolean;
-    /**
-     * Sets the value of the `index` attribute.
-     * @param {number|string} value The value to set for the `index` attribute.
-     */
-    set index(value: number | string);
-    /**
-     * Retrieves the value of the `index` attribute as a number.
-     * @returns {number} The numerical value of the `index` attribute, or `0` if the attribute is not set.
-     */
-    get index(): number;
-    /**
-     * Method to run before the element is drawn.
-     */
-    beforeDraw(): void;
-    /**
-     * Method to draw the Accordion element.
-     * @returns {object} The document fragment containing the drawn element.
-     */
-    draw(): object;
-    slotEl: HTMLSlotElement;
-    /**
-     * Method to run after the element is drawn.
-     */
-    afterDraw(): void;
-    /**
-     * Method to run after the element is drawn.
-     * @param exception
-     */
-    collapseAll(exception: any): void;
-    /**
-     * Method to get the accordions.
-     * @returns {Array} An array containing the accordions.
-     */
-    getAccordions(): any[];
-}

package/dist/packages/wje-accordion-item/accordion-item.d.ts

@@ -1,2 +0,0 @@
-import { default as AccordionItem } from './accordion-item.element.js';
-export default AccordionItem;

package/dist/packages/wje-accordion-item/accordion-item.element.d.ts

@@ -1,40 +0,0 @@
-import { default as WJElement } from '../wje-element/element.js';
-/**
- * @summary This class represents an Accordion Item element, extending the WJElement class.
- * @documentation https://elements.webjet.sk/components/accordion-item
- * @status stable
- * @augments WJElement
- * @slot - The accordion item main content.
- * @tag wje-accordion
- */
-export default class AccordionItem extends WJElement {
-    /**
-     * Getter for the CSS stylesheet.
-     * @returns {object} The styles for the Accordion Item element.
-     */
-    static get cssStyleSheet(): object;
-    /**
-     * Getter for the observed attributes.
-     * @returns {Array} An array containing the name of the observed attribute.
-     */
-    static get observedAttributes(): any[];
-    /**
-     * Method to draw the Accordion Item element. This method returns a document fragment containing the drawn element.
-     * @returns {object} The document fragment containing the drawn element.
-     */
-    draw(): object;
-    headline: HTMLDivElement;
-    toggle: HTMLSlotElement;
-    /**
-     * Method to execute after the Accordion Item element is drawn.
-     */
-    afterDraw(): void;
-    /**
-     * Method to handle the attribute changes.
-     */
-    collapse: () => void;
-    /**
-     * Method to handle the attribute changes.
-     */
-    expand: () => void;
-}

package/dist/packages/wje-animation/animation.d.ts

@@ -1,2 +0,0 @@
-import { default as Animation } from './animation.element.js';
-export default Animation;