wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.1

package/dist/wje-slider.js

@@ -16,7 +16,9 @@ class Slider extends WJElement {
      * Sets the handle position of the slider.
      */
     __publicField(this, "setHandlePosition", () => {
+      if (!this.input) return;
       this.input.style.backgroundSize = this.getPercentage(this.input.min, this.input.max, this.input.value) + "% 100%";
+      this.syncAria();
     });
     /**
      * Updates the position and content of a bubble element based on the input value.
@@ -48,6 +50,10 @@ class Slider extends WJElement {
       this.input.value = value;
       this.setHandlePosition();
     }
+    if (this.output && this.hasAttribute("bubble")) {
+      this.output.innerHTML = value;
+      setTimeout(this.setBubble, 0);
+    }
   }
   /**
    * Returns the value of the slider.
@@ -112,13 +118,42 @@ class Slider extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["max"];
+    return ["max", "min", "step", "value", "disabled", "bubble"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    var _a, _b, _c;
+    if (oldValue === newValue) return;
+    if (["max", "min", "step", "value", "disabled", "bubble"].includes(name)) {
+      if (this.input) {
+        if (name === "min") this.input.min = this.min;
+        if (name === "max") this.input.max = this.max;
+        if (name === "step") this.input.step = this.step;
+        if (name === "value") this.input.value = this.value;
+        if (name === "disabled") this.input.disabled = this.hasAttribute("disabled");
+      }
+      if (name === "bubble" && this.output) {
+        if (this.hasAttribute("bubble")) {
+          this.output.removeAttribute("hidden");
+          this.output.innerHTML = ((_a = this.input) == null ? void 0 : _a.value) ?? this.value;
+          setTimeout(this.setBubble, 0);
+        } else {
+          this.output.setAttribute("hidden", "");
+        }
+      }
+      if (["min", "max", "value", "disabled"].includes(name) && this.input) {
+        (_b = this.setHandlePosition) == null ? void 0 : _b.call(this);
+        this.syncAria();
+      }
+      return;
+    }
+    (_c = super.attributeChangedCallback) == null ? void 0 : _c.call(this, name, oldValue, newValue);
   }
   /**
    * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Draws the component for the slider.
@@ -152,6 +187,7 @@ class Slider extends WJElement {
     input.part = "slider";
     input.setAttribute("autocomplete", "off");
     input.setAttribute("color", this.color || "");
+    if (this.hasAttribute("disabled")) input.disabled = true;
     input.addEventListener("input", null, (e) => {
       this.setHandlePosition(e.target);
     });
@@ -166,6 +202,7 @@ class Slider extends WJElement {
     fragment.appendChild(element);
     this.input = input;
     this.output = output;
+    this.syncAria();
     return fragment;
   }
   /**
@@ -203,6 +240,19 @@ class Slider extends WJElement {
         output: this.output
       });
     });
+    this.syncAria();
+  }
+  /**
+   * Syncs ARIA attributes on the host element.
+   */
+  syncAria() {
+    this.setAriaState({
+      role: "slider",
+      valuemin: this.min,
+      valuemax: this.max,
+      valuenow: this.value,
+      disabled: this.hasAttribute("disabled")
+    });
   }
   /**
    * Calculates the percentage of a value within a given range.

package/dist/wje-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n */\n\nexport default class Slider extends WJElement {\n    /**\n     * Creates an instance of Slider.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the slider.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n\n        if (this.input) {\n            this.input.value = value;\n            this.setHandlePosition();\n        }\n    }\n\n    /**\n     * Returns the value of the slider.\n     * @returns {number} The value of the slider input.\n     */\n    get value() {\n        return this.getAttribute('value') || 0;\n    }\n\n    /**\n     * Sets the minimum value of the slider.\n     * @param {number} value The minimum value to set.\n     */\n    set min(value) {\n        this.setAttribute('min', value);\n    }\n\n    /**\n     * Returns the minimum value of the slider.\n     * @returns {number} The minimum value of the slider.\n     */\n    get min() {\n        return this.getAttribute('min') || 0;\n    }\n\n    /**\n     * Sets the maximum value of the slider.\n     * @param {number} value The maximum value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Returns the maximum value of the slider.\n     * @returns {number} The maximum value of the slider.\n     */\n    get max() {\n        return this.getAttribute('max') || 100;\n    }\n\n    /**\n     * Sets the step value of the slider.\n     * @param {number} value The step value to set.\n     */\n    set step(value) {\n        this.setAttribute('step', value);\n    }\n\n    /**\n     * Returns the step value of the slider.\n     * @returns {number} The step value of the slider.\n     */\n    get step() {\n        return this.getAttribute('step') || 1;\n    }\n\n    className = 'Slider';\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 ['max'];\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 slider.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.className = 'native-slider';\n        element.setAttribute('part', 'native');\n\n        let slider = document.createElement('div');\n        slider.className = 'slider';\n\n        let label = document.createElement('slot');\n        label.name = 'label';\n\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        let end = document.createElement('slot');\n        end.name = 'end';\n\n        let output = document.createElement('output');\n        output.setAttribute('for', 'slider');\n        output.id = 'output';\n        output.setAttribute('hidden', '');\n\n        let input = document.createElement('input');\n        input.type = 'range';\n        input.min = this.min;\n        input.max = this.max;\n        input.step = this.step;\n        input.value = this.value;\n        input.id = 'slider';\n        input.name = 'slider';\n        input.part = 'slider';\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('color', this.color || '');\n\n        input.addEventListener('input', null, (e) => {\n            this.setHandlePosition(e.target);\n        });\n\n        slider.appendChild(input);\n        if (this.hasAttribute('bubble')) {\n            slider.appendChild(output);\n        }\n        element.appendChild(label);\n        element.appendChild(start);\n        element.appendChild(slider);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n\n        this.input = input;\n        this.output = output;\n\n        return fragment;\n    }\n\n    /**\n     * Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n     * - Sets the position of the handle.\n     * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n     * - Dispatches initialization, movement, and change custom events for the slider input element.\n     * - Updates the bubble position and value dynamically on input changes.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.setHandlePosition();\n\n        if (this.hasAttribute('bubble')) {\n            this.output.innerHTML = this.input.value;\n            this.output.removeAttribute('hidden');\n\n            setTimeout(this.setBubble, 50);\n        }\n\n        event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n            value: this.input.value,\n            output: this.output,\n        });\n\n        event.addListener(this.input, 'input', null, (e) => {\n            this.value = e.target.value;\n\n            event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n                value: e.target.value,\n                output: this.output,\n            });\n\n            if (this.hasAttribute('bubble')) {\n                this.setBubble();\n            }\n        });\n\n        event.addListener(this.input, 'change', null, (e) => {\n            event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n                value: e.target.value,\n                output: this.output,\n            });\n        });\n    }\n\n    /**\n     * Sets the handle position of the slider.\n     */\n    setHandlePosition = () => {\n        this.input.style.backgroundSize =\n            this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n    };\n\n    /**\n     * Updates the position and content of a bubble element based on the input value.\n     *\n     * This function calculates the position of the bubble using the percentage representation\n     * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n     * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n     * content to reflect the current input value.\n     *\n     * The function relies on the following elements:\n     * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n     * - `this.output`: Represents the bubble element to be positioned and updated.\n     *\n     * The left positioning of the bubble ensures precise alignment with the input value indicator.\n     */\n    setBubble = () => {\n        let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n        this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n        this.output.innerHTML = this.input.value;\n    };\n\n    /**\n     * Calculates the percentage of a value within a given range.\n     * @param {number} min The minimum value of the range.\n     * @param {number} max The maximum value of the range.\n     * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n     * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n     */\n    getPercentage(min, max, value = 0) {\n        return Number(((value - min) * 100) / (max - min)) || 0;\n    }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-slider.js","sources":["../packages/wje-slider/slider.element.js","../packages/wje-slider/slider.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * Represents a slider component that extends the WJElement class.\n * This slider supports features such as min, max, step values, bubble display, and event handling.\n * It offers both getter and setter methods for its attributes and dynamically handles rendering and updates.\n */\n\nexport default class Slider extends WJElement {\n    /**\n     * Creates an instance of Slider.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the value of the slider.\n     * @param {number} value The value to set.\n     */\n    set value(value) {\n        this.setAttribute('value', value);\n\n        if (this.input) {\n            this.input.value = value;\n            this.setHandlePosition();\n        }\n        if (this.output && this.hasAttribute('bubble')) {\n            this.output.innerHTML = value;\n            setTimeout(this.setBubble, 0);\n        }\n    }\n\n    /**\n     * Returns the value of the slider.\n     * @returns {number} The value of the slider input.\n     */\n    get value() {\n        return this.getAttribute('value') || 0;\n    }\n\n    /**\n     * Sets the minimum value of the slider.\n     * @param {number} value The minimum value to set.\n     */\n    set min(value) {\n        this.setAttribute('min', value);\n    }\n\n    /**\n     * Returns the minimum value of the slider.\n     * @returns {number} The minimum value of the slider.\n     */\n    get min() {\n        return this.getAttribute('min') || 0;\n    }\n\n    /**\n     * Sets the maximum value of the slider.\n     * @param {number} value The maximum value to set.\n     */\n    set max(value) {\n        this.setAttribute('max', value);\n    }\n\n    /**\n     * Returns the maximum value of the slider.\n     * @returns {number} The maximum value of the slider.\n     */\n    get max() {\n        return this.getAttribute('max') || 100;\n    }\n\n    /**\n     * Sets the step value of the slider.\n     * @param {number} value The step value to set.\n     */\n    set step(value) {\n        this.setAttribute('step', value);\n    }\n\n    /**\n     * Returns the step value of the slider.\n     * @returns {number} The step value of the slider.\n     */\n    get step() {\n        return this.getAttribute('step') || 1;\n    }\n\n    className = 'Slider';\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 ['max', 'min', 'step', 'value', 'disabled', 'bubble'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        // Avoid full re-render for slider updates; update DOM in place.\n        if (['max', 'min', 'step', 'value', 'disabled', 'bubble'].includes(name)) {\n            if (this.input) {\n                if (name === 'min') this.input.min = this.min;\n                if (name === 'max') this.input.max = this.max;\n                if (name === 'step') this.input.step = this.step;\n                if (name === 'value') this.input.value = this.value;\n                if (name === 'disabled') this.input.disabled = this.hasAttribute('disabled');\n            }\n\n            if (name === 'bubble' && this.output) {\n                if (this.hasAttribute('bubble')) {\n                    this.output.removeAttribute('hidden');\n                    this.output.innerHTML = this.input?.value ?? this.value;\n                    setTimeout(this.setBubble, 0);\n                } else {\n                    this.output.setAttribute('hidden', '');\n                }\n            }\n\n            if (['min', 'max', 'value', 'disabled'].includes(name) && this.input) {\n                this.setHandlePosition?.();\n                this.syncAria();\n            }\n\n            return;\n        }\n\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the slider.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.className = 'native-slider';\n        element.setAttribute('part', 'native');\n\n        let slider = document.createElement('div');\n        slider.className = 'slider';\n\n        let label = document.createElement('slot');\n        label.name = 'label';\n\n        let start = document.createElement('slot');\n        start.name = 'start';\n\n        let end = document.createElement('slot');\n        end.name = 'end';\n\n        let output = document.createElement('output');\n        output.setAttribute('for', 'slider');\n        output.id = 'output';\n        output.setAttribute('hidden', '');\n\n        let input = document.createElement('input');\n        input.type = 'range';\n        input.min = this.min;\n        input.max = this.max;\n        input.step = this.step;\n        input.value = this.value;\n        input.id = 'slider';\n        input.name = 'slider';\n        input.part = 'slider';\n        input.setAttribute('autocomplete', 'off');\n        input.setAttribute('color', this.color || '');\n        if (this.hasAttribute('disabled')) input.disabled = true;\n\n        input.addEventListener('input', null, (e) => {\n            this.setHandlePosition(e.target);\n        });\n\n        slider.appendChild(input);\n        if (this.hasAttribute('bubble')) {\n            slider.appendChild(output);\n        }\n        element.appendChild(label);\n        element.appendChild(start);\n        element.appendChild(slider);\n        element.appendChild(end);\n\n        fragment.appendChild(element);\n\n        this.input = input;\n        this.output = output;\n\n        this.syncAria();\n        return fragment;\n    }\n\n    /**\n     * Handles the post-rendering logic for a custom slider component. This method performs the following tasks:\n     * - Sets the position of the handle.\n     * - Displays a bubble indicator with the current value, if the slider has a \"bubble\" attribute.\n     * - Dispatches initialization, movement, and change custom events for the slider input element.\n     * - Updates the bubble position and value dynamically on input changes.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.setHandlePosition();\n\n        if (this.hasAttribute('bubble')) {\n            this.output.innerHTML = this.input.value;\n            this.output.removeAttribute('hidden');\n\n            setTimeout(this.setBubble, 50);\n        }\n\n        event.dispatchCustomEvent(this.input, 'wje-slider:init', {\n            value: this.input.value,\n            output: this.output,\n        });\n\n        event.addListener(this.input, 'input', null, (e) => {\n            this.value = e.target.value;\n\n            event.dispatchCustomEvent(this.input, 'wje-slider:move', {\n                value: e.target.value,\n                output: this.output,\n            });\n\n            if (this.hasAttribute('bubble')) {\n                this.setBubble();\n            }\n        });\n\n        event.addListener(this.input, 'change', null, (e) => {\n            event.dispatchCustomEvent(this.input, 'wje-slider:change', {\n                value: e.target.value,\n                output: this.output,\n            });\n        });\n\n        this.syncAria();\n    }\n\n    /**\n     * Sets the handle position of the slider.\n     */\n    setHandlePosition = () => {\n        if (!this.input) return;\n        this.input.style.backgroundSize =\n            this.getPercentage(this.input.min, this.input.max, this.input.value) + '% 100%';\n        this.syncAria();\n    };\n\n    /**\n     * Syncs ARIA attributes on the host element.\n     */\n    syncAria() {\n        this.setAriaState({\n            role: 'slider',\n            valuemin: this.min,\n            valuemax: this.max,\n            valuenow: this.value,\n            disabled: this.hasAttribute('disabled'),\n        });\n    }\n\n    /**\n     * Updates the position and content of a bubble element based on the input value.\n     *\n     * This function calculates the position of the bubble using the percentage representation\n     * of the input's current value relative to its minimum and maximum bounds. It then adjusts\n     * the bubble's left position dynamically for aesthetic purposes and updates its displayed\n     * content to reflect the current input value.\n     *\n     * The function relies on the following elements:\n     * - `this.input`: Represents the input element with properties `min`, `max`, and `value`.\n     * - `this.output`: Represents the bubble element to be positioned and updated.\n     *\n     * The left positioning of the bubble ensures precise alignment with the input value indicator.\n     */\n    setBubble = () => {\n        let newValue = this.getPercentage(this.input.min, this.input.max, this.input.value);\n        this.output.style.left = `calc(${newValue}% + (${8 - newValue * 0.15}px) - ${this.output.offsetWidth / 2}px)`;\n        this.output.innerHTML = this.input.value;\n    };\n\n    /**\n     * Calculates the percentage of a value within a given range.\n     * @param {number} min The minimum value of the range.\n     * @param {number} max The maximum value of the range.\n     * @param {number} [value] The current value within the range. Defaults to 0 if not provided.\n     * @returns {number} The calculated percentage as a number between 0 and 100. Returns 0 if the range is invalid.\n     */\n    getPercentage(min, max, value = 0) {\n        return Number(((value - min) * 100) / (max - min)) || 0;\n    }\n}\n","import Slider from './slider.element.js';\n\nexport default Slider;\n\nSlider.define('wje-slider', Slider);\n"],"names":[],"mappings":"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"}

package/dist/wje-sliding-container.js

@@ -235,6 +235,7 @@ class SlidingContainer extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.syncAria();
   }
   /**
    * Executes before drawing the element.
@@ -301,12 +302,27 @@ class SlidingContainer extends WJElement {
    * Calls the checkForVariant method with the current variant.
    */
   afterDraw() {
+    this.syncAria();
     document.addEventListener(this.trigger, this.triggerEvent);
     if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {
       this.variant = "over";
     }
     this.checkForVariant(this.variant);
   }
+  /**
+   * Sync ARIA attributes on host.
+   */
+  syncAria() {
+    if (!this.hasAttribute("role")) {
+      this.setAriaState({ role: "region" });
+    }
+    this.setAriaState({ hidden: !this.isOpen });
+    const ariaLabel = this.getAttribute("aria-label");
+    const label = this.getAttribute("label");
+    if (!ariaLabel && label) {
+      this.setAriaState({ label });
+    }
+  }
   /**
    * Creates and returns a styled close button element with an icon,
    * including an event listener to trigger the close method.
@@ -503,6 +519,7 @@ class SlidingContainer extends WJElement {
         event.dispatchCustomEvent(this, "wje-sliding-container:beforeOpen");
         this.checkForVariant(this.variant);
         await this.doAnimateTransition();
+        this.syncAria();
         await Promise.resolve(this.afterOpen(e)).then(() => {
           event.dispatchCustomEvent(this, "wje-sliding-container:open");
         });
@@ -520,6 +537,7 @@ class SlidingContainer extends WJElement {
         this.classList.remove("open");
         event.dispatchCustomEvent(this, "wje-sliding-container:beforeClose");
         await this.doAnimateTransition();
+        this.syncAria();
         await Promise.resolve(this.afterClose(e)).then(() => {
           if (this.removeChildAfterClose) {
             this.childNodes.forEach((child) => {

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

@@ -1 +1 @@
-{"version":3,"file":"wje-sliding-container.js","sources":["../packages/wje-sliding-container/sliding-container.element.js","../packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').\n * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.\n * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the \"over\" variant for smaller screens.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.\n * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n    /**\n     * Creates an instance of SlidingContainer.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._isOpen = false;\n        this._lastCaller = null;\n\n        this._resizeObserver = new ResizeObserver((entries) => {\n            for (let entry of entries) {\n                if (entry.contentBoxSize) {\n                    if (this.drawingStatus < 3) return;\n\n                    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n                        if (this.variant !== 'over') {\n                            this.variant = 'over';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    } else {\n                        if (this.variant !== 'in-place') {\n                            this.variant = 'in-place';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    }\n                }\n            }\n        });\n\n        this._resizeObserver.observe(document.documentElement);\n    }\n\n    /**\n     * Sets the maximum width of an element by updating the 'max-width' attribute.\n     * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).\n     */\n    set maxWidth(value) {\n        this.setAttribute('max-width', value);\n    }\n\n    /**\n     * Gets the maximum width value of the element.\n     * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.\n     * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.\n     */\n    get maxWidth() {\n        return this.getAttribute('max-width') ?? 'auto';\n    }\n\n    /**\n     * Sets the maximum height for the element.\n     * @param {string} value The maximum height value to be applied to the element. This can include units such as \"px\", \"em\", \"%\", etc.\n     */\n    set maxHeight(value) {\n        this.setAttribute('max-height', value);\n    }\n\n    /**\n     * Retrieves the maximum height value of the element, or returns 'auto' if not set.\n     * @returns {string} The maximum height value or 'auto' if the attribute is not specified.\n     */\n    get maxHeight() {\n        return this.getAttribute('max-height') ?? 'auto';\n    }\n\n    /**\n     * Sets the 'trigger' attribute for the element.\n     * @param {string} value The value to set for the 'trigger' attribute.\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.\n     * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.\n     */\n    get trigger() {\n        return this.getAttribute('trigger') ?? 'sliding-container';\n    }\n\n    /**\n     * Sets the direction attribute for the element.\n     * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.\n     */\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    /**\n     * Retrieves the direction attribute of the instance.\n     * If the direction attribute is not set, it defaults to 'right'.\n     * @returns {string} The value of the direction attribute or 'right' if not set.\n     */\n    get direction() {\n        return this.getAttribute('direction') ?? 'right';\n    }\n\n    /**\n     * Sets the value of the `remove-child-after-close` attribute.\n     * This attribute determines if a child element should be removed after a close operation.\n     * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.\n     */\n    set removeChildAfterClose(value) {\n        this.setAttribute('remove-child-after-close', value);\n    }\n\n    /**\n     * Gets the value indicating whether the child element should be removed after closing.\n     *\n     * This property checks the presence of the 'remove-child-after-close' attribute on the element.\n     * Returns `false` if the attribute does not exist.\n     * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.\n     */\n    get removeChildAfterClose() {\n        return this.hasAttribute('remove-child-after-close') ?? false;\n    }\n\n    /**\n     * Sets the 'variant' attribute to the specified value.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Retrieves the value of the \"variant\" attribute. If the attribute is not set,\n     * it returns the default value 'in-place'.\n     * @returns {string} The variant value or the default value 'in-place'.\n     */\n    get variant() {\n        return this.getAttribute('variant') ?? 'in-place';\n    }\n\n    /**\n     * Retrieves the value of the 'screen-break-point' attribute.\n     * @returns {string} The value of the 'screen-break-point' attribute.\n     */\n    get screenBreakPoint() {\n        return this.getAttribute('screen-break-point');\n    }\n\n    /**\n     * Sets the screen break point value to determine responsive behavior.\n     * @param {string} value The value to set as the screen break point.\n     */\n    set screenBreakPoint(value) {\n        this.setAttribute('screen-break-point', value);\n    }\n\n    /**\n     * Sets the duration of the animation by updating the `animation-duration` attribute.\n     * @param {string} value The duration value for the animation, specified in a format\n     * such as seconds (e.g., \"2s\") or milliseconds (e.g., \"200ms\").\n     */\n    set animationDuration(value) {\n        this.setAttribute('animation-duration', value);\n    }\n\n    /**\n     * Gets the animation duration for an element.\n     * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.\n     * @returns {string} The value of the animation duration, either from the attribute or the default '500'.\n     */\n    get animationDuration() {\n        return this.getAttribute('animation-duration') ?? '500';\n    }\n\n    /**\n     * Sets the easing function for the animation.\n     * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as \"ease\", \"linear\", \"ease-in\", \"ease-out\", etc.\n     */\n    set animationEasing(value) {\n        this.setAttribute('animation-easing', value);\n    }\n\n    /**\n     * Retrieves the easing function for the animation.\n     * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.\n     */\n    get animationEasing() {\n        return this.getAttribute('animation-easing') ?? 'linear';\n    }\n\n    /**\n     * Determines if the element has an 'has-opacity' attribute.\n     * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.\n     */\n    get hasOpacity() {\n        return this.hasAttribute('has-opacity') ?? false;\n    }\n\n    /**\n     * Sets the value of the 'add-to-height' attribute.\n     * This attribute is used to modify or adjust the height dynamically.\n     * @param {string} value The value to be assigned to the 'add-to-height' attribute.\n     */\n    set addToHeight(value) {\n        this.setAttribute('add-to-height', value);\n    }\n\n    /**\n     * Retrieves the value of the 'add-to-height' attribute from the element.\n     * If the attribute is not set, it defaults to '0'.\n     * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.\n     */\n    get addToHeight() {\n        return this.getAttribute('add-to-height') ?? '0';\n    }\n\n    /**\n     * Determines whether the current state is open.\n     * @returns {boolean} True if the state is open, otherwise false.\n     */\n    get isOpen() {\n        return this._isOpen;\n    }\n\n    className = 'SlidingContainer';\n\n    /**\n     * Returns the observed attributes for the component.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['max-width', 'max-height', 'trigger', 'direction', 'variant', 'screen-break-point', 'remove-child-after-close', 'animation-duration', 'animation-easing', 'has-opacity'];\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Executes before drawing the element.\n     */\n    beforeDraw() {\n        this.animation?.cancel();\n        this.nativeAnimation?.cancel();\n\n        document.removeEventListener(this.trigger, this.triggerEvent);\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let wrapperDiv = document.createElement('div');\n        wrapperDiv.classList.add('sliding-container-wrapper');\n\n        let transparentDiv = document.createElement('div');\n        transparentDiv.classList.add('sliding-container-transparent');\n\n        if (this._isOpen) {\n            transparentDiv.style.width = this.maxWidth;\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'sliding-container');\n        native.classList.add('native-sliding-container');\n        native.style.width = 0;\n        if (this.hasOpacity) {\n            native.style.opacity = 0;\n        }\n\n        if (this._isOpen) {\n            native.style.width = this.maxWidth;\n            if (this.hasOpacity) {\n                native.style.opacity = 1;\n            }\n        }\n\n        if (this.direction === 'right') {\n            native.style.right = 0;\n        } else {\n            native.style.left = 0;\n        }\n\n        let slot = document.createElement('slot');\n\n        const nativeInner = document.createElement('div');\n        nativeInner.classList.add('native-sliding-container-inner');\n        nativeInner.style.width = this.maxWidth;\n\n        // APPEND\n        nativeInner.append(slot);\n        nativeInner.append(this.htmlCloseButton());\n\n        native.append(nativeInner);\n\n        wrapperDiv.append(transparentDiv);\n        wrapperDiv.append(native);\n\n        fragment.append(wrapperDiv);\n\n        this.transparentDiv = transparentDiv;\n        this.wrapperDiv = wrapperDiv\n        this.nativeElement = native;\n\n        return fragment;\n    }\n\n    /**\n     * Performs actions after the element is drawn on the screen.\n     * Attaches an event listener to the document based on the specified trigger.\n     * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n     * Calls the checkForVariant method with the current variant.\n     */\n    afterDraw() {\n        document.addEventListener(this.trigger, this.triggerEvent);\n\n        // if document width is on small screen set variant to over\n        if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            this.variant = 'over';\n        }\n\n        this.checkForVariant(this.variant);\n    }\n\n    /**\n     * Creates and returns a styled close button element with an icon,\n     * including an event listener to trigger the close method.\n     * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.\n     */\n    htmlCloseButton() {\n        let closeButton = document.createElement('wje-button');\n        closeButton.setAttribute('part', 'close-button');\n        closeButton.classList.add('close-button');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'x');\n\n        closeButton.append(icon);\n\n        event.addListener(closeButton, 'wje-button:click', null,(e) => {\n            this.close();\n        });\n\n        return closeButton;\n    }\n\n    /**\n     * Retrieves the parent element of the current element.\n     * If the parent element is not found, it attempts to find the root host element.\n     * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.\n     */\n    getParentElement() {\n        let parentElement = this.parentElement;\n\n        if (!parentElement) {\n            parentElement = this.getRootNode().host;\n        }\n\n        return parentElement;\n    }\n\n    /**\n     * Adjusts the position and dimensions of the current element based on the specified variant.\n     *\n     * The method handles modifications to the element's positioning style, aligns it relative to its parent,\n     * and manages alignment to its siblings based on the specified direction.\n     * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.\n     * @returns {void} No value is returned, the method modifies the element's style properties directly.\n     */\n    checkForVariant(variant) {\n        if (variant === 'over') {\n            this.style.position = 'fixed';\n            let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n            let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n            let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n            let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n            this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.style.top = topOfParrentElement + 'px';\n\n            const leftSibling = this.previousElementSibling;\n            const rightSibling = this.nextElementSibling;\n            const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n            const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n            if (this.direction === 'right') {\n                // attach to left sibling\n                if (leftSiblingBoundingbox) {\n                    this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n                } else {\n                    this.style.left = parentElementBoundingbox.left + 'px';\n                }\n            } else {\n                // attach to right sibling\n                if (rightSiblingBoundingbox) {\n                    this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n                } else {\n                    this.style.right =\n                        window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n                }\n            }\n        }\n    }\n\n    /**\n     * Triggers the event based on the target element.\n     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n     * @param {Event} e The event object.\n     */\n    triggerEvent = async (e) => {\n        if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n            // same oppener event but different caller so just refresh inner content\n            await this.open(e);\n        } else {\n            // came caller so toggle\n            await this.toggle(e);\n        }\n\n        this._lastCaller = e.composedPath()[0];\n    };\n\n    /**\n     * Executes before the element is opened.\n     */\n    beforeOpen(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function called after the element is opened.\n     */\n    afterOpen(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Executes before closing the element.\n     */\n    beforeClose(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function that is called after the container is closed.\n     */\n    afterClose(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Animates the transition of elements with specified options, toggling the visibility and/or dimensions\n     * of the associated elements based on their current state.\n     *\n     * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)\n     * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided\n     * elements before initiating a new animation sequence.\n     * @returns {Promise<void>} A promise that resolves when the transition animation is completed.\n     */\n    doAnimateTransition() {\n        const options = {\n            delay: 0,\n            endDelay: 0,\n            fill: 'forwards',\n            duration: +this.animationDuration,\n            iterationStart: 0,\n            iterations: 1,\n            direction: 'normal',\n            easing: this.animationEasing,\n        };\n\n        if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n            this.animation.cancel();\n            this.animation = null;\n        }\n\n        if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n            this.nativeAnimation.cancel();\n            this.nativeAnimation = null;\n        }\n\n        if (!this._isOpen) {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: 0,\n                        },\n                        {\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n            }\n        } else {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: this.maxWidth,\n                        },\n                        {\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n            }\n        }\n\n        return new Promise((resolve, reject) => {\n            this.animation.onfinish = () => {\n                this._isOpen = !this._isOpen;\n                resolve();\n            };\n        });\n    }\n\n    /**\n     * Opens the sliding container by performing necessary preparatory and transitional operations.\n     * @param {Event} e The event that triggered the open operation.\n     * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.\n     */\n    async open(e) {\n        await Promise.resolve(this.beforeOpen(e)).then(async () => {\n            if (!this._isOpen) {\n                this.classList.add('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeOpen')\n\n                this.checkForVariant(this.variant);\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterOpen(e)).then(() => {\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:open')\n                });\n            }\n        });\n    }\n\n    /**\n     * Closes the sliding container and performs associated operations such as animations and event dispatches.\n     * @param {Event} e The event object associated with the close action.\n     * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.\n     */\n    async close(e) {\n        await Promise.resolve(this.beforeClose(e)).then(async () => {\n            if (this._isOpen) {\n                this.classList.remove('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeClose');\n\n                await this.doAnimateTransition();\n\n                await Promise.resolve(this.afterClose(e)).then(() => {\n                    if (this.removeChildAfterClose) {\n                        this.childNodes.forEach((child) => {\n                            child.remove();\n                        });\n                    }\n\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:afterClose');\n                });\n            }\n        });\n    }\n\n    /**\n     * Toggles the state between open and closed.\n     * @param {Event} e The event object triggering the toggle.\n     * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.\n     */\n    async toggle(e) {\n        if (this._isOpen) {\n            await this.close(event);\n        } else {\n            await this.open(event);\n        }\n    }\n\n    /**\n     * Cleans up resources associated with the component by disconnecting\n     * the resize observer and setting it to null.\n     * @returns {void} Does not return a value.\n     */\n    componentCleanup() {\n        this._resizeObserver?.disconnect();\n        this._resizeObserver = null;\n    }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-sliding-container.js","sources":["../packages/wje-sliding-container/sliding-container.element.js","../packages/wje-sliding-container/sliding-container.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary SlidingContainer is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/SlidingContainer\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @slot - The default slot for the SlidingContainer.\n * @property {string} maxWidth - The maximum width of the SlidingContainer.\n * @property {string} maxHeight - The maximum height of the SlidingContainer.\n * @property {string} trigger - The trigger for the SlidingContainer.\n * @property {string} direction - Specifies the sliding direction of the container (e.g., 'left' or 'right').\n * @property {string} variant - Determines how the SlidingContainer behaves, such as 'over' or 'in-place'.\n * @property {string} screenBreakPoint - The width (in pixels) at which the SlidingContainer switches to the \"over\" variant for smaller screens.\n * @property {boolean} removeChildAfterClose - Removes the child after the SlidingContainer is closed.\n * @property {string} animationDuration - Specifies the duration (in milliseconds) of the sliding animation.\n * @property {string} animationEasing - Specifies the easing function used for the sliding animation (e.g., 'linear', 'ease-in', 'ease-out').\n * @property {boolean} hasOpacity - Sets the opacity of the SlidingContainer.\n * @tag wje-sliding-container\n * @example\n * <wje-sliding-container trigger=\"test-resize-container-event-right\" id=\"left-in-place\" direction=\"left\" max-width=\"100px\" max-height=\"100%\">\n *    <wje-card>\n *       <wje-card-header>\n *        <wje-card-subtitle>CONTENT Subtitle</wje-card-subtitle>\n *       <wje-card-title>CONTENT Title</wje-card-title>\n *      </wje-card-header>\n *     <wje-card-content>\n *        CONTENT Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n *    </wje-card-content>\n * </wje-card>\n * </wje-sliding-container>\n */\nexport default class SlidingContainer extends WJElement {\n    /**\n     * Creates an instance of SlidingContainer.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._isOpen = false;\n        this._lastCaller = null;\n\n        this._resizeObserver = new ResizeObserver((entries) => {\n            for (let entry of entries) {\n                if (entry.contentBoxSize) {\n                    if (this.drawingStatus < 3) return;\n\n                    if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n                        if (this.variant !== 'over') {\n                            this.variant = 'over';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    } else {\n                        if (this.variant !== 'in-place') {\n                            this.variant = 'in-place';\n                        } else {\n                            this.checkForVariant(this.variant);\n                        }\n                    }\n                }\n            }\n        });\n\n        this._resizeObserver.observe(document.documentElement);\n    }\n\n    /**\n     * Sets the maximum width of an element by updating the 'max-width' attribute.\n     * @param {string} value The maximum width value to be set (e.g., '100px', '50%', etc.).\n     */\n    set maxWidth(value) {\n        this.setAttribute('max-width', value);\n    }\n\n    /**\n     * Gets the maximum width value of the element.\n     * Retrieves the value of the 'max-width' attribute. If the attribute is not set, it defaults to 'auto'.\n     * @returns {string} The maximum width value of the element or 'auto' if the attribute is not defined.\n     */\n    get maxWidth() {\n        return this.getAttribute('max-width') ?? 'auto';\n    }\n\n    /**\n     * Sets the maximum height for the element.\n     * @param {string} value The maximum height value to be applied to the element. This can include units such as \"px\", \"em\", \"%\", etc.\n     */\n    set maxHeight(value) {\n        this.setAttribute('max-height', value);\n    }\n\n    /**\n     * Retrieves the maximum height value of the element, or returns 'auto' if not set.\n     * @returns {string} The maximum height value or 'auto' if the attribute is not specified.\n     */\n    get maxHeight() {\n        return this.getAttribute('max-height') ?? 'auto';\n    }\n\n    /**\n     * Sets the 'trigger' attribute for the element.\n     * @param {string} value The value to set for the 'trigger' attribute.\n     */\n    set trigger(value) {\n        this.setAttribute('trigger', value);\n    }\n\n    /**\n     * Retrieves the value of the 'trigger' attribute. If the attribute is not set, it defaults to 'sliding-container'.\n     * @returns {string} The value of the 'trigger' attribute or the default value 'sliding-container' if not defined.\n     */\n    get trigger() {\n        return this.getAttribute('trigger') ?? 'sliding-container';\n    }\n\n    /**\n     * Sets the direction attribute for the element.\n     * @param {string} value The direction value to be assigned. Possible values are typically 'ltr' (left-to-right), 'rtl' (right-to-left), or 'auto'.\n     */\n    set direction(value) {\n        this.setAttribute('direction', value);\n    }\n\n    /**\n     * Retrieves the direction attribute of the instance.\n     * If the direction attribute is not set, it defaults to 'right'.\n     * @returns {string} The value of the direction attribute or 'right' if not set.\n     */\n    get direction() {\n        return this.getAttribute('direction') ?? 'right';\n    }\n\n    /**\n     * Sets the value of the `remove-child-after-close` attribute.\n     * This attribute determines if a child element should be removed after a close operation.\n     * @param {boolean|string} value The value to set for the `remove-child-after-close` attribute. The value can be a boolean or a string representation of a boolean.\n     */\n    set removeChildAfterClose(value) {\n        this.setAttribute('remove-child-after-close', value);\n    }\n\n    /**\n     * Gets the value indicating whether the child element should be removed after closing.\n     *\n     * This property checks the presence of the 'remove-child-after-close' attribute on the element.\n     * Returns `false` if the attribute does not exist.\n     * @returns {boolean} True if the 'remove-child-after-close' attribute is present, otherwise false.\n     */\n    get removeChildAfterClose() {\n        return this.hasAttribute('remove-child-after-close') ?? false;\n    }\n\n    /**\n     * Sets the 'variant' attribute to the specified value.\n     * @param {string} value The value to set for the 'variant' attribute.\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Retrieves the value of the \"variant\" attribute. If the attribute is not set,\n     * it returns the default value 'in-place'.\n     * @returns {string} The variant value or the default value 'in-place'.\n     */\n    get variant() {\n        return this.getAttribute('variant') ?? 'in-place';\n    }\n\n    /**\n     * Retrieves the value of the 'screen-break-point' attribute.\n     * @returns {string} The value of the 'screen-break-point' attribute.\n     */\n    get screenBreakPoint() {\n        return this.getAttribute('screen-break-point');\n    }\n\n    /**\n     * Sets the screen break point value to determine responsive behavior.\n     * @param {string} value The value to set as the screen break point.\n     */\n    set screenBreakPoint(value) {\n        this.setAttribute('screen-break-point', value);\n    }\n\n    /**\n     * Sets the duration of the animation by updating the `animation-duration` attribute.\n     * @param {string} value The duration value for the animation, specified in a format\n     * such as seconds (e.g., \"2s\") or milliseconds (e.g., \"200ms\").\n     */\n    set animationDuration(value) {\n        this.setAttribute('animation-duration', value);\n    }\n\n    /**\n     * Gets the animation duration for an element.\n     * It retrieves the value of the 'animation-duration' attribute if present; otherwise, it defaults to '500'.\n     * @returns {string} The value of the animation duration, either from the attribute or the default '500'.\n     */\n    get animationDuration() {\n        return this.getAttribute('animation-duration') ?? '500';\n    }\n\n    /**\n     * Sets the easing function for the animation.\n     * @param {string} value The easing function to use for the animation. This can be any valid CSS timing function such as \"ease\", \"linear\", \"ease-in\", \"ease-out\", etc.\n     */\n    set animationEasing(value) {\n        this.setAttribute('animation-easing', value);\n    }\n\n    /**\n     * Retrieves the easing function for the animation.\n     * @returns {string} The value of the 'animation-easing' attribute if set, otherwise defaults to 'linear'.\n     */\n    get animationEasing() {\n        return this.getAttribute('animation-easing') ?? 'linear';\n    }\n\n    /**\n     * Determines if the element has an 'has-opacity' attribute.\n     * @returns {boolean} True if the element has the 'has-opacity' attribute, otherwise false.\n     */\n    get hasOpacity() {\n        return this.hasAttribute('has-opacity') ?? false;\n    }\n\n    /**\n     * Sets the value of the 'add-to-height' attribute.\n     * This attribute is used to modify or adjust the height dynamically.\n     * @param {string} value The value to be assigned to the 'add-to-height' attribute.\n     */\n    set addToHeight(value) {\n        this.setAttribute('add-to-height', value);\n    }\n\n    /**\n     * Retrieves the value of the 'add-to-height' attribute from the element.\n     * If the attribute is not set, it defaults to '0'.\n     * @returns {string} The value of the 'add-to-height' attribute or '0' if the attribute is not present.\n     */\n    get addToHeight() {\n        return this.getAttribute('add-to-height') ?? '0';\n    }\n\n    /**\n     * Determines whether the current state is open.\n     * @returns {boolean} True if the state is open, otherwise false.\n     */\n    get isOpen() {\n        return this._isOpen;\n    }\n\n    className = 'SlidingContainer';\n\n    /**\n     * Returns the observed attributes for the component.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['max-width', 'max-height', 'trigger', 'direction', 'variant', 'screen-break-point', 'remove-child-after-close', 'animation-duration', 'animation-easing', 'has-opacity'];\n    }\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Executes before drawing the element.\n     */\n    beforeDraw() {\n        this.animation?.cancel();\n        this.nativeAnimation?.cancel();\n\n        document.removeEventListener(this.trigger, this.triggerEvent);\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        let wrapperDiv = document.createElement('div');\n        wrapperDiv.classList.add('sliding-container-wrapper');\n\n        let transparentDiv = document.createElement('div');\n        transparentDiv.classList.add('sliding-container-transparent');\n\n        if (this._isOpen) {\n            transparentDiv.style.width = this.maxWidth;\n        }\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'sliding-container');\n        native.classList.add('native-sliding-container');\n        native.style.width = 0;\n        if (this.hasOpacity) {\n            native.style.opacity = 0;\n        }\n\n        if (this._isOpen) {\n            native.style.width = this.maxWidth;\n            if (this.hasOpacity) {\n                native.style.opacity = 1;\n            }\n        }\n\n        if (this.direction === 'right') {\n            native.style.right = 0;\n        } else {\n            native.style.left = 0;\n        }\n\n        let slot = document.createElement('slot');\n\n        const nativeInner = document.createElement('div');\n        nativeInner.classList.add('native-sliding-container-inner');\n        nativeInner.style.width = this.maxWidth;\n\n        // APPEND\n        nativeInner.append(slot);\n        nativeInner.append(this.htmlCloseButton());\n\n        native.append(nativeInner);\n\n        wrapperDiv.append(transparentDiv);\n        wrapperDiv.append(native);\n\n        fragment.append(wrapperDiv);\n\n        this.transparentDiv = transparentDiv;\n        this.wrapperDiv = wrapperDiv\n        this.nativeElement = native;\n\n        return fragment;\n    }\n\n    /**\n     * Performs actions after the element is drawn on the screen.\n     * Attaches an event listener to the document based on the specified trigger.\n     * Sets the variant to \"over\" if the document width is smaller than the screen break point.\n     * Calls the checkForVariant method with the current variant.\n     */\n    afterDraw() {\n        this.syncAria();\n        document.addEventListener(this.trigger, this.triggerEvent);\n\n        // if document width is on small screen set variant to over\n        if (this.screenBreakPoint && window.innerWidth <= this.screenBreakPoint) {\n            this.variant = 'over';\n        }\n\n        this.checkForVariant(this.variant);\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'region' });\n        }\n\n        this.setAriaState({ hidden: !this.isOpen });\n\n        const ariaLabel = this.getAttribute('aria-label');\n        const label = this.getAttribute('label');\n        if (!ariaLabel && label) {\n            this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Creates and returns a styled close button element with an icon,\n     * including an event listener to trigger the close method.\n     * @returns {HTMLElement} The close button element configured with styles, an icon, and event listener.\n     */\n    htmlCloseButton() {\n        let closeButton = document.createElement('wje-button');\n        closeButton.setAttribute('part', 'close-button');\n        closeButton.classList.add('close-button');\n\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('slot', 'icon-only');\n        icon.setAttribute('name', 'x');\n\n        closeButton.append(icon);\n\n        event.addListener(closeButton, 'wje-button:click', null,(e) => {\n            this.close();\n        });\n\n        return closeButton;\n    }\n\n    /**\n     * Retrieves the parent element of the current element.\n     * If the parent element is not found, it attempts to find the root host element.\n     * @returns {Element|null} The parent element or the root host element if no parent exists. Returns null if neither is found.\n     */\n    getParentElement() {\n        let parentElement = this.parentElement;\n\n        if (!parentElement) {\n            parentElement = this.getRootNode().host;\n        }\n\n        return parentElement;\n    }\n\n    /**\n     * Adjusts the position and dimensions of the current element based on the specified variant.\n     *\n     * The method handles modifications to the element's positioning style, aligns it relative to its parent,\n     * and manages alignment to its siblings based on the specified direction.\n     * @param {string} variant The variant to determine how the element should be updated. For example, when set to 'over', specific adjustments to the position and size are performed.\n     * @returns {void} No value is returned, the method modifies the element's style properties directly.\n     */\n    checkForVariant(variant) {\n        if (variant === 'over') {\n            this.style.position = 'fixed';\n            let computentStyleOfParent = window.getComputedStyle(this.getParentElement());\n            let parentElementBoundingbox = this.getParentElement().getBoundingClientRect();\n            let heightOfParrentElement = parseFloat(computentStyleOfParent.height);\n\n            let topOfParrentElement = parseFloat(computentStyleOfParent.top);\n\n            this.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.wrapperDiv.style.height = heightOfParrentElement + +this.addToHeight + 'px';\n            this.style.top = topOfParrentElement + 'px';\n\n            const leftSibling = this.previousElementSibling;\n            const rightSibling = this.nextElementSibling;\n            const leftSiblingBoundingbox = leftSibling?.getBoundingClientRect();\n            const rightSiblingBoundingbox = rightSibling?.getBoundingClientRect();\n\n            if (this.direction === 'right') {\n                // attach to left sibling\n                if (leftSiblingBoundingbox) {\n                    this.style.left = leftSiblingBoundingbox.left + leftSiblingBoundingbox.width + 'px';\n                } else {\n                    this.style.left = parentElementBoundingbox.left + 'px';\n                }\n            } else {\n                // attach to right sibling\n                if (rightSiblingBoundingbox) {\n                    this.style.right = window.innerWidth - rightSiblingBoundingbox.left + 'px';\n                } else {\n                    this.style.right =\n                        window.innerWidth - (parentElementBoundingbox.left + parentElementBoundingbox.width) + 'px';\n                }\n            }\n        }\n    }\n\n    /**\n     * Triggers the event based on the target element.\n     * If the target element is different from the last caller, it refreshes the children by calling the `open` method.\n     * If the target element is the same as the last caller, it toggles the state by calling the `toggle` method.\n     * @param {Event} e The event object.\n     */\n    triggerEvent = async (e) => {\n        if (this._lastCaller && this._lastCaller !== e.composedPath()[0]) {\n            // same oppener event but different caller so just refresh inner content\n            await this.open(e);\n        } else {\n            // came caller so toggle\n            await this.toggle(e);\n        }\n\n        this._lastCaller = e.composedPath()[0];\n    };\n\n    /**\n     * Executes before the element is opened.\n     */\n    beforeOpen(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function called after the element is opened.\n     */\n    afterOpen(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Executes before closing the element.\n     */\n    beforeClose(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Callback function that is called after the container is closed.\n     */\n    afterClose(e) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * Animates the transition of elements with specified options, toggling the visibility and/or dimensions\n     * of the associated elements based on their current state.\n     *\n     * This method handles both forward and reverse animations for two elements (`transparentDiv` and `nativeElement`)\n     * with optional opacity changes. It ensures smooth transitioning by canceling any previous animations on the provided\n     * elements before initiating a new animation sequence.\n     * @returns {Promise<void>} A promise that resolves when the transition animation is completed.\n     */\n    doAnimateTransition() {\n        const options = {\n            delay: 0,\n            endDelay: 0,\n            fill: 'forwards',\n            duration: +this.animationDuration,\n            iterationStart: 0,\n            iterations: 1,\n            direction: 'normal',\n            easing: this.animationEasing,\n        };\n\n        if (this.animation && this.animation?.effect?.target !== this.transparentDiv) {\n            this.animation.cancel();\n            this.animation = null;\n        }\n\n        if (this.nativeAnimation && this.nativeAnimation?.effect?.target !== this.nativeElement) {\n            this.nativeAnimation.cancel();\n            this.nativeAnimation = null;\n        }\n\n        if (!this._isOpen) {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: 0,\n                        },\n                        {\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                    ],\n                    options\n                );\n            }\n        } else {\n            if (this.animation && this.nativeAnimation) {\n                this.animation.reverse();\n                this.nativeAnimation.reverse();\n            } else {\n                this.animation = this.transparentDiv.animate(\n                    [\n                        {\n                            width: this.maxWidth,\n                        },\n                        {\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n\n                this.nativeAnimation = this.nativeElement.animate(\n                    [\n                        {\n                            ...(this.hasOpacity ? { opacity: 1 } : {}),\n                            width: this.maxWidth,\n                        },\n                        {\n                            ...(this.hasOpacity ? { opacity: 0 } : {}),\n                            width: 0,\n                        },\n                    ],\n                    options\n                );\n            }\n        }\n\n        return new Promise((resolve, reject) => {\n            this.animation.onfinish = () => {\n                this._isOpen = !this._isOpen;\n                resolve();\n            };\n        });\n    }\n\n    /**\n     * Opens the sliding container by performing necessary preparatory and transitional operations.\n     * @param {Event} e The event that triggered the open operation.\n     * @returns {Promise<void>} A promise that resolves when the open operation, including animations and subsequent handlers, is complete.\n     */\n    async open(e) {\n        await Promise.resolve(this.beforeOpen(e)).then(async () => {\n            if (!this._isOpen) {\n                this.classList.add('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeOpen')\n\n                this.checkForVariant(this.variant);\n\n                await this.doAnimateTransition();\n                this.syncAria();\n\n                await Promise.resolve(this.afterOpen(e)).then(() => {\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:open')\n                });\n            }\n        });\n    }\n\n    /**\n     * Closes the sliding container and performs associated operations such as animations and event dispatches.\n     * @param {Event} e The event object associated with the close action.\n     * @returns {Promise<void>} A promise that resolves when the closing operation, including animations and child element removal, is completed.\n     */\n    async close(e) {\n        await Promise.resolve(this.beforeClose(e)).then(async () => {\n            if (this._isOpen) {\n                this.classList.remove('open');\n\n                event.dispatchCustomEvent(this, 'wje-sliding-container:beforeClose');\n\n                await this.doAnimateTransition();\n                this.syncAria();\n\n                await Promise.resolve(this.afterClose(e)).then(() => {\n                    if (this.removeChildAfterClose) {\n                        this.childNodes.forEach((child) => {\n                            child.remove();\n                        });\n                    }\n\n                    event.dispatchCustomEvent(this, 'wje-sliding-container:afterClose');\n                });\n            }\n        });\n    }\n\n    /**\n     * Toggles the state between open and closed.\n     * @param {Event} e The event object triggering the toggle.\n     * @returns {Promise<void>} A promise that resolves once the toggle operation (open or close) is complete.\n     */\n    async toggle(e) {\n        if (this._isOpen) {\n            await this.close(event);\n        } else {\n            await this.open(event);\n        }\n    }\n\n    /**\n     * Cleans up resources associated with the component by disconnecting\n     * the resize observer and setting it to null.\n     * @returns {void} Does not return a value.\n     */\n    componentCleanup() {\n        this._resizeObserver?.disconnect();\n        this._resizeObserver = null;\n    }\n}\n","import SlidingContainer from './sliding-container.element.js';\n\nexport default SlidingContainer;\n\nSlidingContainer.define('wje-sliding-container', SlidingContainer);\n"],"names":[],"mappings":"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"}

package/dist/wje-split-view.js

@@ -49,6 +49,9 @@ class SplitView extends WJElement {
           let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);
           this.style.setProperty("--wje-split-view-calc-a", sizeA + "%");
           this.style.setProperty("--wje-split-view-calc-b", sizeB + "%");
+          if (this.dividerElement) {
+            this.dividerElement.setAttribute("aria-valuenow", `${Math.round(sizeA)}`);
+          }
         },
         initialEvent: e
       });
