wj-elements 0.7.6 → 0.8.0

package/dist/wje-slider.js

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

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        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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"}
+{"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":["Slider","WJElement","constructor","super","className","setHandlePosition","this","input","style","backgroundSize","getPercentage","min","max","value","syncAria","setBubble","newValue","output","left","offsetWidth","innerHTML","setAttribute","hasAttribute","setTimeout","getAttribute","step","cssStyleSheet","observedAttributes","name","oldValue","includes","disabled","removeAttribute","attributeChangedCallback","setupAttributes","isShadowRoot","fragment","document","createDocumentFragment","element","createElement","slider","label","start","end","id","type","part","color","addEventListener","e","target","appendChild","afterDraw","event","dispatchCustomEvent","addListener","setAriaState","role","valuemin","valuemax","valuenow","Number","define"],"mappings":"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"}