wj-elements 0.1.130 → 0.1.131

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

@@ -0,0 +1 @@
+{"version":3,"file":"wje-sliding-container.js","sources":["../experimental-packages/wje-sliding-container/sliding-container.element.js","../experimental-packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement } from '../../packages/wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n *\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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"}

package/dist/wje-split-view.js

@@ -27,7 +27,7 @@ function drag(container, options) {
     move(options.initialEvent);
   }
 }
-const styles = "/*\n[ WJ Split View ]\n*/\n\n:host {\n    --wje-split-view-divider-area: 12px;\n    --wje-split-view-divider-width: 4px;\n    --wje-split-view-min: 0%;\n    --wje-split-view-max: 100%;\n    --wje-split-view-calc-a: 50%;\n    --wje-split-view-calc-b: 50%;\n    --wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));\n    --wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));\n\n    --wje-split-view-divider-background: var(--wje-border-color);\n    --wje-split-view-divider-size: 4px;\n    height: 100%;\n    width: 100%;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n:host(:not([vertical])) ::slotted([slot='start']) {\n    width: var(--wje-split-view-clamp-a);\n}\n\n:host(:not([vertical])) ::slotted([slot='end']) {\n    width: var(--wje-split-view-clamp-b);\n}\n\n:host([vertical]) ::slotted([slot='start']) {\n    height: var(--wje-split-view-clamp-a);\n    width: 100%;\n}\n\n:host([vertical]) ::slotted([slot='end']) {\n    height: var(--wje-split-view-clamp-b);\n    width: 100%;\n}\n\n.native-split-view {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    overflow: hidden;\n    position: relative;\n}\n\n:host([vertical]) .native-split-view {\n    flex-direction: column;\n}\n\n.wje-divider {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n    background-color: var(--wje-split-view-divider-background);\n    height: 100%;\n    width: var(--wje-split-view-divider-size);\n    cursor: col-resize;\n    &:after {\n        display: flex;\n        content: '';\n        position: absolute;\n        height: 100%;\n        left: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        width: var(--wje-split-view-divider-area);\n    }\n}\n\n:host([vertical]) .wje-divider {\n    height: var(--wje-split-view-divider-size);\n    width: 100%;\n    cursor: row-resize;\n    &:after {\n        width: 100%;\n        top: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        height: var(--wje-split-view-divider-area);\n    }\n}\n";
+const styles = "/*\n[ WJ Split View ]\n*/\n\n:host {\n    --wje-split-view-divider-area: 12px;\n    --wje-split-view-divider-width: 4px;\n    --wje-split-view-min: 0%;\n    --wje-split-view-max: 100%;\n    --wje-split-view-calc-a: 50%;\n    --wje-split-view-calc-b: 50%;\n    --wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));\n    --wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));\n\n    --wje-split-view-divider-background: var(--wje-border-color);\n    --wje-split-view-divider-size: 4px;\n    height: 100%;\n    width: 100%;\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n}\n\n:host(:not([vertical])) ::slotted([slot='start']) {\n    width: var(--wje-split-view-clamp-a);\n}\n\n:host(:not([vertical])) ::slotted([slot='end']) {\n    width: var(--wje-split-view-clamp-b);\n}\n\n:host([vertical]) ::slotted([slot='start']) {\n    height: var(--wje-split-view-clamp-a);\n    width: 100%;\n}\n\n:host([vertical]) ::slotted([slot='end']) {\n    height: var(--wje-split-view-clamp-b);\n    width: 100%;\n}\n\n.native-split-view {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    overflow: hidden;\n    position: relative;\n}\n\n:host([vertical]) .native-split-view {\n    flex-direction: column;\n}\n\n.wje-divider {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: center;\n    z-index: 1;\n    background-color: var(--wje-split-view-divider-background);\n    height: 100%;\n    width: var(--wje-split-view-divider-size);\n    cursor: col-resize;\n    &:after {\n        display: flex;\n        align-items: center;\n        content: '';\n        position: absolute;\n        height: 100%;\n        left: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        width: var(--wje-split-view-divider-area);\n    }\n}\n\n:host([vertical]) .wje-divider {\n    height: var(--wje-split-view-divider-size);\n    width: 100%;\n    cursor: row-resize;\n    &:after {\n        width: 100%;\n        top: calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);\n        height: var(--wje-split-view-divider-area);\n    }\n}\n";
 class SplitView extends WJElement {
   /**
    * Creates an instance of SplitView.
@@ -44,9 +44,15 @@ class SplitView extends WJElement {
       if (this.hasAttribute("disabled")) return;
       drag(this, {
         onMove: (x, y) => {
+          console.log("x", x);
+          console.log("y", y);
+          console.log("this.hasAttribute(vertical)", this.hasAttribute("vertical"));
           let newPositionInPixels = this.hasAttribute("vertical") ? y : x;
+          console.log("newPositionInPixels", newPositionInPixels);
           let sizeA = this.pixelsToPercentage(newPositionInPixels);
           let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
+          console.log("sizeA", sizeA);
+          console.log("sizeB", sizeB);
           this.style.setProperty("--wje-split-view-calc-a", sizeA + "%");
           this.style.setProperty("--wje-split-view-calc-b", sizeB + "%");
         },
@@ -125,6 +131,9 @@ class SplitView extends WJElement {
    */
   detectSize() {
     const { width, height } = this.getBoundingClientRect();
+    console.log("VERTICAL:", this.hasAttribute("vertical"), this.getBoundingClientRect(), this);
+    console.log("width", width);
+    console.log("height", height);
     this.size = this.hasAttribute("vertical") ? height : width;
   }
   /**
@@ -133,6 +142,7 @@ class SplitView extends WJElement {
    * @returns {number} The percentage value.
    */
   pixelsToPercentage(value) {
+    console.log("pixelsToPercentage", value, value / this.size * 100);
     return value / this.size * 100;
   }
 }
@@ -140,3 +150,4 @@ SplitView.define("wje-split-view", SplitView);
 export {
   SplitView as default
 };
+//# sourceMappingURL=wje-split-view.js.map

package/dist/wje-split-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-split-view.js","sources":["../packages/wje-split-view/service/service.js","../packages/wje-split-view/split-view.element.js","../packages/wje-split-view/split-view.js"],"sourcesContent":["export function drag(container, options) {\n    function move(pointerEvent) {\n        const dims = container.getBoundingClientRect();\n        const defaultView = container.ownerDocument.defaultView;\n        const offsetX = dims.left + defaultView.pageXOffset;\n        const offsetY = dims.top + defaultView.pageYOffset;\n        const x = pointerEvent.pageX - offsetX;\n        const y = pointerEvent.pageY - offsetY;\n        if (options?.onMove) {\n            options.onMove(x, y);\n        }\n    }\n\n    function stop() {\n        document.removeEventListener('pointermove', move);\n        document.removeEventListener('pointerup', stop);\n\n        if (options?.onStop) {\n            options.onStop();\n        }\n    }\n\n    document.addEventListener('pointermove', move, { passive: true });\n    document.addEventListener('pointerup', stop);\n\n    if (options?.initialEvent instanceof PointerEvent) {\n        move(options.initialEvent);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport { drag } from './service/service.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `SplitView` is a custom web component that represents a split view.\n * @summary This element represents a split view.\n * @documentation https://elements.webjet.sk/components/split-view\n * @status stable\n * @augments WJElement\n * @slot start - Slot for the start view.\n * @slot end - Slot for the end view.\n * @slot divider - Slot for the divider.\n * @csspart native-split-view - The native split view wrapper.\n * @csspart wje-divider - The divider of the split view.\n * @cssproperty [--wje-split-view-divider-area=12px] - Defines the interactive area (hitbox) of the divider for resizing. Accepts any valid CSS length unit (e.g., `px`, `rem`, `%`).\n * @cssproperty [--wje-split-view-divider-width=4px] - Specifies the visual width of the divider. Controls how thick the divider appears.\n * @cssproperty [--wje-split-view-min=0%] - Sets the minimum size limit for the split views. Ensures that a view cannot be resized below this value.\n * @cssproperty [--wje-split-view-max=100%] - Sets the maximum size limit for the split views. Ensures that a view cannot be resized beyond this value.\n * @cssproperty [--wje-split-view-calc-a=50%] - Represents the calculated size of the first view. This is used to dynamically set the size of the first view.\n * @cssproperty [--wje-split-view-calc-b=50%] - Represents the calculated size of the second view. This is used to dynamically set the size of the second view.\n * @cssproperty [--wje-split-view-clamp-a=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max))] - Clamps the size of the first view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-clamp-b=clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max))] - Clamps the size of the second view between minimum and maximum limits. Ensures the calculated size stays within the defined range.\n * @cssproperty [--wje-split-view-divider-background=var(--wje-border-color)] - Sets the background color of the divider. Accepts any valid CSS color value (e.g., hex, RGB, or CSS variable).\n * @cssproperty [--wje-split-view-divider-size=4px] - Defines the overall size of the divider, affecting both its visual and interactive dimensions. Accepts any valid CSS length unit.\n * @tag wje-split-view\n */\n\nexport default class SplitView extends WJElement {\n    /**\n     * Creates an instance of SplitView.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    set initial(value) {\n        this.setAttribute('initial', value);\n    }\n\n    get initial() {\n        return +this.getAttribute('initial') || 50;\n    }\n\n    className = 'SplitView';\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     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\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 for the split view.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-split-view');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        let divider = document.createElement('slot');\n        divider.setAttribute('name', 'divider');\n\n        let dividerElement = document.createElement('div');\n        dividerElement.classList.add('wje-divider');\n        dividerElement.setAttribute('part', 'divider');\n        dividerElement.appendChild(divider);\n        dividerElement.addEventListener('mousedown', this.handleDrag, false);\n\n        native.appendChild(start);\n        native.appendChild(dividerElement);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.detectSize();\n\n        if (this.min) this.style.setProperty('--wje-split-view-min', this.pixelsToPercentage(this.min) + '%');\n\n        if (this.max) this.style.setProperty('--wje-split-view-max', 100 - this.pixelsToPercentage(this.max) + '%');\n\n        if (this.initial) {\n            this.style.setProperty('--wje-split-view-calc-a', this.pixelsToPercentage(this.initial) + '%');\n            this.style.setProperty('--wje-split-view-calc-b', 100 - this.pixelsToPercentage(this.initial) + '%');\n        }\n\n        this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));\n    }\n\n    /**\n     * Handles the drag event.\n     * @param {Event} e The event object.\n     */\n    handleDrag = (e) => {\n        if (this.hasAttribute('disabled')) return;\n\n        drag(this, {\n            onMove: (x, y) => {\n                console.log('x', x);\n                console.log('y', y);\n                console.log('this.hasAttribute(vertical)', this.hasAttribute('vertical'));\n                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                console.log('newPositionInPixels', newPositionInPixels);\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n                console.log('sizeA', sizeA);\n                console.log('sizeB', sizeB);\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n            },\n            initialEvent: e,\n        });\n    };\n\n    /**\n     * Detects the size of the split view.\n     */\n    detectSize() {\n        const { width, height } = this.getBoundingClientRect();\n        console.log(\"VERTICAL:\", this.hasAttribute('vertical'), this.getBoundingClientRect(), this);\n        console.log('width', width);\n        console.log('height', height);\n        this.size = this.hasAttribute('vertical') ? height : width;\n    }\n\n    /**\n     * Converts pixels to a percentage.\n     * @param {number} value The pixel value.\n     * @returns {number} The percentage value.\n     */\n    pixelsToPercentage(value) {\n        console.log('pixelsToPercentage', value, (value / this.size) * 100);\n        return (value / this.size) * 100;\n    }\n}\n","import SplitView from './split-view.element.js';\n\nexport default SplitView;\n\nSplitView.define('wje-split-view', SplitView);\n"],"names":[],"mappings":"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"}