@@ -99,12 +102,18 @@ class SplitView extends WJElement {
     let dividerElement = document.createElement("div");
     dividerElement.classList.add("wje-divider");
     dividerElement.setAttribute("part", "divider");
+    dividerElement.setAttribute("role", "separator");
+    dividerElement.setAttribute("aria-orientation", this.hasAttribute("vertical") ? "vertical" : "horizontal");
+    dividerElement.setAttribute("aria-valuemin", "0");
+    dividerElement.setAttribute("aria-valuemax", "100");
+    dividerElement.setAttribute("aria-valuenow", `${this.initial}`);
     dividerElement.appendChild(divider);
     dividerElement.addEventListener("mousedown", this.handleDrag, false);
     native.appendChild(start);
     native.appendChild(dividerElement);
     native.appendChild(end);
     fragment.appendChild(native);
+    this.dividerElement = dividerElement;
     return fragment;
   }
   /**

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

@@ -1 +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 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                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\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\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        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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"}
+{"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 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.setAttribute('role', 'separator');\n        dividerElement.setAttribute('aria-orientation', this.hasAttribute('vertical') ? 'vertical' : 'horizontal');\n        dividerElement.setAttribute('aria-valuemin', '0');\n        dividerElement.setAttribute('aria-valuemax', '100');\n        dividerElement.setAttribute('aria-valuenow', `${this.initial}`);\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        this.dividerElement = dividerElement;\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                let newPositionInPixels = this.hasAttribute('vertical') ? y : x;\n                let sizeA = this.pixelsToPercentage(newPositionInPixels);\n                let sizeB = 100 - this.pixelsToPercentage(newPositionInPixels);\n\n                this.style.setProperty('--wje-split-view-calc-a', sizeA + '%');\n                this.style.setProperty('--wje-split-view-calc-b', sizeB + '%');\n                if (this.dividerElement) {\n                    this.dividerElement.setAttribute('aria-valuenow', `${Math.round(sizeA)}`);\n                }\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\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        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

@@ -28,6 +28,7 @@ class Status extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    this.setAriaState({ role: "status" });
   }
   /**
    * Draws the component for the status.

package/dist/wje-status.js.map

@@ -1 +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,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,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,EACf;AACA;AC1EA,OAAO,OAAO,cAAc,MAAM;"}
+{"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        this.setAriaState({ role: 'status' });\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,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,SAAQ,CAAE;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,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,EACf;AACA;AC3EA,OAAO,OAAO,cAAc,MAAM;"}

package/dist/wje-stepper.js

@@ -5,6 +5,7 @@ import { Localizer } from "./localize.js";
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
 const styles = '.container {\n	display: flex;\n	flex-direction: column;\n}\n\n.header {\n	display: flex;\n	justify-content: var(--wje-stepper-justify);\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.step-header {\n	display: flex;\n	padding: var(--wje-spacing-medium);\n	gap: var(--wje-spacing-x-small);\n	color: var(--wje-color-contrast-5);\n	flex-grow: var(--wje-stepper-grow);\n	text-align: center;\n}\n\n.pointer {\n	cursor: pointer;\n}\n\n[active] {\n	color: var(--wje-color-contrast-11);\n}\n\n.content {\n	margin-bottom: var(--wje-spacing-medium);\n}\n\n.arrow-icon {\n	margin-top: var(--wje-stepper-margin);\n}\n\n.step {\n	padding: var(--wje-spacing-medium);\n	text-align: center;\n}\n\n[done] {\n	color: var(--wje-color-contrast-11);\n}\n\n.nav-buttons {\n	display: flex;\n	justify-content: space-between;\n\n	slot[hidden] {\n		visibility: hidden;\n		display: initial;\n	}\n\n	slot[disabled] {\n		opacity: 0.5;\n		pointer-events: none;\n		cursor: not-allowed;\n\n		/* after */\n		::after {\n			content: "";\n			display: block;\n			width: 100%;\n			height: 100%;\n			background-color: var(--wje-color-contrast-2);\n			position: absolute;\n			top: 0;\n			left: 0;\n			opacity: .5;\n		}\n	}\n}';
