wj-elements 0.1.11 → 0.1.13

package/dist/wje-row.js

@@ -1,58 +0,0 @@
-var w = Object.defineProperty;
-var l = (g, t, e) => t in g ? w(g, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : g[t] = e;
-var o = (g, t, e) => (l(g, typeof t != "symbol" ? t + "" : t, e), e);
-import u from "./wje-element.js";
-const j = ":host{display:flex;flex-wrap:wrap}:host(.wje-wrap){flex-wrap:wrap!important}:host{--wje-gutter-x: 1.5rem;--wje-gutter-y: 0;display:flex;flex-wrap:nowrap;margin-top:calc(var(--wje-gutter-y) * -1);margin-right:calc(var(--wje-gutter-x) * -.5);margin-left:calc(var(--wje-gutter-x) * -.5)}:host(.g-0),:host(.gx-0){--wje-gutter-x: 0}:host(.g-0),:host(.gy-0){--wje-gutter-y: 0}:host(.g-1),:host(.gx-1){--wje-gutter-x: .25rem}:host(.g-1),:host(.gy-1){--wje-gutter-y: .25rem}:host(.g-2),:host(.gx-2){--wje-gutter-x: .5rem}:host(.g-2),:host(.gy-2){--wje-gutter-y: .5rem}:host(.g-3),:host(.gx-3){--wje-gutter-x: 1rem}:host(.g-3),:host(.gy-3){--wje-gutter-y: 1rem}:host(.g-4),:host(.gx-4){--wje-gutter-x: 1.5rem}:host(.g-4),:host(.gy-4){--wje-gutter-y: 1.5rem}:host(.g-5),:host(.gx-5){--wje-gutter-x: 3rem}:host(.g-5),:host(.gy-5){--wje-gutter-y: 3rem}@media (min-width: 576px){:host(.g-sm-0),:host(.gx-sm-0){--wje-gutter-x: 0}:host(.g-sm-0),:host(.gy-sm-0){--wje-gutter-y: 0}:host(.g-sm-1),:host(.gx-sm-1){--wje-gutter-x: .25rem}:host(.g-sm-1),:host(.gy-sm-1){--wje-gutter-y: .25rem}:host(.g-sm-2),:host(.gx-sm-2){--wje-gutter-x: .5rem}:host(.g-sm-2),:host(.gy-sm-2){--wje-gutter-y: .5rem}:host(.g-sm-3),:host(.gx-sm-3){--wje-gutter-x: 1rem}:host(.g-sm-3),:host(.gy-sm-3){--wje-gutter-y: 1rem}:host(.g-sm-4),:host(.gx-sm-4){--wje-gutter-x: 1.5rem}:host(.g-sm-4),:host(.gy-sm-4){--wje-gutter-y: 1.5rem}:host(.g-sm-5),:host(.gx-sm-5){--wje-gutter-x: 3rem}:host(.g-sm-5),:host(.gy-sm-5){--wje-gutter-y: 3rem}}@media (min-width: 768px){:host(.g-md-0),:host(.gx-md-0){--wje-gutter-x: 0}:host(.g-md-0),:host(.gy-md-0){--wje-gutter-y: 0}:host(.g-md-1),:host(.gx-md-1){--wje-gutter-x: .25rem}:host(.g-md-1),:host(.gy-md-1){--wje-gutter-y: .25rem}:host(.g-md-2),:host(.gx-md-2){--wje-gutter-x: .5rem}:host(.g-md-2),:host(.gy-md-2){--wje-gutter-y: .5rem}:host(.g-md-3),:host(.gx-md-3){--wje-gutter-x: 1rem}:host(.g-md-3),:host(.gy-md-3){--wje-gutter-y: 1rem}:host(.g-md-4),:host(.gx-md-4){--wje-gutter-x: 1.5rem}:host(.g-md-4),:host(.gy-md-4){--wje-gutter-y: 1.5rem}:host(.g-md-5),:host(.gx-md-5){--wje-gutter-x: 3rem}:host(.g-md-5),:host(.gy-md-5){--wje-gutter-y: 3rem}}@media (min-width: 992px){:host(.g-lg-0),:host(.gx-lg-0){--wje-gutter-x: 0}:host(.g-lg-0),:host(.gy-lg-0){--wje-gutter-y: 0}:host(.g-lg-1),:host(.gx-lg-1){--wje-gutter-x: .25rem}:host(.g-lg-1),:host(.gy-lg-1){--wje-gutter-y: .25rem}:host(.g-lg-2),:host(.gx-lg-2){--wje-gutter-x: .5rem}:host(.g-lg-2),:host(.gy-lg-2){--wje-gutter-y: .5rem}:host(.g-lg-3),:host(.gx-lg-3){--wje-gutter-x: 1rem}:host(.g-lg-3),:host(.gy-lg-3){--wje-gutter-y: 1rem}:host(.g-lg-4),:host(.gx-lg-4){--wje-gutter-x: 1.5rem}:host(.g-lg-4),:host(.gy-lg-4){--wje-gutter-y: 1.5rem}:host(.g-lg-5),:host(.gx-lg-5){--wje-gutter-x: 3rem}:host(.g-lg-5),:host(.gy-lg-5){--wje-gutter-y: 3rem}}@media (min-width: 1200px){:host(.g-xl-0),:host(.gx-xl-0){--wje-gutter-x: 0}:host(.g-xl-0),:host(.gy-xl-0){--wje-gutter-y: 0}:host(.g-xl-1),:host(.gx-xl-1){--wje-gutter-x: .25rem}:host(.g-xl-1),:host(.gy-xl-1){--wje-gutter-y: .25rem}:host(.g-xl-2),:host(.gx-xl-2){--wje-gutter-x: .5rem}:host(.g-xl-2),:host(.gy-xl-2){--wje-gutter-y: .5rem}:host(.g-xl-3),:host(.gx-xl-3){--wje-gutter-x: 1rem}:host(.g-xl-3),:host(.gy-xl-3){--wje-gutter-y: 1rem}:host(.g-xl-4),:host(.gx-xl-4){--wje-gutter-x: 1.5rem}:host(.g-xl-4),:host(.gy-xl-4){--wje-gutter-y: 1.5rem}:host(.g-xl-5),:host(.gx-xl-5){--wje-gutter-x: 3rem}:host(.g-xl-5),:host(.gy-xl-5){--wje-gutter-y: 3rem}}@media (min-width: 1400px){:host(.g-xxl-0),:host(.gx-xxl-0){--wje-gutter-x: 0}:host(.g-xxl-0),:host(.gy-xxl-0){--wje-gutter-y: 0}:host(.g-xxl-1),:host(.gx-xxl-1){--wje-gutter-x: .25rem}:host(.g-xxl-1),:host(.gy-xxl-1){--wje-gutter-y: .25rem}:host(.g-xxl-2),:host(.gx-xxl-2){--wje-gutter-x: .5rem}:host(.g-xxl-2),:host(.gy-xxl-2){--wje-gutter-y: .5rem}:host(.g-xxl-3),:host(.gx-xxl-3){--wje-gutter-x: 1rem}:host(.g-xxl-3),:host(.gy-xxl-3){--wje-gutter-y: 1rem}:host(.g-xxl-4),:host(.gx-xxl-4){--wje-gutter-x: 1.5rem}:host(.g-xxl-4),:host(.gy-xxl-4){--wje-gutter-y: 1.5rem}:host(.g-xxl-5),:host(.gx-xxl-5){--wje-gutter-x: 3rem}:host(.g-xxl-5),:host(.gy-xxl-5){--wje-gutter-y: 3rem}}:host(.wje-justify-content-center){justify-content:center!important}:host(.wje-justify-content-end){justify-content:flex-end!important}:host(.wje-justify-content-between){justify-content:space-between!important}:host(.wje-justify-content-around){justify-content:space-around!important}:host(.wje-align-items-start){align-items:baseline!important}:host(.wje-align-items-center){align-items:center!important}:host(.wje-align-items-end){align-items:flex-end!important}";
-class r extends u {
-  /**
-   * Creates an instance of Row.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    o(this, "className", "Row");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return j;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Executes before the component is drawn.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   */
-  beforeDraw(e, h, x) {
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(e, h, x) {
-    let s = document.createDocumentFragment();
-    this.hasAttribute("wrap") && this.classList.add("wje-wrap");
-    let m = document.createElement("slot");
-    return s.appendChild(m), s;
-  }
-}
-r.define("wje-row", r);
-export {
-  r as default
-};

package/dist/wje-select.js

@@ -1,240 +0,0 @@
-var f = Object.defineProperty;
-var A = (n, a, e) => a in n ? f(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e;
-var u = (n, a, e) => (A(n, typeof a != "symbol" ? a + "" : a, e), e);
-import E from "./wje-element.js";
-import x from "./wje-button.js";
-import "./wje-popup.js";
-import y from "./wje-icon.js";
-import C from "./wje-label.js";
-import L from "./wje-chip.js";
-import { P as O } from "./popup.element-CpEjis9f.js";
-const k = ":host{--wje-select-border-width: 1px;--wje-select-border-style: solid;--wje-select-border-color: var(--wje-border-color);--wje-select-options-border-width: 1px;--wje-select-options-border-style: var(--wje-border-style);--wje-select-options-border-color: var(--wje-border-color);--wje-select-background: var(--wje-background);--wje-select-line-height: 20px;--wje-select-color: var(--wje-color);--wje-select-border-radius: var(--wje-border-radius-medium);width:100%;display:block}:host [slot=arrow]{transform:rotate(0);transition:all .2s ease-in}.native-select.default .wrapper{display:block;border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius);padding-inline:.5rem;padding-top:.25rem;padding-bottom:.25rem}.native-select.default .input-wrapper{padding:0;min-height:25px;margin-top:-4px}.native-select.default.focused wje-label{opacity:.67;font-size:12px;letter-spacing:normal}.native-select.default wje-label{margin:0;display:block;opacity:1;cursor:text;transition:opacity .2s ease 0s;line-height:var(--wje-select-line-height)}.native-select.default wje-label.fade{opacity:.5;font-size:12px;letter-spacing:normal}.native-select.standard .wrapper{border-width:var(--wje-select-border-width);border-style:var(--wje-select-border-style);border-color:var(--wje-select-border-color);border-radius:var(--wje-select-border-radius)}.native-select.standard .input-wrapper{background:transparent;width:100%}.wrapper{display:flex;width:100%}.input-wrapper{display:grid;grid-template-columns:1fr auto auto;align-items:center;background-color:var(--wje-select-background);min-height:28px;color:var(--wje-select-color);line-height:var(--wje-select-line-height);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:2px .5rem;font-size:14px;font-weight:400;vertical-align:middle}input{border:medium;height:25px;min-height:25px;padding:0;background:none;box-shadow:none;width:100%;outline:0}::placeholder{opacity:1}:host [active] .wrapper{border-radius:var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0}:host [active] [slot=arrow]{transform:rotate(180deg);transition:all .2s ease-in}.option-wrapper{border-width:var(--wje-select-options-border-width);border-style:var(--wje-select-options-border-style);border-color:var(--wje-select-options-border-color);border-radius:0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);margin-top:-1px;background:var(--wje-select-background);overflow:auto}:host([multiple]) input{position:absolute;z-index:-1;top:0;left:0;width:0;height:0;opacity:0}:host([multiple]) .chips{display:flex;flex:1;align-items:center;flex-wrap:wrap}:host([disabled]) .input-wrapper{opacity:.5;pointer-events:none;cursor:not-allowed}.counter{padding-inline:.5rem}wje-chip{--wje-chip-margin: 0 .25rem 0 0}wje-button{--wje-padding-top: .25rem;--wje-padding-start: .25rem;--wje-padding-end: .25rem;--wje-padding-bottom: .25rem;--wje-button-margin-inline: 0 .25rem}";
-class v extends E {
-  /**
-   * Creates an instance of Select.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    u(this, "depandencies", {
-      "wje-button": x,
-      "wje-popup": O,
-      "wje-icon": y,
-      "wje-label": C,
-      "wje-chip": L
-    });
-    u(this, "className", "Select");
-    /**
-     * Handles the option change event.
-     *
-     * @param {Event} e - The event.
-     */
-    u(this, "optionChange", (e) => {
-      let t = this.getAllOptions();
-      this.hasAttribute("multiple") || (t.forEach((r) => {
-        r.selected = !1, r.removeAttribute("selected");
-      }), this.popup.removeAttribute("active")), e.target.selected = !e.target.hasAttribute("selected"), this.selections(e.target);
-    });
-    /**
-     * Handles the chip remove event.
-     *
-     * @param {Event} e - The event.
-     */
-    u(this, "removeChip", (e) => {
-      let t = e.target.option;
-      t.selected = !1, t.removeAttribute("selected"), e.target.parentNode.removeChild(e.target), this.selections(null, 0);
-    });
-    this._selected = [], this.counterEl = null;
-  }
-  /**
-   * Sets the selected value.
-   *
-   * @param {Array} value - The selected value.
-   */
-  set selected(e) {
-    this._selected = e;
-  }
-  /**
-   * Returns the selected value.
-   *
-   * @returns {Array} The selected value.
-   */
-  get selected() {
-    return this.getSelected();
-  }
-  /**
-   * Sets the trigger value.
-   *
-   * @param {string} value - The trigger value.
-   */
-  set trigger(e) {
-    this.setAttribute("trigger", e);
-  }
-  /**
-   * Returns the trigger value.
-   *
-   * @returns {string} The trigger value.
-   */
-  get trigger() {
-    return this.getAttribute("trigger") || "click";
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return k;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return ["active", "value"];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(e, t, r) {
-    let i = document.createDocumentFragment();
-    this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
-    let s = document.createElement("div");
-    s.setAttribute("part", "native"), s.classList.add("native-select", this.variant || "default");
-    let p = document.createElement("div");
-    p.classList.add("wrapper"), p.setAttribute("slot", "anchor");
-    let m = document.createElement("wje-label");
-    m.innerText = this.label || "";
-    let d = document.createElement("div");
-    d.classList.add("input-wrapper");
-    let o = document.createElement("input");
-    o.setAttribute("type", "text"), o.setAttribute("part", "input"), o.setAttribute("autocomplete", "off"), o.setAttribute("readonly", ""), o.setAttribute("placeholder", this.placeholder || "");
-    let w = document.createElement("wje-icon");
-    w.setAttribute("name", "chevron-down"), w.setAttribute("slot", "arrow");
-    let b = document.createElement("div");
-    b.classList.add("chips"), b.innerText = this.placeholder || "";
-    let c = document.createElement("div");
-    c.classList.add("option-wrapper"), c.style.setProperty("height", this.maxHeight || "auto");
-    let j = document.createElement("slot"), h = document.createElement("wje-button");
-    h.setAttribute("fill", "link"), h.setAttribute("part", "clear");
-    let g = document.createElement("wje-icon");
-    g.setAttribute("name", "x"), h.appendChild(g);
-    let l = document.createElement("wje-popup");
-    return l.setAttribute("placement", "bottom-start"), l.setAttribute("manual", ""), l.setAttribute("size", ""), this.hasAttribute("disabled") && l.setAttribute("disabled", ""), this.variant === "standard" ? this.hasAttribute("label") && s.appendChild(m) : p.appendChild(m), d.appendChild(o), this.hasAttribute("multiple") && d.appendChild(b), this.hasAttribute("clearable") && d.appendChild(h), d.appendChild(w), c.appendChild(j), p.appendChild(d), l.appendChild(p), l.appendChild(c), this.trigger === "click" && l.setAttribute("manual", ""), s.appendChild(l), this.native = s, this.popup = l, this.labelElement = m, this.input = o, this.optionsWrapper = c, this.chips = b, this.clear = h, i.appendChild(s), i;
-  }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   */
-  afterDraw(e, t, r) {
-    this.input.addEventListener("focus", (i) => {
-      this.labelElement.classList.add("fade"), this.native.classList.add("focused");
-    }), this.input.addEventListener("blur", (i) => {
-      this.native.classList.remove("focused"), i.target.value || this.labelElement.classList.remove("fade");
-    }), this.addEventListener("wje:option-change", this.optionChange), this.clear.addEventListener("wje-button:click", (i) => {
-      this.getAllOptions().forEach((s) => {
-        s.selected = !1, s.removeAttribute("selected");
-      }), this.selections(), i.stopPropagation();
-    }), this.selections(), this.optionsWrapper.addEventListener("wje:options-load", (i) => {
-      this.optionsWrapper.scrollTo(0, 0);
-    });
-  }
-  /**
-   * Returns all the options.
-   *
-   * @returns {NodeList} The options.
-   */
-  getAllOptions() {
-    return this.querySelectorAll("wje-option");
-  }
-  /**
-   * Returns the selected options.
-   *
-   * @returns {NodeList} The selected options.
-   */
-  getSelectedOptions() {
-    return this.querySelectorAll("wje-option[selected]");
-  }
-  /**
-   * Returns the selected options.
-   *
-   * @param {Element} option - The option to get.
-   * @returns {Array} The selected options.
-   */
-  getSelected(e) {
-    let t = this.getSelectedOptions();
-    return t = Array.isArray(t) ? t : Array.from(t), t = t.map((r) => ({
-      value: r.value,
-      text: r.textContent.trim()
-    })), t;
-  }
-  /**
-   * Handles the selection change.
-   *
-   * @param {Element} option - The option that changed.
-   * @param {number} length - The length of the selected options.
-   */
-  selectionChanged(e = null, t = 0) {
-    if (this.hasAttribute("multiple"))
-      this.value = this.selectedOptions.map((r) => r).reverse(), this.placeholder && t === 0 ? (this.chips.innerHTML = this.placeholder, this.input.value = "") : this.counterEl instanceof HTMLElement || t > +this.maxOptions ? this.counter() : e != null && this.chips.appendChild(this.getChip(e));
-    else {
-      let r = (e == null ? void 0 : e.textContent.trim()) || "";
-      this.value = r, this.input.value = r;
-    }
-  }
-  /**
-   * Handles the selections.
-   *
-   * @param {Element} option - The option to select.
-   */
-  selections(e) {
-    let t = this.getSelectedOptions();
-    this.selectedOptions = Array.isArray(t) ? t : Array.from(t), this.selectedOptions.length >= +this.maxOptions && (this.counterEl = null), this.chips.innerHTML = "", this.selectedOptions.length > 0 ? this.selectedOptions.forEach((r, i) => {
-      this.selectionChanged(r, ++i);
-    }) : this.selectionChanged();
-  }
-  /**
-   * Handles the counter.
-   */
-  counter() {
-    if (this.counterEl && this.value.length === +this.maxOptions) {
-      this.counterEl.remove(), this.counterEl = null;
-      return;
-    }
-    this.counterEl || (this.counterEl = document.createElement("span"), this.counterEl.classList.add("counter"), this.chips.appendChild(this.counterEl)), this.counterEl.innerText = `+${this.value.length - +this.maxOptions}`;
-  }
-  /**
-   * Returns a chip element.
-   *
-   * @param {Element} option - The option to get the chip for.
-   * @returns {Element} The chip element.
-   */
-  getChip(e) {
-    let t = document.createElement("wje-chip");
-    t.setAttribute("removable", ""), t.addEventListener("wje:chip-remove", this.removeChip), t.option = e;
-    let r = document.createElement("wje-label");
-    return r.innerText = e.textContent.trim(), t.appendChild(r), t;
-  }
-}
-v.define("wje-select", v);
-export {
-  v as default
-};

package/dist/wje-slider.js

@@ -1,177 +0,0 @@
-var p = Object.defineProperty;
-var j = (t, o, r) => o in t ? p(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r;
-var c = (t, o, r) => (j(t, typeof o != "symbol" ? o + "" : o, r), r);
-import g, { event as s } from "./wje-element.js";
-const k = ':host{--wje-slider-track-height: .25rem;position:relative;display:flex;align-items:center;max-width:100%}:host .native-slider{display:flex;position:relative;flex-grow:1;align-items:center;height:inherit}:host .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;--wje-slider-color: var(--wje-color-primary);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}input[type=range]::-moz-range-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:pointer;transition:background .3s ease-in-out;border:0}input[type=range]::-ms-thumb{-webkit-appearance:none;height:18px;width:18px;border-radius:50%;cursor:ew-resize;transition:background .3s ease-in-out}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);--wje-slider-thumb-color: var(--wje-color-primary);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-primary)),var(--wje-slider-color, var(--wje-color-primary)))}input[type=range][color=primary]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=primary]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=primary]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]{--wje-slider-color: var(--wje-color-success);--wje-slider-thumb-color: var(--wje-color-success);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-success)),var(--wje-slider-color, var(--wje-color-success)))}input[type=range][color=success]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=success]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=success]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-success));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]{--wje-slider-color: var(--wje-color-complete);--wje-slider-thumb-color: var(--wje-color-complete);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-complete)),var(--wje-slider-color, var(--wje-color-complete)))}input[type=range][color=complete]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=complete]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=complete]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-complete));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]{--wje-slider-color: var(--wje-color-danger);--wje-slider-thumb-color: var(--wje-color-danger);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-danger)),var(--wje-slider-color, var(--wje-color-danger)))}input[type=range][color=danger]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=danger]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=danger]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-danger));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]{--wje-slider-color: var(--wje-color-warning);--wje-slider-thumb-color: var(--wje-color-warning);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-2) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-2);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-2));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-warning)),var(--wje-slider-color, var(--wje-color-warning)))}input[type=range][color=warning]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=warning]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=warning]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-warning));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]{--wje-slider-color: var(--wje-color-contrast-10);--wje-slider-thumb-color: var(--wje-color-contrast-10);--wje-slider-thumb-shadow: none;--wje-slider-thumb-shadow-active: color-mix(in hsl, var(--wje-color-contrast-6) 60%, white) 0 0 0 7px;--wje-slider-track-color: var(--wje-color-contrast-6);background-color:var(--wje-slider-track-color, var(--wje-color-contrast-6));background-image:linear-gradient(var(--wje-slider-color, var(--wje-color-contrast-10)),var(--wje-slider-color, var(--wje-color-contrast-10)))}input[type=range][color=dark]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range][color=dark]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range][color=dark]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-contrast-10));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-moz-range-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-ms-thumb{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow)}input[type=range]::-webkit-slider-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:active{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-webkit-slider-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-moz-range-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}input[type=range]::-ms-thumb:hover{background:var(--wje-slider-thumb-color, var(--wje-color-primary));box-shadow:var(--wje-slider-thumb-shadow-active)}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 1rem;font-size:var(--wje-font-size)}::slotted([slot=start]){margin-inline:0 1rem}::slotted([slot=end]){margin-inline:1rem 0}';
-class m extends g {
-  /**
-   * Creates an instance of Slider.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    c(this, "className", "Slider");
-    /**
-     * Sets the handle position of the slider.
-     */
-    c(this, "setHandlePosition", () => {
-      this.input.style.backgroundSize = this.getPercentage(this.input.value, this.input.min, this.input.max) + "% 100%";
-    });
-    /**
-     * Sets the bubble of the slider.
-     */
-    c(this, "setBubble", () => {
-      let r = this.getPercentage(this.input.value, this.input.min, this.input.max);
-      this.output.style.left = `calc(${r}% + (${8 - r * 0.15}px) - ${this.output.offsetWidth / 2}px)`, this.output.innerHTML = this.input.value;
-    });
-  }
-  /**
-   * Sets the value of the slider.
-   *
-   * @param {number} value - The value to set.
-   */
-  set value(r) {
-    this.setAttribute("value", r), this.input && (this.input.value = r, this.setHandlePosition());
-  }
-  /**
-   * Returns the value of the slider.
-   *
-   * @returns {number} The value of the slider.
-   */
-  get value() {
-    return this.getAttribute("value") || 0;
-  }
-  /**
-   * Sets the minimum value of the slider.
-   *
-   * @param {number} value - The minimum value to set.
-   */
-  set min(r) {
-    this.setAttribute("min", r);
-  }
-  /**
-   * 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(r) {
-    this.setAttribute("max", r);
-  }
-  /**
-   * 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(r) {
-    this.setAttribute("step", r);
-  }
-  /**
-   * 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 k;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return ["max"];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(r, n, d) {
-    let u = document.createDocumentFragment(), a = document.createElement("div");
-    a.className = "native-slider", a.setAttribute("part", "native");
-    let l = document.createElement("div");
-    l.className = "slider";
-    let w = document.createElement("slot");
-    w.name = "label";
-    let h = document.createElement("slot");
-    h.name = "start";
-    let b = document.createElement("slot");
-    b.name = "end";
-    let i = document.createElement("output");
-    i.setAttribute("for", "slider"), i.id = "output", i.setAttribute("hidden", "");
-    let e = document.createElement("input");
-    return e.type = "range", e.min = this.min, e.max = this.max, e.step = this.step, e.value = this.value, e.id = "slider", e.name = "slider", e.part = "slider", e.setAttribute("autocomplete", "off"), e.setAttribute("color", this.color || ""), e.addEventListener("input", null, (v) => {
-      this.setHandlePosition(v.target);
-    }), l.appendChild(e), this.hasAttribute("bubble") && l.appendChild(i), a.appendChild(w), a.appendChild(h), a.appendChild(l), a.appendChild(b), u.appendChild(a), this.input = e, this.output = i, u;
-  }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   */
-  afterDraw() {
-    this.setHandlePosition(), this.hasAttribute("bubble") && (this.output.innerHTML = this.input.value, this.output.removeAttribute("hidden"), setTimeout(this.setBubble, 50)), s.dispatchCustomEvent(this.input, "wje-slider:init", {
-      value: this.input.value,
-      output: this.output
-    }), s.addListener(this.input, "input", null, (r) => {
-      this.value = r.target.value, s.dispatchCustomEvent(this.input, "wje-slider:move", {
-        value: r.target.value,
-        output: this.output
-      }), this.hasAttribute("bubble") && this.setBubble();
-    }), s.addListener(this.input, "change", null, (r) => {
-      s.dispatchCustomEvent(this.input, "wje-slider:change", {
-        value: r.target.value,
-        output: this.output
-      });
-    });
-  }
-  /**
-   * Returns the percentage of the slider value.
-   *
-   * @param {number} value - The value of the slider.
-   * @param {number} min - The minimum value of the slider.
-   * @param {number} max - The maximum value of the slider.
-   * @returns {number} The percentage of the slider value.
-   */
-  getPercentage(r = 0, n, d) {
-    return Number((r - n) * 100 / (d - n)) || 0;
-  }
-}
-m.define("wje-slider", m);
-export {
-  m as default
-};

package/dist/wje-split-view.js

@@ -1,112 +0,0 @@
-var h = Object.defineProperty;
-var p = (s, e, t) => e in s ? h(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var c = (s, e, t) => (p(s, typeof e != "symbol" ? e + "" : e, t), t);
-import m from "./wje-element.js";
-function u(s, e) {
-  function t(n) {
-    const r = s.getBoundingClientRect(), i = s.ownerDocument.defaultView, d = r.left + i.pageXOffset, v = r.top + i.pageYOffset, w = n.pageX - d, a = n.pageY - v;
-    e != null && e.onMove && e.onMove(w, a);
-  }
-  function l() {
-    document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", l), e != null && e.onStop && e.onStop();
-  }
-  document.addEventListener("pointermove", t, { passive: !0 }), document.addEventListener("pointerup", l), (e == null ? void 0 : e.initialEvent) instanceof PointerEvent && t(e.initialEvent);
-}
-const j = ':host{--wje-split-view-divider-area: 12px;--wje-split-view-divider-width: 4px;--wje-split-view-min: 0%;--wje-split-view-max: 100%;--wje-split-view-calc-a: 50%;--wje-split-view-calc-b: 50%;--wje-split-view-clamp-a: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-a), var(--wje-split-view-max));--wje-split-view-clamp-b: clamp(var(--wje-split-view-min), var(--wje-split-view-calc-b), var(--wje-split-view-max));--wje-split-view-divider-background: var(--wje-border-color);--wje-split-view-divider-size: 4px;height:100%;width:100%}::slotted([slot=start]),::slotted([slot=end]){width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}:host(:not([vertical])) ::slotted([slot=start]){width:var(--wje-split-view-clamp-a)}:host(:not([vertical])) ::slotted([slot=end]){width:var(--wje-split-view-clamp-b)}:host([vertical]) ::slotted([slot=start]){height:var(--wje-split-view-clamp-a);width:100%}:host([vertical]) ::slotted([slot=end]){height:var(--wje-split-view-clamp-b);width:100%}.native-split-view{height:100%;width:100%;display:flex;flex-direction:row;overflow:hidden;position:relative}:host([vertical]) .native-split-view{flex-direction:column}.wje-divider{display:flex;position:relative;align-items:center;justify-content:center;z-index:1;background-color:var(--wje-split-view-divider-background);height:100%;width:var(--wje-split-view-divider-size);cursor:col-resize}.wje-divider:after{display:flex;content:"";position:absolute;height:100%;left:calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);width:var(--wje-split-view-divider-area)}:host([vertical]) .wje-divider{height:var(--wje-split-view-divider-size);width:100%;cursor:row-resize}:host([vertical]) .wje-divider:after{width:100%;top:calc(var(--wje-split-view-divider-area) / -2 + var(--wje-split-view-divider-width) / 2);height:var(--wje-split-view-divider-area)}';
-class o extends m {
-  /**
-   * Creates an instance of SplitView.
-   *
-   * @constructor
-   */
-  constructor() {
-    super();
-    c(this, "className", "SplitView");
-    /**
-     * Handles the drag event.
-     *
-     * @param {Event} e - The event object.
-     */
-    c(this, "handleDrag", (t) => {
-      if (this.hasAttribute("disabled"))
-        return !1;
-      u(this, {
-        onMove: (l, n) => {
-          let r = this.hasAttribute("vertical") ? n : l, i = this.pixelsToPercentage(r), d = 100 - this.pixelsToPercentage(r);
-          this.style.setProperty("--wje-split-view-calc-a", i + "%"), this.style.setProperty("--wje-split-view-calc-b", d + "%");
-        },
-        initialEvent: t
-      });
-    });
-  }
-  /**
-   * Returns the CSS styles for the component.
-   *
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return j;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
-   */
-  draw(t, l, n) {
-    let r = document.createDocumentFragment(), i = document.createElement("div");
-    i.classList.add("native-split-view");
-    let d = document.createElement("slot");
-    d.setAttribute("name", "start");
-    let v = document.createElement("slot");
-    v.setAttribute("name", "end");
-    let w = document.createElement("slot");
-    w.setAttribute("name", "divider");
-    let a = document.createElement("div");
-    return a.classList.add("wje-divider"), a.setAttribute("part", "divider"), a.appendChild(w), a.addEventListener("mousedown", this.handleDrag, !1), i.appendChild(d), i.appendChild(a), i.appendChild(v), r.appendChild(i), r;
-  }
-  /**
-   * Sets up the event listeners after the component is drawn.
-   */
-  afterDraw() {
-    this.detectSize(), this.min && this.style.setProperty("--wje-split-view-min", this.pixelsToPercentage(this.min) + "%"), this.max && this.style.setProperty("--wje-split-view-max", 100 - this.pixelsToPercentage(this.max) + "%"), this.initial && (this.style.setProperty("--wje-split-view-calc-a", this.pixelsToPercentage(this.initial) + "%"), this.style.setProperty("--wje-split-view-calc-b", 100 - this.pixelsToPercentage(this.initial) + "%")), this.resizeObserver = new ResizeObserver((t) => this.handleResize(t));
-  }
-  /**
-   * Detects the size of the split view.
-   */
-  detectSize() {
-    const { width: t, height: l } = this.getBoundingClientRect();
-    this.size = this.hasAttribute("vertical") ? l : t;
-  }
-  /**
-   * Converts pixels to a percentage.
-   *
-   * @param {number} value - The pixel value.
-   * @returns {number} The percentage value.
-   */
-  pixelsToPercentage(t) {
-    return t / this.size * 100;
-  }
-}
-o.define("wje-split-view", o);
-export {
-  o as default
-};