package/dist/wje-status.js

@@ -58,3 +58,4 @@ Status.define("wje-status", Status);
 export {
   Status as default
 };
+//# sourceMappingURL=wje-status.js.map

package/dist/wje-status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-status.js","sources":["../packages/wje-status/status.element.js","../packages/wje-status/status.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents Status element, extending the WJElement class.\n * @documentation https://elements.webjet.sk/components/status\n * @status stable\n * @augments WJElement\n * @slot - The status main content.\n * @slot start - The status start content.\n * @slot end - The status end content.\n * @csspart native - The native part of the status.\n * @csspart bullet - The bullet part of the status.\n * @tag wje-status\n */\nexport default class Status extends WJElement {\n    /**\n     * Creates an instance of Status.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Status';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\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 for the status.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-status');\n\n        let bullet = document.createElement('div');\n        bullet.setAttribute('part', 'bullet');\n        bullet.classList.add('bullet');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        bullet.appendChild(slot);\n\n        native.appendChild(start);\n        native.appendChild(bullet);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Status from './status.element.js';\n\nexport default Status;\n\nStatus.define('wje-status', Status);\n"],"names":[],"mappings":";;;;;AAee,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,IAAI;AAEvB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,MAAM;AACzB,WAAO,YAAY,GAAG;AAEtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACV;AACL;AC1EA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-step.js

@@ -47,3 +47,4 @@ Step.define("wje-step", Step);
 export {
   Step as default
 };
+//# sourceMappingURL=wje-step.js.map

package/dist/wje-step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-step.js","sources":["../packages/wje-step/step.element.js","../packages/wje-step/step.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Step` is a custom web component that represents a step.\n * @summary This element represents a step.\n * @documentation https://elements.webjet.sk/components/step\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the step.\n * @slot - The default slot for the step.\n * @tag wje-step\n */\nexport default class Step extends WJElement {\n    /**\n     * Creates an instance of Step.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Step';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @returns {CSSStyleSheet} The CSS stylesheet.\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     * Returns the list of observed attributes.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.className = 'step-native';\n        native.setAttribute('part', 'native');\n\n        const slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Step from './step.element.js';\n\nexport default Step;\n\nStep.define('wje-step', Step);\n"],"names":[],"mappings":";;;;;AAae,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,YAAY;AACnB,WAAO,aAAa,QAAQ,QAAQ;AAEpC,UAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACV;AACL;ACzDA,KAAK,OAAO,YAAY,IAAI;"}

package/dist/wje-stepper.js

@@ -228,3 +228,4 @@ Stepper.define("wje-stepper", Stepper);
 export {
   Stepper as default
 };
+//# sourceMappingURL=wje-stepper.js.map

package/dist/wje-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-stepper.js","sources":["../packages/wje-stepper/stepper.element.js","../packages/wje-stepper/stepper.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Stepper` is a custom web component that represents a stepper.\n * @summary This element represents a stepper.\n * @documentation https://elements.webjet.sk/components/stepper\n * @status stable\n * @augments WJElement\n * @attribute {string} active - The active color for the stepper.\n * @attribute {string} done - The done color for the stepper.\n * @slot - The default slot for the stepper.\n * @csspart native - The native part of the stepper.\n * @csspart header - The header part of the stepper.\n * @csspart content - The content part of the stepper.\n * @tag wje-stepper\n */\nexport default class Stepper extends WJElement {\n    constructor() {\n        super();\n        this.currentStep = 0;\n\n        this.localizer = new Localizer(this);\n        this.steps = [];\n    }\n\n    get active() {\n        if (this.hasAttribute('active')) return this.getAttribute('active');\n\n        return 'primary';\n    }\n\n    get done() {\n        if (this.hasAttribute('done')) return this.getAttribute('done');\n\n        return 'success';\n    }\n\n    className = 'Stepper';\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the stepper.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.className = 'native-stepper';\n\n        const header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.className = 'header';\n\n        const content = document.createElement('div');\n        content.setAttribute('part', 'content');\n        content.className = 'content';\n\n        const steps = Array.from(this.children);\n\n        steps.forEach((step, index) => {\n            if (step.nodeName === 'WJE-STEP') {\n                const nav = document.createElement('div');\n                nav.className = 'step-header';\n                nav.addEventListener('click', () => this.goToStep(index));\n\n                const badge = document.createElement('wje-badge');\n                badge.setAttribute('label', (index + 1).toString());\n                badge.className = 'step-badge';\n                badge.innerHTML = index + 1;\n\n                const label = document.createElement('span');\n                label.innerText =\n                    step.getAttribute('label') || `${this.localizer.translate('wj.stepper.step')} ${index + 1}`; // default label\n\n                // set active step\n                if (index === this.currentStep || step.hasAttribute('active')) {\n                    this.setStepActive(nav, badge);\n                }\n\n                if (step.hasAttribute('disabled')) {\n                    nav.setAttribute('disabled', '');\n                } else {\n                    nav.classList.add('pointer');\n                }\n\n                nav.appendChild(badge);\n                nav.appendChild(label);\n\n                header.appendChild(nav);\n\n                if (index < steps.length - 1) {\n                    const arrowIcon = document.createElement('wje-icon');\n                    arrowIcon.setAttribute('name', 'chevron-right');\n                    arrowIcon.classList.add('arrow-icon');\n                    arrowIcon.setAttribute('size', 'small');\n\n                    header.appendChild(arrowIcon);\n                }\n\n                step.classList.add('step');\n                if (index !== this.currentStep) {\n                    step.style.display = 'none';\n                }\n\n                this.steps.push(step);\n            }\n        });\n\n        let slot = document.createElement('slot');\n\n        const navButtons = document.createElement('div');\n        navButtons.className = 'nav-buttons';\n\n        const prevButton = document.createElement('wje-button');\n        prevButton.setAttribute('label', this.localizer.translate('wj.stepper.button.previous'));\n        prevButton.disabled = this.currentStep === 0;\n        prevButton.innerHTML = 'Prev';\n\n        const nextButton = document.createElement('wje-button');\n        nextButton.setAttribute('label', this.localizer.translate('wj.stepper.button.next'));\n        nextButton.disabled = this.currentStep === this.steps.length - 1;\n        nextButton.innerHTML = 'Next';\n\n        navButtons.appendChild(prevButton);\n        navButtons.appendChild(nextButton);\n\n        content.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(content);\n        native.appendChild(navButtons);\n\n        fragment.appendChild(native);\n\n        this.header = header;\n        this.headerSteps = header.querySelectorAll('.step-header');\n        this.prev = prevButton;\n        this.next = nextButton;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    afterDraw() {\n        event.addListener(this.prev, 'click', '', () => this.navigate(-1));\n        event.addListener(this.next, 'click', '', () => this.navigate(1));\n    }\n\n    /**\n     * Navigates to a different step in a multi-step process based on the provided direction.\n     * @param {number} direction The navigation direction.\n     * Use a positive value to move forward or a negative value to move backward.\n     */\n    navigate(direction) {\n        this.goToStep(this.currentStep + direction, direction);\n    }\n\n    /**\n     * Navigates to a specific step in a multi-step process and updates the stepper UI accordingly.\n     * @param {number} stepIndex The index of the step to navigate to.\n     * @param {number} direction The navigation direction. A positive value indicates forward navigation, and a negative value indicates backward navigation.\n     * //@fires stepper:next Dispatched when navigating to the next step.\n     * //@fires stepper:prev Dispatched when navigating to the previous step.\n     * //@fires stepper:finish Dispatched when the final step is completed.\n     */\n    goToStep(stepIndex, direction) {\n        if (stepIndex >= 0 && stepIndex < this.steps.length) {\n            if (direction > 0) {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:next', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            } else {\n                this.dispatchEvent(\n                    new CustomEvent('stepper:prev', { detail: { stepIndex }, bubbles: true, composed: true })\n                );\n            }\n\n            if (this.headerSteps[stepIndex].hasAttribute('disabled')) stepIndex += direction;\n\n            this.headerSteps.forEach((step, index) => {\n                let badge = step.querySelector('wje-badge');\n\n                this.setStepDefault(step, badge, index);\n                if (index < stepIndex) this.setStepDone(step, badge);\n            });\n\n            this.setStepActive(this.headerSteps[stepIndex], null, stepIndex);\n            this.setContentActive(stepIndex);\n\n            this.currentStep = stepIndex;\n\n            this.prev.disabled = this.currentStep === 0;\n            if (this.currentStep === this.steps.length - 1) {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.finish');\n                this.next.setAttribute('color', 'primary');\n                this.next.refresh();\n            } else {\n                this.next.innerHTML = this.localizer.translate('wj.stepper.button.next');\n                this.next.removeAttribute('color');\n                this.next.refresh();\n            }\n        } else if (stepIndex === this.steps.length) {\n            this.dispatchEvent(\n                new CustomEvent('stepper:finish', { detail: { stepIndex }, bubbles: true, composed: true })\n            );\n        }\n    }\n\n    /**\n     * Resets a step to its default state by clearing its active and done attributes.\n     * Updates the step's badge to show its index and removes any color styling.\n     * @param {HTMLElement} nav The navigation element representing the step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number} [stepIndex] The index of the step, used to set the badge content.\n     */\n    setStepDefault(nav, badge = null, stepIndex = 0) {\n        nav.removeAttribute('active');\n        nav.removeAttribute('done');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.removeAttribute('color');\n    }\n\n    /**\n     * Sets a step as active by adding the `active` attribute and updating the step's badge.\n     * @param {HTMLElement} nav The navigation element representing the step to activate.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     * @param {number|null} [stepIndex] The index of the step, used to set the badge content. Defaults to `null` if not provided.\n     */\n    setStepActive(nav, badge = null, stepIndex = null) {\n        nav.setAttribute('active', '');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n        badge.innerHTML = stepIndex + 1;\n        badge.setAttribute('color', this.active);\n    }\n\n    /**\n     * Activates the content of a specific step by displaying it and hiding all others.\n     * @param {number} stepIndex The index of the step whose content should be displayed.\n     */\n    setContentActive(stepIndex) {\n        this.steps?.forEach((step, index) => {\n            if (index === stepIndex) {\n                step.style.display = 'block';\n            } else {\n                step.style.display = 'none';\n            }\n        });\n    }\n\n    /**\n     * Marks a step as completed by setting the `done` attribute and updating its badge with a check icon.\n     * @param {HTMLElement} nav The navigation element representing the completed step.\n     * @param {HTMLElement|null} [badge] The badge element within the step. If not provided, it will be selected from the `nav` element.\n     */\n    setStepDone(nav, badge = null) {\n        nav.setAttribute('done', '');\n\n        const checkIcon = document.createElement('wje-icon');\n        checkIcon.setAttribute('name', 'check');\n        checkIcon.setAttribute('color', this.done);\n        checkIcon.setAttribute('size', 'medium');\n\n        if (!badge) {\n            badge = nav.querySelector('wje-badge');\n        }\n\n        badge.setAttribute('color', this.done);\n        badge.innerHTML = '';\n        badge.appendChild(checkIcon);\n    }\n}\n","import Stepper from './stepper.element.js';\n\nexport default Stepper;\n\nStepper.define('wje-stepper', Stepper);\n"],"names":[],"mappings":"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"}