+let stepperId = 0;
 class Stepper extends WJElement {
   constructor() {
     super();
@@ -32,6 +33,7 @@ class Stepper extends WJElement {
     this.localizer = new Localizer(this);
     this.steps = [];
     this.headerSteps = [];
+    this._stepperId = ++stepperId;
   }
   /**
    * Sets the start index for an operation or a process. This method assigns
@@ -78,6 +80,7 @@ class Stepper extends WJElement {
     const header = document.createElement("div");
     header.setAttribute("part", "header");
     header.className = "header";
+    header.setAttribute("role", "tablist");
     const content = document.createElement("div");
     content.setAttribute("part", "content");
     content.className = "content";
@@ -144,6 +147,7 @@ class Stepper extends WJElement {
   processStep(index, step, header, steps) {
     const nav = document.createElement("div");
     nav.className = "step-header";
+    nav.setAttribute("role", "tab");
     nav.addEventListener("click", (e) => {
       this.goToStep(index);
     });
@@ -153,8 +157,18 @@ class Stepper extends WJElement {
     badge.innerHTML = index + 1;
     const label = document.createElement("span");
     label.innerText = step.getAttribute("label") || `${this.localizer.translate("wj.stepper.step")} ${index + 1}`;
+    const panelId = step.id || `wje-stepper-${this._stepperId}-panel-${index}`;
+    const tabId = nav.id || `wje-stepper-${this._stepperId}-tab-${index}`;
+    step.id = panelId;
+    nav.id = tabId;
+    nav.setAttribute("aria-controls", panelId);
+    step.setAttribute("role", "tabpanel");
+    step.setAttribute("aria-labelledby", tabId);
     if (index === this.currentStep || step.hasAttribute("active")) {
-      this.setStepActive(nav, badge);
+      this.setStepActive(nav, badge, index);
+    } else {
+      nav.setAttribute("aria-selected", "false");
+      nav.setAttribute("tabindex", "-1");
     }
     if (step.hasAttribute("disabled")) {
       nav.setAttribute("disabled", "");
@@ -175,6 +189,9 @@ class Stepper extends WJElement {
     step.classList.add("step");
     if (index !== this.currentStep) {
       step.style.display = "none";
+      step.setAttribute("aria-hidden", "true");
+    } else {
+      step.setAttribute("aria-hidden", "false");
     }
     this.steps.push(step);
     return nav;
@@ -266,6 +283,8 @@ class Stepper extends WJElement {
   setStepDefault(nav, badge = null, stepIndex = 0) {
     nav.removeAttribute("active");
     nav.removeAttribute("done");
+    nav.setAttribute("aria-selected", "false");
+    nav.setAttribute("tabindex", "-1");
     if (!badge) {
       badge = nav.querySelector("wje-badge");
     }
@@ -280,6 +299,8 @@ class Stepper extends WJElement {
    */
   setStepActive(nav, badge = null, stepIndex = null) {
     nav.setAttribute("active", "");
+    nav.setAttribute("aria-selected", "true");
+    nav.setAttribute("tabindex", "0");
     if (!badge) {
       badge = nav.querySelector("wje-badge");
     }
@@ -295,8 +316,10 @@ class Stepper extends WJElement {
     (_a = this.steps) == null ? void 0 : _a.forEach((step, index) => {
       if (index === stepIndex) {
         step.style.display = "block";
+        step.setAttribute("aria-hidden", "false");
       } else {
         step.style.display = "none";
+        step.setAttribute("aria-hidden", "true");
       }
     });
   }