wj-elements 0.1.128 → 0.1.129

package/dist/wje-color-picker.js

@@ -973,19 +973,23 @@ class ColorPicker extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "ColorPicker");
-    __publicField(this, "moveMarker", (event2) => {
+    /**
+     * Moves the marker to the given position.
+     * @param e
+     */
+    __publicField(this, "moveMarker", (e) => {
       this.colorAreaDimension = this.dimension();
-      const pointer = this.getPointerPosition(event2);
+      const pointer = this.getPointerPosition(e);
       let x = pointer.pageX - this.colorAreaDimension.x;
       let y = pointer.pageY - this.colorAreaDimension.y;
       this.setColor(this.setColorAtPosition(x, y), "marker");
       this.setMarkerPosition(x, y);
     });
-    /*
-    * @desc nanstavenie pozicie markera podla farby
-    * @param color
-    * @returns {{x: number, y: number}}
-    */
+    /**
+     * Sets the marker position by color.
+     * @param color
+     * @returns {{x: number, y: number}}
+     */
     __publicField(this, "setMarkerPositionByColor", (color = "red") => {
       let hsva = tinycolor(color).toHsv();
       return {
@@ -993,9 +997,11 @@ class ColorPicker extends WJElement {
         y: this.colorAreaDimension.height - this.colorAreaDimension.height * hsva.v
       };
     });
-    /*
-    * Set css variable color value
-    */
+    /**
+     * Sets the color.
+     * @param color
+     * @param type
+     */
     __publicField(this, "setColor", (color = null, type = "") => {
       let currentColor = color;
       if (currentColor === null && type === "") {
@@ -1049,22 +1055,19 @@ class ColorPicker extends WJElement {
       };
       event.dispatchCustomEvent(this, "wje-color-picker:select", this.value);
     });
-    /*
-    * Set hue sliders
-     */
-    __publicField(this, "setHue", (e) => {
-      this.hueSlider.value = e.detail.value;
-      this.setColor(null, "hue");
-    });
-    /*
-    * Set alpha sliders
+    /**
+     * Sets the hue.
+     * @param e
      */
     __publicField(this, "setAlpha", (e) => {
       this.alphaSlider.value = e.detail.value;
       this.setColor(null, "alpha");
     });
-    /*
-    * Get HSVA color order by hue and alpha
+    /**
+     * Sets the hue.
+     * @param hue
+     * @param alpha
+     * @returns {`hsva(${string}, 100%, 100%, ${number})`}
      */
     __publicField(this, "getHSVA", (hue, alpha) => {
       return `hsva(${hue}, 100%, 100%, ${alpha / 100})`;
@@ -1144,7 +1147,7 @@ class ColorPicker extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.classList.add("native-color-picker");
@@ -1211,6 +1214,10 @@ class ColorPicker extends WJElement {
     this.input = input;
     return fragment;
   }
+  /**
+   * Sets the hue.
+   * @param node
+   */
   createSwatches(node) {
     if (this.swatches.length === 0) return;
     let swatches = document.createElement("div");
@@ -1227,11 +1234,12 @@ class ColorPicker extends WJElement {
     });
     node.appendChild(swatches);
   }
-  setSliders(color) {
-    let hsva = tinycolor(color).toHsv();
-    this.hueSlider.value = hsva.h;
-    this.alphaSlider.value = hsva.a * 100;
-  }
+  /**
+   * Sets up the event listeners for the ColorPicker.
+   * @param {Object} context - The context to use.
+   * @param {Object} store - The store to use.
+   * @param {Object} params - The parameters to use.
+   */
   afterDraw() {
     this.init = false;
     this.addEventListener("wje-popup:show", (e) => {
@@ -1240,7 +1248,7 @@ class ColorPicker extends WJElement {
           this.colorAreaDimension = this.dimension();
           this.markerPosition = this.setMarkerPositionByColor(this.input.value);
           this.setMarkerPosition(this.markerPosition.x, this.markerPosition.y);
-          if (this.input.value != "")
+          if (this.input.value !== "")
             this.alphaSlider.value = 100;
           this.setColor();
         }, 0);
@@ -1248,6 +1256,19 @@ class ColorPicker extends WJElement {
       }
     });
   }
+  /**
+   * Sets the sliders to the given color.
+   * @param color
+   */
+  setSliders(color) {
+    let hsva = tinycolor(color).toHsv();
+    this.hueSlider.value = hsva.h;
+    this.alphaSlider.value = hsva.a * 100;
+  }
+  /**
+   * Gets the dimensions of the color area.
+   * @returns {{width: *, x: *, y: *, height: *}}
+   */
   dimension() {
     return {
       width: this.colorArea.offsetWidth,
@@ -1256,20 +1277,28 @@ class ColorPicker extends WJElement {
       y: this.colorArea.offsetTop
     };
   }
+  /**
+   * Disconnects the ColorPicker.
+   */
   beforeDisconnect() {
     this.init = false;
   }
-  getPointerPosition(event2) {
+  /**
+   * Sets the hue.
+   * @param e
+   * @returns {{pageY: (*|number), pageX: (*|number)}}
+   */
+  getPointerPosition(e) {
     return {
-      pageX: event2.changedTouches ? event2.changedTouches[0].pageX : event2.clientX,
-      pageY: event2.changedTouches ? event2.changedTouches[0].pageY : event2.clientY
+      pageX: e.changedTouches ? e.changedTouches[0].pageX : e.clientX,
+      pageY: e.changedTouches ? e.changedTouches[0].pageY : e.clientY
     };
   }
-  /*
-  * Nastavi poziu markera
-  * @param x
-  * @param y
-  */
+  /**
+   * Sets the position of the marker.
+   * @param x
+   * @param y
+   */
   setMarkerPosition(x, y) {
     x = x < 0 ? 0 : x > this.colorAreaDimension.width ? this.colorAreaDimension.width : x;
     y = y < 0 ? 0 : y > this.colorAreaDimension.height ? this.colorAreaDimension.height : y;
@@ -1280,12 +1309,13 @@ class ColorPicker extends WJElement {
     this.marker.style.left = `${x}px`;
     this.marker.style.top = `${y}px`;
   }
-  /*
-  * nastavenie farby podla pozicie markera
-  * @param x
-  * @param y
-  * @returns {tinycolor}
-  */
+  /**
+   * Sets the color at the given position.
+   * @param x
+   * @param y
+   * @param alpha
+   * @returns {*|tinycolor}
+   */
   setColorAtPosition(x, y, alpha = 100) {
     const hsva = {
       h: this.hueSlider.value * 1,

package/dist/wje-container.js

@@ -44,7 +44,7 @@ class Container extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     if (this.indent)
       this.style.setProperty("--wje-container-indent", this.indent);

package/dist/wje-copy-button.js

@@ -17,7 +17,7 @@ function copyNode(node) {
     return navigator.clipboard.writeText(node.textContent || "");
   }
   const selection = getSelection();
-  if (selection == null) {
+  if (selection === null) {
     return Promise.reject(new Error());
   }
   selection.removeAllRanges();
@@ -149,7 +149,7 @@ class CopyButton extends WJElement {
    * @param {Object} params - The parameters to use.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let tooltip = document.createElement("wje-tooltip");
     tooltip.setAttribute("offset", "5");
@@ -168,7 +168,7 @@ class CopyButton extends WJElement {
     return fragment;
   }
   /**
-   * Sets up the event listeners after the CopyButton is drawn.
+   * Adds event listeners for the click, focus, and blur events.
    */
   afterDraw() {
     event.addListener(this, "click", null, this.clicked);

package/dist/wje-dialog.js

@@ -5,9 +5,20 @@ import WJElement, { event } from "./wje-element.js";
 import "./wje-icon.js";
 const styles = '/*\n[ WJ Dialog ]\n*/\n\n:host {\n  --wje-dialog-header-actions-gap: 0.5rem;\n  \n  .close {\n    margin-left: auto;\n  }\n\n  .header-actions {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    gap: var(--wje-dialog-header-actions-gap);\n  }\n\n  .modal-content {\n    border-radius: 3px;\n    box-shadow: none;\n  }\n\n  .dialog-header {\n    position: relative;\n    border-bottom: 0;\n    padding-inline: var(--wje-dialog-padding);\n    padding-top: var(--wje-dialog-padding);\n    padding-bottom: var(--wje-dialog-padding);\n    display: flex;\n    align-items: center;\n    span {\n      font-family: var(--wje-font-family-secondary);\n      font-size: 10.5px;\n      text-transform: uppercase;\n      display: inline-block;\n      letter-spacing: 0.06em;\n      font-weight: 500;\n      margin: 0;\n      padding: 0;\n      line-height: normal;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      filter: alpha(opacity=40);\n    }\n  }\n\n  .dialog-content {\n    box-shadow: none;\n    padding-inline: var(--wje-dialog-padding);\n    white-space: normal;\n    z-index: 1;\n  }\n\n  .dialog-footer {\n    display: flex;\n    justify-content: end;\n    border-top: none;\n    box-shadow: none;\n    margin-top: 0;\n    padding-inline: var(--wje-dialog-padding-inline);\n    padding-top: var(--wje-dialog-padding-top);\n    padding-bottom: var(--wje-dialog-padding-bottom);\n  }\n}\n\ndialog::backdrop {\n  opacity: var(--wje-backdrop-opacity);\n  background-color: var(--wje-backdrop);\n}\n\ndialog:focus-visible {\n  outline: none;\n}\n\n:host(.separator) .dialog-header:after {\n  content: "";\n  height: 1px;\n  background: rgba(0, 0, 0, 0.08);\n  left: var(--wje-dialog-padding);\n  right: var(--wje-dialog-padding);\n  position: absolute;\n  bottom: 0;\n}\n\n:host {\n  dialog {\n    box-sizing: border-box;\n    transition: all 0.2s !important;\n    width: var(--wje-dialog-width);\n    height: var(--wje-dialog-height);\n    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n\n    border-radius: var(--wje-dialog-border-radius);\n    border-width: var(--wje-dialog-border-width);\n    border-style: var(--wje-dialog-border-style);\n    border-color: var(--wje-dialog-border-color);\n\n    margin-top: var(--wje-dialog-margin-top);\n\n    margin-bottom: var(--wje-dialog-margin-bottom);\n    margin-inline: var(--wje-dialog-margin-start) var(--wje-dialog-margin-end);\n\n    padding: 0;\n  }\n}\n\n/*Top*/\n:host(.stick-up) {\n  --wje-dialog-width: 300px !important;\n  --wje-dialog-height: fit-content;\n  --wje-dialog-border-radius: 0 0 8px 8px;\n  --wje-dialog-border-width: 0 1px 1px 1px;\n  --wje-dialog-margin-top: 0;\n  --wje-dialog-translate-from: translateY(-110%);\n  --wje-dialog-template-to: translateX(0);\n}\n\n/*Cenetered*/\n:host(.slide-up) {\n  --wje-dialog-width: 300px !important;\n  --wje-dialog-height: fit-content;\n  --wje-dialog-border-radius: 8px;\n  --wje-dialog-border-width: 1px;\n  --wje-dialog-opacity-from: 0;\n  --wje-dialog-translate-from: scale(.9);\n  --wje-dialog-translate-to: scale(1);\n}\n\n/*Fullscreen*/\n:host(.fill-in) {\n  --wje-dialog-width: 100%;\n  --wje-dialog-height: 100%;\n  --wje-dialog-border-radius: 0 0 0 0 !important;\n  --wje-dialog-border-width: 0;\n  --wje-dialog-margin-top: 0;\n  --wje-dialog-margin-start: 0;\n  --wje-dialog-margin-end: 0;\n  --wje-dialog-margin-bottom: 0;\n  --wje-dialog-translate-from: scale(.95);\n  --wje-dialog-translate-to: scale(1);\n  dialog {\n    min-width: var(--wje-dialog-width);\n    min-height: var(--wje-dialog-height);\n  }\n}\n\n/*Slide Left*/\n:host(.slide-left) {\n  --wje-dialog-width: 300px !important;\n  --wje-dialog-height: 100% !important;\n  --wje-dialog-border-radius: 0;\n  --wje-dialog-border-width: 0 1px 0 0;\n  --wje-dialog-margin-top: 0;\n  --wje-dialog-margin-start: 0;\n  --wje-dialog-margin-end: auto;\n  --wje-dialog-margin-bottom: 0;\n  dialog {\n    min-height: var(--wje-dialog-height);\n    --wje-dialog-translate-from: translateX(-110%);\n    --wje-dialog-template-to: translateX(0);\n  }\n}\n\n/*Slide Right*/\n:host(.slide-right) {\n  --wje-dialog-width: 300px !important;\n  --wje-dialog-height: 100% !important;\n  --wje-dialog-border-radius: 0;\n  --wje-dialog-border-width: 0 0 0 1px;\n  --wje-dialog-margin-top: 0;\n  --wje-dialog-margin-start: auto;\n  --wje-dialog-margin-end: 0;\n  --wje-dialog-margin-bottom: 0;\n  dialog {\n    min-height: var(--wje-dialog-height);\n    --wje-dialog-translate-from: translateX(110%);\n    --wje-dialog-template-to: translateX(0);\n  }\n}\n\n:host(.small) {\n  --wje-dialog-width: 300px !important;\n}\n\n:host(.medium) {\n  --wje-dialog-width: 500px !important;\n}\n\n:host(.large) {\n  --wje-dialog-width: 600px !important;\n}\n\n:host(.ex-large) {\n  --wje-dialog-width: 900px !important;\n}\n\ndialog[open] {\n  animation: show .5s ease normal;\n}\n\n@keyframes show{\n  from {\n    opacity: var(--wje-dialog-opacity-from, 1);\n    transform: var(--wje-dialog-translate-from);\n  }\n  to {\n    opacity: 1;\n    transform: var(--wje-dialog-translate-to);\n  }\n}';
 class Dialog extends WJElement {
+  /**
+   * @constructor
+   */
   constructor() {
     super();
+    /**
+     * Sets the headline of the dialog.
+     * @type {string}
+     */
     __publicField(this, "className", "Dialog");
+    /**
+     * Opens the dialog.
+     * @param e
+     */
     __publicField(this, "onOpen", (e) => {
       this.dialog.innerHTML = "";
       Promise.resolve(this.beforeOpen(this, e)).then((res) => {
@@ -18,6 +29,10 @@ class Dialog extends WJElement {
         }
       });
     });
+    /**
+     * Closes the dialog.
+     * @param e
+     */
     __publicField(this, "onClose", (e) => {
       Promise.resolve(this.beforeClose(this, e)).then((res) => {
         this.dialog.close();
@@ -27,34 +42,77 @@ class Dialog extends WJElement {
       });
     });
   }
+  /**
+   * Sets the headline of the dialog.
+   * @param value
+   */
   set placement(value) {
     this.setAttribute("placement", value);
   }
+  /**
+   * Gets the headline of the dialog.
+   * @returns {string|string}
+   */
   get placement() {
     return this.getAttribute("placement") || "slide-up";
   }
+  /**
+   * Sets the headline of the dialog.
+   * @param value
+   */
   set async(value) {
     this.setAttribute("async", "");
   }
+  /**
+   * Gets the headline of the dialog.
+   * @returns {boolean}
+   */
   get async() {
     return this.hasAttribute("async");
   }
+  /**
+   * Sets the headline of the dialog.
+   * @param value
+   */
   set closeHidden(value) {
     if (value)
       this.setAttribute("close-hidden", "");
   }
+  /**
+   * Gets the headline of the dialog.
+   * @returns {boolean}
+   */
   get closeHidden() {
     return !!this.hasAttribute("close-hidden");
   }
+  /**
+   * Returns the CSS styles for the component.
+   * @returns {*}
+   */
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @returns {*[]}
+   */
   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(context, store, params) {
     let fragment = document.createDocumentFragment();
     this.classList.add("fade", this.placement, params.size);
@@ -64,6 +122,10 @@ class Dialog extends WJElement {
     this.dialog = dialog;
     return fragment;
   }
+  /**
+   * Creates the dialog body.
+   * @param dialog
+   */
   htmlDialogBody(dialog) {
     let icon = document.createElement("wje-icon");
     icon.setAttribute("name", "x");
@@ -106,15 +168,30 @@ class Dialog extends WJElement {
     dialog.appendChild(body);
     dialog.appendChild(footer);
   }
+  /**
+   * Closes the dialog.
+   * @param e
+   */
   close(e) {
     this.onClose(e);
   }
+  /**
+   * 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}
+   */
   afterDraw(context, store, params) {
     if (params.trigger) {
       event.addListener(document, params.trigger, null, this.onOpen);
     }
     this.dialog.addEventListener("close", this.onClose);
   }
+  /**
+   * Before the component is disconnected.
+   */
   beforeDisconnect() {
     var _a, _b;
     if ((_a = this.params) == null ? void 0 : _a.trigger) {
@@ -122,12 +199,24 @@ class Dialog extends WJElement {
     }
     this.dialog.removeEventListener("close", this.onClose);
   }
+  /**
+   * Before the dialog opens.
+   */
   beforeOpen() {
   }
+  /**
+   * After the dialog opens.
+   */
   afterOpen() {
   }
+  /**
+   * Before the dialog closes.
+   */
   beforeClose() {
   }
+  /**
+   * After the dialog closes.
+   */
   afterClose() {
   }
 }

package/dist/wje-divider.js

@@ -42,7 +42,7 @@ class Divider extends WJElement {
    * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment} The created document fragment.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     let slot = document.createElement("slot");

package/dist/wje-dropdown.js

@@ -2,7 +2,7 @@ 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, { event } from "./wje-element.js";
-import { P as Popup } from "./popup.element-l8v-dMoK.js";
+import { P as Popup } from "./popup.element-C0a1z1y2.js";
 class Dropdown extends WJElement {
   /**
    * Creates an instance of Dropdown.
@@ -17,7 +17,6 @@ class Dropdown extends WJElement {
     __publicField(this, "className", "Dropdown");
     /**
      * Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.
-     *
      * @param {Event} e - The event object.
      */
     __publicField(this, "otherDropdownOpennedCallback", (e) => {
@@ -45,7 +44,7 @@ class Dropdown extends WJElement {
      * @summary Open the popup
      * @param e
      */
-    __publicField(this, "onOpen", async (e) => {
+    __publicField(this, "onOpen", (e) => {
       e.stopPropagation();
       this.classList.add("active");
       Promise.resolve(this.beforeShow(this)).then((res) => {
@@ -69,7 +68,7 @@ class Dropdown extends WJElement {
      * @summary Close the popup
      * @param e
      */
-    __publicField(this, "onClose", async (e) => {
+    __publicField(this, "onClose", (e) => {
       this.classList.remove("active");
       this.popup.hide();
       event.dispatchCustomEvent(this, "wje-dropdown:close", {
@@ -87,15 +86,28 @@ class Dropdown extends WJElement {
   static get observedAttributes() {
     return ["active"];
   }
+  /**
+   * Sets up the attributes for the dropdown.
+   */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  /**
+   * Removes the popup element.
+   */
   beforeDraw() {
     var _a;
     (_a = this.popup) == null ? void 0 : _a.remove();
     this.popup = null;
   }
-  draw(context, store, params) {
+  /**
+   * Draws the dropdown element.
+   * @params {Object} context - The context to draw in.
+   * @params {Object} store - The store to use.
+   * @params {Object} params - The parameters to use.
+   * @returns {DocumentFragment}
+   */
+  draw() {
     let fragment = document.createDocumentFragment();
     this.classList.add(
       "wje-placement",
@@ -127,11 +139,14 @@ class Dropdown extends WJElement {
     event.removeListener(this, "mouseleave", null, this.onClose);
     event.removeListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: true });
   }
+  /**
+   * Adds event listeners for the mouseenter and mouseleave events.
+   */
   afterDraw() {
     event.addListener(this, "wje-popup:hide", null, () => {
       this.classList.remove("active");
     });
-    if (this.trigger != "click") {
+    if (this.trigger !== "click") {
       event.addListener(this, "mouseenter", null, this.onOpen);
       event.addListener(this, "mouseleave", null, this.onClose);
     } else {