package/dist/wje-store.js

@@ -384,3 +384,4 @@ export {
   defaultStoreActions,
   store
 };
+//# sourceMappingURL=wje-store.js.map

package/dist/wje-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-store.js","sources":["../packages/wje-store/default-store-actions.js?v=@@version@@","../packages/wje-store/pubsub.js?v=@@version@@","../packages/wje-store/store.js"],"sourcesContent":["const addAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD`,\n            payload: payload2,\n        };\n    };\n};\n\nconst addManyAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/ADD_MANY`,\n            payload: payload2,\n        };\n    };\n};\n\nconst updateAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/UPDATE`,\n            payload: payload2,\n        };\n    };\n};\n\nconst deleteAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/DELETE`,\n            payload: payload2,\n        };\n    };\n};\n\nconst loadAction = (stateValueName) => {\n    return (payload2) => {\n        return {\n            type: `${stateValueName}/LOAD`,\n            payload: payload2,\n        };\n    };\n};\n\nconst defaultStoreActions = {\n    addAction,\n    deleteAction,\n    loadAction,\n    updateAction,\n    addManyAction,\n};\n\nexport { defaultStoreActions };\n","export default class PubSub {\n    constructor() {\n        this.events = {};\n    }\n\n    /**\n     * Either create a new event instance for passed `event` name.\n     * or push a new callback into the existing collection.\n     * @param {string} event The event name to subscribe to\n     * @param {Function} callback The callback function to subscribe to the event\n     * @returns {number} A count of callbacks for this event\n     * @memberof PubSub\n     */\n    subscribe(event, callback) {\n        let self = this;\n        let index;\n\n        // If there's not already an event with this name set in our collection\n        // go ahead and create a new one and set it with an empty array, so we don't\n        // have to type check it later down-the-line\n        if (!self.events.hasOwnProperty(event)) {\n            self.events[event] = [];\n        }\n\n        index = self.events[event].push(callback) - 1;\n\n        return {\n            unsubscribe() {\n                self.events[event].splice(self.events[event].indexOf(callback), 1);\n            },\n        };\n    }\n\n    /**\n     * If the passed event has callbacks attached to it, loop through each one and call it.\n     * @param {string} event The name of the event to publish\n     * @param {object} [newData] The data to pass to the callbacks\n     * @param {object} [oldData] The data to pass to the callbacks\n     * @returns {Array} The callbacks for this event, or an empty array if no event exits\n     * @memberof PubSub\n     */\n    publish(event, newData = {}, oldData = {}) {\n        let self = this;\n\n        // There's no event to publish to, so bail out\n        if (!self.events.hasOwnProperty(event)) {\n            return [];\n        }\n\n        // Get each subscription and call its callback with the passed data\n        return self.events[event].map((callback) => callback(newData, oldData));\n    }\n}\n","import { defaultStoreActions } from './default-store-actions.js?v=@@version@@';\nimport PubSub from './pubsub.js?v=@@version@@';\n\n/**\n * @summary A reactive state management system with support for reducers, events, and state immutability.\n * @description The `Store` class provides a centralized way to manage application state with actions, reducers, and event subscriptions. It supports handling both object and array state, with flexibility for custom reducers.\n * @example\n * const store = new Store({\n *   reducer: (state, action) => { ... },\n *   state: { user: { id: 1, name: 'John' } }\n * });\n * store.subscribe('user', (newState, oldState) => console.log('User changed:', newState));\n * store.dispatch({ type: 'user/UPDATE', payload: { name: 'Jane' } });\n */\nclass Store {\n    _state;\n    _reducer;\n    events;\n    status;\n\n    /**\n     * Initializes the store with optional reducer and state.\n     * @param {object} [params] Configuration for the store.\n     * @param {Function} [params.reducer] Initial reducer function for handling state updates.\n     * @param {object} [params.state] Initial state of the store.\n     */\n    constructor(params = {}) {\n        this._isPause = false;\n        this._state = {};\n        this._reducer = () => {\n            return {};\n        };\n\n        // A status enum to set during actions and mutations\n        this.status = 'resting';\n\n        // Attach our PubSub module as an `events` element\n        this.events = new PubSub();\n\n        if (params?.hasOwnProperty('reducer')) {\n            this._reducer = params.reducer;\n        }\n\n        this.refreshProxy(params?.state);\n    }\n\n    /**\n     * Dispatches an action to update the state by invoking the reducer function.\n     * @param {object} action The action object containing the type and any associated payload.\n     * @param {string} action.type The type of the action being dispatched.\n     * @returns {boolean} Returns `true` after the state has been successfully updated.\n     * @example\n     * const action = { type: 'INCREMENT', payload: { amount: 1 } };\n     * store.dispatch(action);\n     */\n    dispatch(action) {\n        // Create a console group which will contain the logs from our Proxy etc\n        // console.groupCollapsed(`ACTION: ${action.type}`);\n\n        // Let anything that's watching the status know that we're dispatching an action\n        this.status = 'action';\n\n        let newState = this._reducer(this._state, action);\n\n        this.status = 'mutation';\n        // Merge the old and new together to create a new state and set it\n        this._state = Object.assign(this._state, newState);\n\n        // Close our console group to keep things nice and neat\n        // console.groupEnd();\n\n        return true;\n    }\n\n    /**\n     * Retrieves a deep copy of the current state to ensure immutability.\n     * @returns {object} A deep copy of the current state.\n     * @example\n     * const currentState = store.getState();\n     * console.log(currentState);\n     */\n    getState() {\n        return JSON.parse(JSON.stringify(this._state));\n    }\n\n    /**\n     * Subscribes to a specific event with a provided callback function.\n     * @param {string} eventName The name of the event to subscribe to.\n     * @param {Function} callbackFn The function to execute when the event is triggered.\n     * @returns {Function} - A function to unsubscribe from the event.\n     * @example\n     * const unsubscribe = store.subscribe('stateChange', (newState) => {\n     *   console.log('State changed:', newState);\n     * });\n     * // Later, to unsubscribe\n     * unsubscribe();\n     */\n    subscribe(eventName, callbackFn) {\n        return this.events.subscribe(eventName, callbackFn);\n    }\n\n    /**\n     * Unsubscribes from a specific event by removing all associated listeners.\n     * @param {string} eventName The name of the event to unsubscribe from.\n     * @returns {void}\n     * @example\n     * store.unsubscribe('stateChange');\n     */\n    unsubscribe(eventName) {\n        delete this.events[eventName];\n    }\n\n    /**\n     * Pauses event handling or other operations.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.pause().doSomething();\n     */\n    pause() {\n        this._isPause = true;\n        return this;\n    }\n\n    /**\n     * Resumes event handling or other operations.\n     * @param {*} [val] Optional value to pass while resuming.\n     * @returns {this} Returns the current instance for method chaining.\n     * @example\n     * store.play().doSomething();\n     */\n    play(val) {\n        this._isPause = false;\n        return this;\n    }\n\n    /**\n     * Merges a new reducer function into the existing reducer for a specific state property.\n     * @param {string} stateValueName The key in the state object that the new reducer will manage.\n     * @param {Function} newReducer The reducer function to handle updates for the specified state property.\n     * @returns {void}\n     * @example\n     * const newReducer = (newState, currentState) => ({ ...currentState, ...newState });\n     * store.mergeReducers('user', newReducer);\n     */\n    mergeReducers(stateValueName, newReducer) {\n        let reducerCopy = this._reducer;\n        this._reducer = (state, newState) => {\n            let preState = reducerCopy(state, newState);\n            return {\n                ...preState,\n                [stateValueName]: newReducer(newState, state[stateValueName]),\n            };\n        };\n    }\n\n    /**\n     * Synchronizes each entry in an array with the store by defining or updating state entries.\n     * @param {string} storeKey The key prefix used for defining or updating store entries.\n     * @param {Array<object>} [array] The array of entries to be synchronized with the store.\n     * @param {string} [identificator] The property name used as a unique identifier for each entry.\n     * @returns {void}\n     * @example\n     * const data = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];\n     * store.makeEveryArrayEntryAsStoreState('items', data, 'id');\n     */\n    makeEveryArrayEntryAsStoreState(storeKey, array = [], identificator = 'id') {\n        array.forEach((entry) => {\n            if (this.getState().hasOwnProperty(`${storeKey}-${entry[identificator]}`)) {\n                this.dispatch(defaultStoreActions.updateAction(`${storeKey}-${entry[identificator]}`)(entry));\n            } else {\n                this.define(\n                    `${storeKey}-${entry.id || entry.source || entry[identificator]}`,\n                    entry,\n                    null,\n                    identificator\n                );\n            }\n        });\n    }\n\n    /**\n     * Defines a new state variable and associates it with a reducer.\n     * @param {string} stateValueName The name of the state variable to define.\n     * @param {*} defaultValue The initial value of the state variable.\n     * @param {Function|null} [reducer] An optional reducer function to manage updates for the state variable.\n     * @param {string} [key] The key used to identify individual entries if the state value is an array or object.\n     * @returns {void}\n     * @example\n     * // Define a new state with a custom reducer\n     * store.define('user', { id: 1, name: 'John Doe' }, (newState, currentState) => ({ ...currentState, ...newState }));\n     * @example\n     * // Define a new state with default array reducer\n     * store.define('items', [], null, 'itemId');\n     */\n    define(stateValueName, defaultValue, reducer, key = 'id') {\n        if (this._state.hasOwnProperty(stateValueName)) {\n            console.warn(`STATE už obsahuje premennú ${stateValueName},ktorú sa pokúšate pridať`);\n            return;\n        }\n\n        if (reducer instanceof Function) {\n            this.mergeReducers(stateValueName, reducer);\n        } else {\n            if (defaultValue instanceof Array) {\n                this.mergeReducers(stateValueName, this.createArrayReducer(stateValueName, key));\n            } else {\n                this.mergeReducers(stateValueName, this.createObjectReducer(stateValueName, key));\n            }\n        }\n\n        this.refreshProxy({\n            ...this._state,\n            [stateValueName]: defaultValue,\n        });\n    }\n\n    /**\n     * Refreshes the state by wrapping it in a Proxy to track changes and notify subscribers.\n     * @param {object} newState The new state object to be set. Defaults to an empty object if not provided.\n     * @returns {void}\n     * @example\n     * store.refreshProxy({ user: { id: 1, name: 'John Doe' } });\n     */\n    refreshProxy(newState) {\n        // Set our state to be a Proxy. We are setting the default state by\n        // checking the params and defaulting to an empty object if no default\n        // state is passed in\n        this._state = new Proxy(newState || {}, {\n            set: (state, key, value) => {\n                if (JSON.stringify(state[key]) === JSON.stringify(value)) {\n                    return true;\n                }\n\n                //Set the value as we would normally\n                let oldState = state[key];\n                state[key] = value;\n\n                // Trace out to the console. This will be grouped by the related action\n                // console.log(`stateChange: ${key}: `, value);\n\n                // TODO vieme to rozšíríť a subscripe sa len na zmenu určitej časti statu\n                // Publish the change event for the components that are listening\n                if (!this._isPause) this.events.publish(key, this._state, oldState);\n\n                // Give the user a little telling off if they set a value directly\n                if (this.status !== 'mutation') {\n                    console.warn(`You should use a mutation to set ${key}`);\n                }\n\n                // Reset the status ready for the next operation\n                this.status = 'resting';\n\n                return true;\n            },\n        });\n    }\n\n    /**\n     * Creates a reducer function to manage an object state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @returns {Function} A reducer function that handles `ADD`, `UPDATE`, and `DELETE` actions for the specified state property.\n     * @throws {Error} If the payload is an array, an error is logged since the reducer is designed for object state management.\n     * @example\n     * const userReducer = store.createObjectReducer('user');\n     * const newState = userReducer({ type: 'user/ADD', payload: { id: 1, name: 'John Doe' } });\n     */\n    createObjectReducer(stateValueName) {\n        return (action, state = {}) => {\n            if (Array.isArray(action.payload)) {\n                console.error(\n                    `Nemôžete pridať do objektu hodnotu, ktorá je pole. Skontrolujte si či definovanie stavu vyzerá takto: \"store.define(${stateValueName}, {})\"`\n                );\n            }\n\n            const actionType = action.type.split('/')[1];\n\n            if (['ADD', 'UPDATE', 'DELETE'].includes(actionType)) {\n                console.error(\n                    `Nemôžete použiť akciu ${actionType} na objekt. Správne akcie pre objekt sú: ADD, UPDATE, DELETE`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    return {\n                        ...action.payload,\n                    };\n                case `${stateValueName}/UPDATE`:\n                    return {\n                        ...state,\n                        ...action.payload,\n                    };\n                case `${stateValueName}/DELETE`:\n                    return {};\n                default:\n                    return state;\n            }\n        };\n    }\n\n    /**\n     * Creates a reducer function to manage an array state.\n     * @param {string} stateValueName The name of the state property this reducer manages.\n     * @param {string} key The unique key used to identify items in the array for updates and deletions.\n     * @returns {Function} A reducer function that handles `ADD`, `ADD_MANY`, `UPDATE`, `DELETE`, and `LOAD` actions for the specified state property.\n     * @throws {Error} If `action.payload` is not an array when required.\n     * @example\n     * const itemsReducer = store.createArrayReducer('items', 'id');\n     * const newState = itemsReducer({ type: 'items/ADD', payload: { id: 1, name: 'Item 1' } });\n     */\n    createArrayReducer(stateValueName, key) {\n        return (action, state = []) => {\n            if (Array.isArray(action.payload) && action.payload.length === 0) {\n                console.warn(`Nemá zmysel pridávať prázdne pole do pola`);\n            }\n\n            if (\n                !Array.isArray(action.payload) &&\n                action.type !== defaultStoreActions.updateAction(stateValueName).type &&\n                action.type !== defaultStoreActions.deleteAction(stateValueName).type &&\n                action.type !== defaultStoreActions.updateAction(stateValueName).type\n            ) {\n                console.error(\n                    `Nemôžete pridať do poľa hodnotu, ktorá nie je pole. Skontrolujte si či definovanie stavu vyzerá takto: \"store.define(${stateValueName}, [])\"`\n                );\n            }\n\n            switch (action.type) {\n                case `${stateValueName}/ADD`:\n                    if (Array.isArray(action.payload)) {\n                        return [...state, ...action.payload];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/ADD_MANY`:\n                    return [...state, ...action.payload];\n                case `${stateValueName}/UPDATE`:\n                    if (state.some((obj) => obj[key] === action.payload[key])) {\n                        return [\n                            ...state.map((obj) => {\n                                if (obj[key] === action.payload[key]) {\n                                    return action.payload;\n                                }\n                                return obj;\n                            }),\n                        ];\n                    } else {\n                        return [...state, action.payload];\n                    }\n                case `${stateValueName}/DELETE`:\n                    return [\n                        ...state.filter(\n                            (obj) =>\n                                (obj.hasOwnProperty(key) && obj[key] !== action.payload[key]) ||\n                                (!obj.hasOwnProperty(key) && obj !== action.payload)\n                        ),\n                    ];\n\n                case `${stateValueName}/LOAD`:\n                    return [...action.payload];\n                default:\n                    return state;\n            }\n        };\n    }\n}\n\nlet store = new Store();\nexport { store, defaultStoreActions };\n"],"names":[],"mappings":"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"}

package/dist/wje-tab-group.js

@@ -134,3 +134,4 @@ TabGroup.define("wje-tab-group", TabGroup);
 export {
   TabGroup as default
 };
+//# sourceMappingURL=wje-tab-group.js.map

package/dist/wje-tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-tab-group.js","sources":["../packages/wje-tab-group/tab-group.element.js","../packages/wje-tab-group/tab-group.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabGroup` is a custom web component that represents a group of tabs.\n * @summary This element represents a group of tabs.\n * @documentation https://elements.webjet.sk/components/tab-group\n * @status stable\n * @augments WJElement\n * @slot - The default slot for the tab group.\n * @slot nav - Slot for the navigation of the tab group.\n * @cssproperty [--wje-tab-group-padding=1rem] - Specifies the padding inside the tab group. This property defines the space between the content of the tab group and its outer boundary. Accepts any valid CSS length unit (e.g., `px`, `rem`, `em`, `%`).\n * @tag wje-tab-group\n */\n\nexport default class TabGroup extends WJElement {\n    /**\n     * Creates an instance of TabGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'TabGroup';\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     * Sets up the event listeners before the component is drawn.\n     * This method is called before the component is drawn.\n     * It is used to set up event listeners.\n     */\n    beforeDraw() {\n        let activeTabName = location.hash.replace('#', '');\n\n        // skontrolujeme ci sa nachadza v paneloch\n        if (this.getPanelAllName().includes(activeTabName)) {\n            // window.addEventListener('hashchange', (e) => {\n            //     this.setActiveTab(activeTabName);\n            // });\n\n            window.addEventListener('load', (e) => {\n                this.setActiveTab(activeTabName);\n            });\n        }\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 native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-tab-group');\n\n        let header = document.createElement('header');\n        header.setAttribute('part', 'tabs');\n        header.classList.add('scroll-snap-x');\n\n        let nav = document.createElement('nav');\n\n        let section = document.createElement('section');\n        section.setAttribute('part', 'panels');\n\n        let slot = document.createElement('slot');\n\n        let slotNav = document.createElement('slot');\n        slotNav.setAttribute('name', 'nav');\n\n        header.appendChild(nav);\n        nav.appendChild(slotNav);\n        section.appendChild(slot);\n\n        native.appendChild(header);\n        native.appendChild(section);\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        let activeTab = this.getActiveTab();\n        let activeTabName = activeTab ? activeTab[0].panel : this.getTabAll()[0].panel;\n\n        this.setActiveTab(activeTabName);\n\n        this.addEventListener('wje-tab:change', (e) => {\n            if (e.detail.context.hasAttribute('disabled')) return;\n\n            this.setActiveTab(e.detail.context.panel);\n        });\n    }\n\n    /**\n     * Removes the active attribute from all tabs and panels.\n     */\n    removeActiveTab() {\n        this.getPanelAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n\n        this.getTabAll().forEach((el) => {\n            el.removeAttribute('active');\n        });\n    }\n\n    /**\n     * Sets the active tab and panel.\n     * @param {string} tab The name of the tab to set as active.\n     */\n    setActiveTab(tab) {\n        this.removeActiveTab();\n        this.querySelector(`[panel=\"${tab}\"]`).setAttribute('active', '');\n        this.querySelector(`[name=\"${tab}\"]`).setAttribute('active', '');\n    }\n\n    /**\n     * Returns the currently active tab.\n     * @returns {Element|null} The active tab, or null if no tab is active.\n     */\n    getActiveTab() {\n        let activeTabs = Array.from(this.querySelectorAll('wje-tab[active]'));\n        return activeTabs.length > 0 ? activeTabs : null;\n    }\n\n    /**\n     * Returns all tabs.\n     * @returns {Array<Element>} An array of all tabs.\n     */\n    getTabAll() {\n        return this.context.querySelector('[name=\"nav\"]').assignedElements();\n    }\n\n    /**\n     * Returns all panels.\n     * @returns {Array<Element>} An array of all panels.\n     */\n    getPanelAll() {\n        return Array.from(this.querySelectorAll('wje-tab-panel'));\n    }\n\n    /**\n     * Returns the names of all tabs.\n     * @returns {Array<string>} An array of all tab names.\n     */\n    getPanelAllName() {\n        return this.getPanelAll().map((el) => el.getAttribute('name'));\n    }\n}\n","import TabGroup from './tab-group.element.js';\n\nexport default TabGroup;\n\nTabGroup.define('wje-tab-group', TabGroup);\n"],"names":[],"mappings":"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"}

package/dist/wje-tab-panel.js

@@ -43,3 +43,4 @@ TabPanel.define("wje-tab-panel", TabPanel);
 export {
   TabPanel as default
 };
+//# sourceMappingURL=wje-tab-panel.js.map

package/dist/wje-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-tab-panel.js","sources":["../packages/wje-tab-panel/tab-panel.element.js","../packages/wje-tab-panel/tab-panel.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `TabPanel` is a custom web component that represents a tab panel.\n * @summary This element represents a tab panel.\n * @documentation https://elements.webjet.sk/components/tab-panel\n * @status stable\n * @augments {WJElement}\n * @slot - The default slot for the tab panel.\n * @tag wje-tab-panel\n */\nexport default class TabPanel extends WJElement {\n    /**\n     * Creates an instance of TabPanel.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'TabPanel';\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 for the tab panel.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import TabPanel from './tab-panel.element.js';\n\nexport default TabPanel;\n\nTabPanel.define('wje-tab-panel', TabPanel);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV;AAMJ;AAAA;AAAA;AAAA,qCAAY;AAAA,EALX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AClDA,SAAS,OAAO,iBAAiB,QAAQ;"}

package/dist/wje-tab.js

@@ -56,3 +56,4 @@ Tab.define("wje-tab", Tab);
 export {
   Tab as default
 };
+//# sourceMappingURL=wje-tab.js.map

package/dist/wje-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-tab.js","sources":["../packages/wje-tab/tab.element.js","../packages/wje-tab/tab.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Tab` is a custom web component that represents a tab.\n * @summary This element represents a tab.\n * @documentation https://elements.webjet.sk/components/tab\n * @status stable\n * @augments {WJElement}\n * @cssproperty [--wje-tab-text-transform=uppercase] - The text transformation for the tab (e.g., uppercase, lowercase).\n * @cssproperty [--wje-tab-font-weight=500] - The font weight of the tab text.\n * @cssproperty [--wje-tab-letter-spacing=0.06em] - The letter spacing of the tab text.\n * @cssproperty [--wje-tab-padding-inline=1rem] - The horizontal padding of the tab.\n * @cssproperty [--wje-tab-padding-top=.75rem] - The top padding of the tab text.\n * @cssproperty [--wje-tab-padding-bottom=.75rem] - The bottom padding of the tab text.\n * @cssproperty [--wje-tab-color-active=var(--wje-color-primary-11)] - The text color of the active tab.\n * @cssproperty [--wje-tab-color-hover=var(--wje-color-primary-1)] - The text color of the tab when hovered.\n * //@fires wje-tab:change - Dispatched when the tab is changed.\n * @tag wje-tab\n */\nexport default class Tab extends WJElement {\n    /**\n     * Creates an instance of Tab.\n     */\n    constructor() {\n        super();\n\n        /**\n         * Indicates whether this is the last tab.\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * The class name for the component.\n     */\n    className = 'Tab';\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 for the tab.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let slot = document.createElement('slot');\n\n        let a = document.createElement('a');\n        a.setAttribute('href', '#' + this.panel);\n        a.setAttribute('part', 'native');\n        a.classList.add('native-tab');\n        a.appendChild(slot);\n\n        fragment.appendChild(a);\n\n        return fragment;\n    }\n\n    /**\n     * Sets up event listeners after the component is rendered.\n     * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.\n     */\n    afterDraw() {\n        event.addListener(this, 'click', 'wje-tab:change');\n    }\n}\n","import Tab from './tab.element.js';\n\nexport default Tab;\n\nTab.define('wje-tab', Tab);\n"],"names":[],"mappings":";;;;;AAoBe,MAAM,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIvC,cAAc;AACV;AAYJ;AAAA;AAAA;AAAA,qCAAY;AANR,SAAK,OAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,IAAI,SAAS,cAAc,GAAG;AAClC,MAAE,aAAa,QAAQ,MAAM,KAAK,KAAK;AACvC,MAAE,aAAa,QAAQ,QAAQ;AAC/B,MAAE,UAAU,IAAI,YAAY;AAC5B,MAAE,YAAY,IAAI;AAElB,aAAS,YAAY,CAAC;AAEtB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,YAAY;AACR,UAAM,YAAY,MAAM,SAAS,gBAAgB;AAAA,EACpD;AACL;AC9EA,IAAI,OAAO,WAAW,GAAG;"}

package/dist/wje-textarea.js

@@ -370,3 +370,4 @@ Textarea.define("wje-textarea", Textarea);
 export {
   Textarea as default
 };
+//# sourceMappingURL=wje-textarea.js.map

package/dist/wje-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-textarea.js","sources":["../packages/wje-textarea/textarea.element.js","../packages/wje-textarea/textarea.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Textarea` is a custom web component that represents a textarea input.\n * @summary This element represents a textarea input.\n * @documentation https://elements.webjet.sk/components/textarea\n * @status stable\n * @augments WJElement\n * @csspart native - The native textarea wrapper.\n * @csspart input - The textarea input.\n * @csspart wrapper - The textarea wrapper.\n * @cssproperty [--wje-textarea-font-family=var(--wje-font-family)] - Specifies the font family used for the textarea. Accepts any valid CSS font-family value.\n * @cssproperty [--wje-textarea-background-color=var(--wje-background)] - Sets the background color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color=var(--wje-color)] - Defines the text color within the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-color-invalid=var(--wje-color-danger)] - Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors.\n * @cssproperty [--wje-textarea-border-width=1px] - Specifies the width of the textarea's border. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-border-style=solid] - Sets the style of the textarea's border. Accepts standard CSS border styles such as `solid`, `dashed`, or `dotted`.\n * @cssproperty [--wje-textarea-border-color=var(--wje-border-color)] - Defines the border color of the textarea. Accepts any valid CSS color value.\n * @cssproperty [--wje-textarea-border-color-focus=var(--wje-color-primary)] - Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback.\n * @cssproperty [--wje-textarea-border-radius=4px] - Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit.\n * @cssproperty [--wje-textarea-margin-bottom=.5rem] - Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements.\n * @cssproperty [--wje-textarea-line-height=20px] - Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text.\n * @cssproperty [--wje-textarea-padding=0.5rem] - Defines the padding inside the textarea. Controls the spacing between the content and the border.\n * @tag wje-textarea\n */\n\nexport default class Textarea extends WJElement {\n    /**\n     * Creates an instance of Textarea.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n        this.internals = this.attachInternals();\n        this.observer = new MutationObserver(this.observeFunction);\n    }\n\n    observeFunction = (mutations) => {\n        mutations.forEach((mutation) => {\n            if (mutation.type === 'attributes') {\n                const attributeName = mutation.attributeName;\n                const oldValue = mutation.oldValue;\n                const newValue = this.getAttribute(attributeName);\n\n                console.log(`Attribute ${attributeName} changed from ${oldValue} to ${newValue}`);\n            }\n        });\n\n        this.refresh();\n    };\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n\n        this.pristine = false;\n        this._value = value;\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value ?? this._value ?? '';\n    }\n\n    /**\n     * Getter for the invalid attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get invalid() {\n        return this.hasAttribute('invalid');\n    }\n\n    /**\n     * Setter for the invalid attribute.\n     * @param {boolean} isInvalid Whether the input is invalid.\n     */\n    set invalid(isInvalid) {\n        if (isInvalid) this.setAttribute('invalid', '');\n        else this.removeAttribute('invalid');\n    }\n\n    /**\n     * Getter for the form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string} The name of the input.\n     */\n    get name() {\n        return this.getAttribute('name');\n    }\n\n    /**\n     * Getter for the type attribute.\n     * @returns {string} The type of the input.\n     */\n    get type() {\n        return this.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\n    }\n\n    className = 'Textarea';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    set placeholder(value) {\n        this.setAttribute('placeholder', value);\n    }\n\n    get placeholder() {\n        return this.getAttribute('placeholder');\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n\n        // if some value was set via value setter then don't use default value\n        if (this.pristine) {\n            this.value = this.innerHTML;\n            this.pristine = false;\n        }\n    }\n\n    beforeDraw() {\n        this.observer.disconnect();\n    }\n\n    /**\n     * Draws the component for the textarea.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-textarea', this.variant || 'default');\n        native.setAttribute('part', 'native');\n\n        if (this.hasAttribute('invalid')) native.classList.add('has-error');\n\n        let wrapper = document.createElement('div');\n        wrapper.setAttribute('part', 'wrapper');\n        wrapper.classList.add('wrapper');\n\n        let inputWrapper = document.createElement('div');\n        inputWrapper.classList.add('input-wrapper');\n\n        let label = document.createElement('label');\n        label.htmlFor = 'textarea';\n        label.innerHTML = this.label || '';\n\n        let input = document.createElement('textarea');\n        input.id = 'textarea';\n        input.name = this.name;\n        input.disabled = this.hasAttribute('disabled');\n        input.innerText = this.value;\n        input.placeholder = this.placeholder || '';\n        input.classList.add('form-control');\n        input.setAttribute('part', 'input');\n        input.setAttribute('rows', this.rows || 3);\n        input.setAttribute('spellcheck', false);\n\n        const attributes = Array.from(this.attributes).map((attr) => attr.name);\n\n        attributes.forEach((attr) => {\n            if (this.hasAttribute(attr)) {\n                input.setAttribute(attr, this[attr] || '');\n            }\n        });\n\n        if (this.resize === 'auto') input.addEventListener('input', this.setTextareaHeight);\n\n        if (this.variant === 'standard') {\n            if (this.label) native.appendChild(label);\n        } else {\n            inputWrapper.appendChild(label);\n        }\n\n        inputWrapper.appendChild(input);\n\n        wrapper.appendChild(inputWrapper);\n\n        native.appendChild(wrapper);\n\n        fragment.appendChild(native);\n\n        if (this.hasAttribute('counter')) {\n            input.maxLength = this.maxLength || 1000;\n            input.addEventListener('input', this.counterFn);\n\n            let counter = document.createElement('div');\n            counter.classList.add('counter');\n            counter.innerText = `${input.value.length}/${input.maxLength}`;\n\n            this.counterElement = counter;\n            fragment.appendChild(counter);\n        }\n\n        this.native = native;\n        this.labelElement = label;\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * Sets up the event listeners after the component is drawn.\n     */\n    afterDraw() {\n        this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight);\n\n        if (!this.hasAttribute('disabled')) {\n            event.addListener(this, 'click', 'wje:textarea:change');\n            event.addListener(this, 'click', 'wje:textarea:input');\n        }\n\n        this.input.addEventListener('focus', (e) => {\n            this.labelElement.classList.add('fade');\n            this.native.classList.add('focused');\n        });\n\n        this.input.addEventListener('blur', (e) => {\n            this.native.classList.remove('focused');\n            if (!e.target.value) this.labelElement.classList.remove('fade');\n        });\n\n        this.addEventListener('invalid', (e) => {\n            this.invalid = true;\n            this.pristine = false;\n\n            this.showInvalidMessage();\n\n            if (this.customErrorDisplay) {\n                e.preventDefault();\n            }\n        });\n\n        this.input.addEventListener('input', (e) => {\n            this.validateInput();\n\n            if (this.validateOnChange) {\n                this.pristine = false;\n                this.propagateValidation();\n            }\n\n            this.input.classList.remove('pristine');\n            this.labelElement.classList.add('fade');\n\n            const clone = new e.constructor(e.type, e);\n            this.dispatchEvent(clone);\n\n            event.dispatchCustomEvent(this, 'wje-textarea:input', {\n                value: this.input.value,\n            });\n\n            this.value = this.input.value;\n        });\n\n        this.validateInput();\n\n        this.observer.observe(this, {\n            attributes: true, // Watch for attribute changes\n            attributeOldValue: true, // Keep track of the old value of attributes\n        });\n    }\n\n    componentCleanup() {\n        this.observer.disconnect();\n    }\n\n    /**\n     * Disconnects the component.\n     */\n    beforeDisconnect() {\n        this.resizeObserver.unobserve(this.input);\n    }\n\n    /**\n     * Sets the height of the textarea.\n     */\n    setTextareaHeight = () => {\n        if (this.getAttribute('resize') === 'auto') {\n            this.input.style.height = 'auto';\n            this.input.style.height = this.input.scrollHeight + 'px';\n        }\n    };\n\n    /**\n     * Updates the counter for the textarea.\n     * @param {Event} e The event object.\n     */\n    counterFn = (e) => {\n        this.counterElement.innerText = e.target.value.length + '/' + this.input.maxLength;\n    };\n\n    /**\n     * @summary Validates the input.\n     * This method checks the validity state of the input. If the input is not valid, it iterates over the validity state object.\n     * For each invalid state, it constructs an attribute name and checks if the input has this attribute.\n     * If the input has the attribute, it sets the validation error to the state and the error message to the attribute value.\n     * If the input does not have the attribute, it sets the error message to the default validation message of the input.\n     * It then sets the validity in the form internals to an object with the validation error as key and true as value, and the error message.\n     * If the input is valid, it sets the validity in the form internals to an empty object.\n     */\n    validateInput() {\n        const validState = this.input.validity;\n\n        if (!validState.valid) {\n            for (let state in validState) {\n                const attr = `message-${state.toString()}`;\n\n                if (validState[state]) {\n                    this.validationError = state.toString();\n                    let errorMessage = this.message;\n\n                    // TODO this take error messages based on lang from operating system of user  should we implement custom translations based on app language ?\n                    if (!this.hasAttribute('message'))\n                        errorMessage = this.hasAttribute(attr) ? this.getAttribute(attr) : this.input.validationMessage;\n\n                    this.internals.setValidity({ [this.validationError]: true }, errorMessage);\n                }\n            }\n        } else {\n            this.internals.setValidity({});\n        }\n    }\n\n    /**\n     * @summary Propagates the validation state of the input.\n     * This method sets the 'invalid' property of the input based on its 'pristine' state and its internal validity state.\n     * If the input is invalid and the 'customErrorDisplay' property is true, it dispatches an 'invalid' event.\n     */\n    propagateValidation() {\n        this.invalid = !this.pristine && !this.internals.validity.valid;\n\n        if (this.invalid && this.customErrorDisplay) {\n            this.dispatchEvent(new Event('invalid'));\n        }\n    }\n\n    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        this.internals.setFormValue(this.value);\n        form?.addEventListener('submit', () => {\n            this.validateInput();\n            this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\n}\n","import Textarea from './textarea.element.js';\n\nexport default Textarea;\n\nTextarea.define('wje-textarea', Textarea);\n"],"names":[],"mappings":"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"}

package/dist/wje-thumbnail.js

@@ -51,3 +51,4 @@ Thumbnail.define("wje-thumbnail", Thumbnail);
 export {
   Thumbnail as default
 };
+//# sourceMappingURL=wje-thumbnail.js.map

package/dist/wje-thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-thumbnail.js","sources":["../packages/wje-thumbnail/thumbnail.element.js","../packages/wje-thumbnail/thumbnail.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Thumbnail class\n * @documentation https://elements.webjet.sk/components/thumbnail\n * @status stable\n * @augments WJElement\n * @slot thumbnail-slot - The slot for the thumbnail content.\n * @cssproperty [--wje-thumbnail-width=48px] - Defines the width of the thumbnail. Accepts any valid CSS length unit such as `px`, `rem`, or `%`.\n * @cssproperty [--wje-thumbnail-height=48px] - Specifies the height of the thumbnail. Accepts any valid CSS length unit.\n * @cssproperty [--wje-thumbnail-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the thumbnail, determining how rounded its corners appear. Accepts any valid CSS length unit or CSS variable.\n * @tag thumbnail-element\n */\n\nexport default class Thumbnail extends WJElement {\n    /**\n     * Creates an instance of Thumbnail.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component\n     */\n    className = 'Thumbnail';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\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 for the thumbnail.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n}\n","import Thumbnail from './thumbnail.element.js';\n\nexport default Thumbnail;\n\nThumbnail.define('wje-thumbnail', Thumbnail);\n"],"names":[],"mappings":";;;;;AAee,MAAM,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI7C,cAAc;AACV;AAMJ;AAAA;AAAA;AAAA,qCAAY;AAAA,EALX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AACL;AC9DA,UAAU,OAAO,iBAAiB,SAAS;"}

package/dist/wje-toast.js

@@ -331,3 +331,4 @@ Toast.define("wje-toast", Toast);
 export {
   Toast as default
 };
+//# sourceMappingURL=wje-toast.js.map

package/dist/wje-toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.\n * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n    /**\n     * Creates an instance of Toast.\n     */\n    constructor() {\n        super();\n\n        this.toastStack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n    }\n\n    /**\n     * Set headline value of the toast.\n     * @param value\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Get headline value of the toast.\n     * @returns {string}\n     */\n    get headline() {\n        return this.getAttribute('headline');\n    }\n\n    /**\n     * Set open value of the toast.\n     * @param value\n     */\n    set open(value) {\n        this.removeAttribute('open');\n\n        if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n    }\n\n    /**\n     * Get open value of the toast.\n     * @returns {boolean}\n     */\n    get open() {\n        return this.hasAttribute('open');\n    }\n\n    /**\n     * Set duration value of the toast.\n     * @param value\n     */\n    set duration(value) {\n        this.setAttribute('duration', value);\n    }\n\n    /**\n     * Get duration value of the toast.\n     * @returns {number}\n     */\n    get duration() {\n        return +this.getAttribute('duration');\n    }\n\n    /**\n     * Set closable value of the toast.\n     * @param value\n     */\n    set closable(value) {\n        this.setAttribute('closable', value || '');\n    }\n\n    /**\n     * Get closable value of the toast.\n     * @returns {boolean}\n     */\n    get closable() {\n        return this.hasAttribute('closable');\n    }\n\n    /**\n     * Set color value of the toast.\n     * @param value\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Get color value of the toast.\n     * @returns {string}\n     */\n    get color() {\n        return this.getAttribute('color');\n    }\n\n    /**\n     * Set countdown value of the toast.\n     * @param value\n     */\n    set countdown(value) {\n        if (value) this.setAttribute('countdown', value);\n    }\n\n    /**\n     * Get countdown value of the toast.\n     * @returns {boolean}\n     */\n    get countdown() {\n        return this.hasAttribute('countdown');\n    }\n\n    /**\n     * Set icon value of the toast.\n     * @param value\n     */\n    set icon(value) {\n        this.setAttribute('icon', value);\n    }\n\n    /**\n     * Get icon value of the toast.\n     * @returns {string}\n     */\n    get icon() {\n        return this.getAttribute('icon');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toast';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Setup attributes for the Button element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the toast notification.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toast');\n\n        let mediaSlot = document.createElement('slot');\n        mediaSlot.setAttribute('name', 'media');\n        mediaSlot.classList.add('media');\n        mediaSlot.addEventListener('slotchange', () => {\n            if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n                mediaSlot.parentElement.classList.add('has-media');\n            } else {\n                mediaSlot.parentElement.classList.remove('has-media');\n            }\n        });\n\n        let content = document.createElement('div');\n        content.classList.add('content');\n        content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n        let iconX = document.createElement('wje-icon');\n        iconX.setAttribute('name', 'x');\n\n        let closeBtn = document.createElement('wje-button');\n        closeBtn.setAttribute('fill', 'link');\n        closeBtn.setAttribute('color', this.color);\n        closeBtn.setAttribute('size', 'small');\n        closeBtn.classList.add('close');\n\n        let countdownEl = document.createElement('div');\n        countdownEl.classList.add('countdown');\n\n        let countdownBar = document.createElement('div');\n        countdownBar.classList.add('countdown-bar');\n\n        closeBtn.appendChild(iconX);\n        countdownEl.appendChild(countdownBar);\n\n        if (this.hasAttribute('icon') && this.icon) {\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', this.icon);\n            icon.setAttribute('color', this.color);\n            icon.setAttribute('slot', 'media');\n            icon.setAttribute('part', 'icon');\n\n            this.appendChild(icon);\n        }\n\n        native.appendChild(mediaSlot);\n        native.appendChild(content);\n\n        if (this.closable) native.appendChild(closeBtn);\n\n        if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n        fragment.appendChild(native);\n\n        this.closeBtn = closeBtn;\n        this.countdownBar = countdownBar;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toast notification.\n     */\n    afterDraw() {\n        this.closeBtn.addEventListener('wje-button:click', this.hide);\n        this.addEventListener('mouseenter', this.pause);\n        this.addEventListener('mouseleave', this.resume);\n\n        if (this.hasAttribute('countdown')) {\n            const startWidth = '100%';\n            const endWidth = '0';\n\n            this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n                duration: this.duration,\n                easing: 'linear',\n            });\n        }\n\n        if (this.duration > 0) {\n            this.remainingTime = this.duration;\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Before disconnect method\n     * This method is called before the element is disconnected from the document.\n     */\n    beforeDisconnect() {\n        this.closeBtn.removeEventListener('wje-button:click', this.hide);\n        this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        this.removeEventListener('mouseenter', this.pause);\n        this.removeEventListener('mouseleave', this.resume);\n\n        clearTimeout(this.timeoutID);\n    }\n\n    /**\n     * Starts the timer.\n     * This method sets the `startTime` property to the current time and sets\n     * the `timeoutID` property to the ID of the timeout. The method also\n     * dispatches the `wje-toast:after-hide` custom event when the timeout\n     * expires.\n     */\n    startTimer() {\n        this.startTime = Date.now();\n        if (this.timeoutID) {\n            clearTimeout(this.timeoutID);\n        }\n        this.timeoutID = window.setTimeout(() => {\n            this.hide();\n        }, this.remainingTime);\n    }\n\n    /**\n     * Stops the timer.\n     * This method clears the timeout and calculates the remaining time.\n     * The method is called when the toast notification is paused.\n     */\n    stopTimer() {\n        if (this.timeoutID) {\n            window.clearTimeout(this.timeoutID);\n        }\n        const elapsedTime = Date.now() - this.startTime;\n        this.remainingTime -= elapsedTime;\n    }\n\n    /**\n     * Resumes the timer.\n     * This method resumes the timer if the remaining time is greater\n     * than zero. The method is called when the toast notification is resumed.\n     */\n    resumeTimer() {\n        if (this.remainingTime > 0) {\n            this.startTimer();\n        }\n    }\n\n    /**\n     * Asynchronously shows the toast notification.\n     * This method sets the `open` property to `true` and dispatches the\n     * `wje-toast:after-show` custom event. If the toast is already open,\n     * the method returns `undefined`.\n     */\n    show = () => {\n        if (this.open) {\n            return;\n        }\n\n        this.open = true;\n        event.dispatchCustomEvent(this, 'wje-toast:after-show');\n    };\n\n    /**\n     * Asynchronously hides the toast notification.\n     * This method sets the `open` property to `false` and dispatches the\n     * `wje-toast:after-hide` custom event. If the toast is already hidden,\n     * the method returns `undefined`.\n     */\n    hide = () => {\n        if (!this.open) {\n            return;\n        }\n\n        this.open = false;\n        event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n    };\n\n    /**\n     * Pauses the countdown animation and stops the timer.\n     */\n    pause = () => {\n        this.countdownAnimation?.pause();\n        this.stopTimer();\n    };\n\n    /**\n     * Resumes the countdown animation and resumes the timer.\n     */\n    resume = () => {\n        this.countdownAnimation?.play();\n        this.resumeTimer();\n    };\n\n    /**\n     * Removes the toast notification and the toast stack.\n     *\n     * This method removes the toast notification from the toast stack and\n     * removes the toast stack from the document body if the toast stack is\n     * empty.\n     */\n    removeChildAndStack() {\n        this.toastStack.removeChild(this);\n\n        if (this.toastStack.querySelector('wje-toast') === null) {\n            this.toastStack.remove();\n        }\n    }\n\n    /**\n     * Asynchronously starts the toast notification.\n     * This method appends the toast notification to the document body and\n     * shows the toast notification. The method returns a promise that\n     * resolves when the toast notification is shown.\n     * @returns {Promise<unknown>}\n     */\n    start = () => {\n        return new Promise((resolve) => {\n            let stack = document.body.querySelector('.wje-toast-stack');\n            if (stack) {\n                this.toastStack = stack;\n            }\n\n            if (this.toastStack.parentElement === null) {\n                document.body.append(this.toastStack);\n            }\n\n            this.toastStack.append(this);\n\n            this.show();\n\n            this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n        });\n    };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":";;;;;AAsBe,MAAM,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,EAIzC,cAAc;AACV;AA2HJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AA2KZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAO,MAAM;AACT,UAAI,KAAK,MAAM;AACX;AAAA,MACH;AAED,WAAK,OAAO;AACZ,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,IAC9D;AAQI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAAO,MAAM;AACT,UAAI,CAAC,KAAK,MAAM;AACZ;AAAA,MACH;AAED,WAAK,OAAO;AACZ,YAAM,oBAAoB,MAAM,sBAAsB;AAAA,IAC9D;AAKI;AAAA;AAAA;AAAA,iCAAQ,MAAM;;AACV,iBAAK,uBAAL,mBAAyB;AACzB,WAAK,UAAS;AAAA,IACtB;AAKI;AAAA;AAAA;AAAA,kCAAS,MAAM;;AACX,iBAAK,uBAAL,mBAAyB;AACzB,WAAK,YAAW;AAAA,IACxB;AAwBI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iCAAQ,MAAM;AACV,aAAO,IAAI,QAAQ,CAAC,YAAY;AAC5B,YAAI,QAAQ,SAAS,KAAK,cAAc,kBAAkB;AAC1D,YAAI,OAAO;AACP,eAAK,aAAa;AAAA,QACrB;AAED,YAAI,KAAK,WAAW,kBAAkB,MAAM;AACxC,mBAAS,KAAK,OAAO,KAAK,UAAU;AAAA,QACvC;AAED,aAAK,WAAW,OAAO,IAAI;AAE3B,aAAK,KAAI;AAET,aAAK,iBAAiB,wBAAwB,KAAK,mBAAmB;AAAA,MAClF,CAAS;AAAA,IACT;AAnXQ,SAAK,aAAa,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG,EAAE,WAAW,kBAAmB,CAAA;AAAA,EAClG;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,KAAK,OAAO;AACZ,SAAK,gBAAgB,MAAM;AAE3B,QAAI,eAAe,gBAAgB,KAAK,EAAG,MAAK,aAAa,QAAQ,KAAK;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,YAAY,SAAS,EAAE;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,MAAM,OAAO;AACb,SAAK,aAAa,SAAS,KAAK;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,QAAQ;AACR,WAAO,KAAK,aAAa,OAAO;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,UAAU,OAAO;AACjB,QAAI,MAAO,MAAK,aAAa,aAAa,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,YAAY;AACZ,WAAO,KAAK,aAAa,WAAW;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,KAAK,OAAO;AACZ,SAAK,aAAa,QAAQ,KAAK;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,cAAc;AAEnC,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AACtC,cAAU,UAAU,IAAI,OAAO;AAC/B,cAAU,iBAAiB,cAAc,MAAM;AAC3C,UAAI,eAAe,eAAe,KAAK,SAAS,OAAO,GAAG;AACtD,kBAAU,cAAc,UAAU,IAAI,WAAW;AAAA,MACjE,OAAmB;AACH,kBAAU,cAAc,UAAU,OAAO,WAAW;AAAA,MACvD;AAAA,IACb,CAAS;AAED,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,UAAU,IAAI,SAAS;AAC/B,YAAQ,YAAY,yBAAyB,KAAK,QAAQ;AAE1D,QAAI,QAAQ,SAAS,cAAc,UAAU;AAC7C,UAAM,aAAa,QAAQ,GAAG;AAE9B,QAAI,WAAW,SAAS,cAAc,YAAY;AAClD,aAAS,aAAa,QAAQ,MAAM;AACpC,aAAS,aAAa,SAAS,KAAK,KAAK;AACzC,aAAS,aAAa,QAAQ,OAAO;AACrC,aAAS,UAAU,IAAI,OAAO;AAE9B,QAAI,cAAc,SAAS,cAAc,KAAK;AAC9C,gBAAY,UAAU,IAAI,WAAW;AAErC,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,UAAU,IAAI,eAAe;AAE1C,aAAS,YAAY,KAAK;AAC1B,gBAAY,YAAY,YAAY;AAEpC,QAAI,KAAK,aAAa,MAAM,KAAK,KAAK,MAAM;AACxC,UAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,WAAK,aAAa,QAAQ,KAAK,IAAI;AACnC,WAAK,aAAa,SAAS,KAAK,KAAK;AACrC,WAAK,aAAa,QAAQ,OAAO;AACjC,WAAK,aAAa,QAAQ,MAAM;AAEhC,WAAK,YAAY,IAAI;AAAA,IACxB;AAED,WAAO,YAAY,SAAS;AAC5B,WAAO,YAAY,OAAO;AAE1B,QAAI,KAAK,SAAU,QAAO,YAAY,QAAQ;AAE9C,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,WAAW;AAElE,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,eAAe;AAEpB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,SAAK,SAAS,iBAAiB,oBAAoB,KAAK,IAAI;AAC5D,SAAK,iBAAiB,cAAc,KAAK,KAAK;AAC9C,SAAK,iBAAiB,cAAc,KAAK,MAAM;AAE/C,QAAI,KAAK,aAAa,WAAW,GAAG;AAChC,YAAM,aAAa;AACnB,YAAM,WAAW;AAEjB,WAAK,qBAAqB,KAAK,aAAa,QAAQ,CAAC,EAAE,OAAO,WAAU,GAAI,EAAE,OAAO,SAAU,CAAA,GAAG;AAAA,QAC9F,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,MACxB,CAAa;AAAA,IACJ;AAED,QAAI,KAAK,WAAW,GAAG;AACnB,WAAK,gBAAgB,KAAK;AAC1B,WAAK,WAAU;AAAA,IAClB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,mBAAmB;AACf,SAAK,SAAS,oBAAoB,oBAAoB,KAAK,IAAI;AAC/D,SAAK,oBAAoB,wBAAwB,KAAK,mBAAmB;AACzE,SAAK,oBAAoB,cAAc,KAAK,KAAK;AACjD,SAAK,oBAAoB,cAAc,KAAK,MAAM;AAElD,iBAAa,KAAK,SAAS;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASD,aAAa;AACT,SAAK,YAAY,KAAK;AACtB,QAAI,KAAK,WAAW;AAChB,mBAAa,KAAK,SAAS;AAAA,IAC9B;AACD,SAAK,YAAY,OAAO,WAAW,MAAM;AACrC,WAAK,KAAI;AAAA,IACrB,GAAW,KAAK,aAAa;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,YAAY;AACR,QAAI,KAAK,WAAW;AAChB,aAAO,aAAa,KAAK,SAAS;AAAA,IACrC;AACD,UAAM,cAAc,KAAK,IAAG,IAAK,KAAK;AACtC,SAAK,iBAAiB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,cAAc;AACV,QAAI,KAAK,gBAAgB,GAAG;AACxB,WAAK,WAAU;AAAA,IAClB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuDD,sBAAsB;AAClB,SAAK,WAAW,YAAY,IAAI;AAEhC,QAAI,KAAK,WAAW,cAAc,WAAW,MAAM,MAAM;AACrD,WAAK,WAAW;IACnB;AAAA,EACJ;AA2BL;AC7YA,MAAM,OAAO,aAAa,KAAK;"}

package/dist/wje-toggle.js

@@ -122,3 +122,4 @@ Toggle.define("wje-toggle", Toggle);
 export {
   Toggle as default
 };
+//# sourceMappingURL=wje-toggle.js.map

package/dist/wje-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends WJElement {\n    /**\n     * Creates an instance of Toggle.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set checked(value) {\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set color attribute for the toggle element.\n     * @type {string}\n     */\n    className = 'Toggle';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the toggle element.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['checked', 'disabled'];\n    }\n\n    /**\n     * Set up the attributes for the toggle element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw the toggle element for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toggle');\n\n        let input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.setAttribute('type', 'checkbox');\n        input.setAttribute('name', this.name);\n        input.setAttribute('id', 'input');\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        let labelWrapper = document.createElement('div');\n        labelWrapper.setAttribute('part', 'toggle');\n        labelWrapper.classList.add('label-wrapper');\n\n        let text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        element.appendChild(input);\n        element.appendChild(label);\n\n        if (this.placement === 'end') {\n            element.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(labelWrapper);\n        } else {\n            label.appendChild(labelWrapper);\n            label.appendChild(text);\n        }\n\n        fragment.appendChild(element);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toggle element to add event listeners for the input element after the element is drawn.\n     */\n    afterDraw() {\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n        }\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":";;;;;AA4Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV;AAuCJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAtCX;AAAA;AAAA;AAAA;AAAA,EAKD,IAAI,SAAS,OAAO;AAChB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKD,IAAI,QAAQ,OAAO;AACf,QAAI,MAAO,MAAK,aAAa,WAAW,EAAE;AAAA,QACrC,MAAK,gBAAgB,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,UAAU;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,aAAa,QAAQ,KAAK,IAAI;AACpC,UAAM,aAAa,MAAM,OAAO;AAChC,UAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAE7C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,OAAO,OAAO;AAEjC,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,aAAa,QAAQ,QAAQ;AAC1C,iBAAa,UAAU,IAAI,eAAe;AAE1C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY;AAEjB,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,YAAQ,YAAY,KAAK;AACzB,YAAQ,YAAY,KAAK;AAEzB,QAAI,KAAK,cAAc,OAAO;AAC1B,cAAQ,UAAU,IAAI,KAAK;AAC3B,YAAM,YAAY,IAAI;AACtB,YAAM,YAAY,YAAY;AAAA,IAC1C,OAAe;AACH,YAAM,YAAY,YAAY;AAC9B,YAAM,YAAY,IAAI;AAAA,IACzB;AAED,aAAS,YAAY,OAAO;AAE5B,SAAK,QAAQ;AAEb,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAKD,YAAY;AACR,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MAClE,CAAa;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AACzC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACnE,CAAa;AAAA,IACJ;AAAA,EACJ;AACL;AChKA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-toolbar-action.js

@@ -69,3 +69,4 @@ ToolbarAction.define("wje-toolbar-action", ToolbarAction);
 export {
   ToolbarAction as default
 };
+//# sourceMappingURL=wje-toolbar-action.js.map

package/dist/wje-toolbar-action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toolbar-action.js","sources":["../packages/wje-toolbar-action/toolbar-action.element.js","../packages/wje-toolbar-action/toolbar-action.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `ToolbarAction` is a custom web component that represents a toolbar action.\n * @summary This element represents a toolbar action.\n * @documentation https://elements.webjet.sk/components/toolbar-action\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar action wrapper.\n * @slot - The default slot for the toolbar action.\n * @tag wje-toolbar-action\n */\nexport default class ToolbarAction extends WJElement {\n    /**\n     * Creates an instance of ToolbarAction.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'ToolbarAction';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\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 for the toolbar action.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let maxItems = +this.maxItems || 0;\n        let actions = this.getActions();\n\n        let slot = document.createElement('slot');\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toolbar-action');\n\n        const shouldCollapse = maxItems !== 0 && actions.length > maxItems;\n        if (shouldCollapse) {\n            element = document.createElement('wje-dropdown');\n        }\n\n        element.appendChild(slot);\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Returns the actions for the toolbar action.\n     * @returns {Array} An array of wje-button elements\n     */\n    getActions() {\n        return Array.from(this.querySelectorAll('wje-button'));\n    }\n}\n","import ToolbarAction from './toolbar-action.element.js';\n\nexport default ToolbarAction;\n\nToolbarAction.define('wje-toolbar-action', ToolbarAction);\n"],"names":[],"mappings":";;;;;AAae,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjD,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,WAAW,CAAC,KAAK,YAAY;AACjC,QAAI,UAAU,KAAK;AAEnB,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,uBAAuB;AAE7C,UAAM,iBAAiB,aAAa,KAAK,QAAQ,SAAS;AAC1D,QAAI,gBAAgB;AAChB,gBAAU,SAAS,cAAc,cAAc;AAAA,IAClD;AAED,YAAQ,YAAY,IAAI;AAExB,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,aAAa;AACT,WAAO,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAAA,EACxD;AACL;ACnFA,cAAc,OAAO,sBAAsB,aAAa;"}

package/dist/wje-toolbar.js

@@ -60,3 +60,4 @@ Toolbar.define("wje-toolbar", Toolbar);
 export {
   Toolbar as default
 };
+//# sourceMappingURL=wje-toolbar.js.map

package/dist/wje-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-toolbar.js","sources":["../packages/wje-toolbar/toolbar.element.js","../packages/wje-toolbar/toolbar.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toolbar` is a custom web component that represents a toolbar.\n * @summary This element represents a toolbar.\n * @documentation https://elements.webjet.sk/components/toolbar\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toolbar wrapper.\n * @slot start - The start slot for the toolbar.\n * @slot end - The end slot for the toolbar.\n * @cssproperty [--wje-toolbar-background=var(--wje-background)] - Specifies the background color of the toolbar. Accepts any valid CSS color value, such as `hex`, `rgb`, or `CSS variable`.\n * @cssproperty [--wje-toolbar-height=auto] - Defines the height of the toolbar. If set to `auto`, the height adjusts based on the content.\n * @cssproperty [--wje-toolbar-min-height=70px] - Sets the minimum height of the toolbar. Ensures the toolbar maintains a consistent minimum size.\n * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.\n * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.\n * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.\n * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.\n * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.\n * @tag wje-toolbar\n */\n\nexport default class Toolbar extends WJElement {\n    /**\n     * Creates an instance of Toolbar.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Toolbar';\n\n    /**\n     * Returns the CSS stylesheet for the component.\n     * @static\n     * @returns {CSSStyleSheet} The CSS stylesheet\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of observed attributes.\n     * @static\n     * @returns {Array} An empty array\n     */\n    static get observedAttributes() {\n        return [];\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 for the toolbar.\n     * @returns {object} Document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toolbar');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(end);\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n}\n","import Toolbar from './toolbar.element.js';\n\nexport default Toolbar;\n\nToolbar.define('wje-toolbar', Toolbar);\n"],"names":[],"mappings":";;;;;AAuBe,MAAM,gBAAgB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI3C,cAAc;AACV;AAOJ;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaD,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOD,WAAW,qBAAqB;AAC5B,WAAO;EACV;AAAA;AAAA;AAAA;AAAA,EAKD,kBAAkB;AACd,SAAK,eAAe;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMD,OAAO;AACH,QAAI,WAAW,SAAS;AAExB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,MAAM,SAAS,cAAc,MAAM;AACvC,QAAI,aAAa,QAAQ,KAAK;AAE9B,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,GAAG;AACtB,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACV;AACL;ACjFA,QAAQ,OAAO,eAAe,OAAO;"}

package/dist/wje-tooltip.js

@@ -163,3 +163,4 @@ Tooltip.define("wje-tooltip", Tooltip);
 export {
   Tooltip as default
 };
+//# sourceMappingURL=wje-tooltip.js.map