wj-elements 0.1.129 → 0.1.130

package/dist/wje-row.js

@@ -6,16 +6,18 @@ const styles = "/*\n[ Row ]\n*/\n:host {\n  display: flex;\n  flex-wrap: wrap;\n
 class Row extends WJElement {
   /**
    * Creates an instance of Row.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
     __publicField(this, "className", "Row");
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -29,16 +31,12 @@ class Row extends WJElement {
     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.
+   * Draws the component for the row.
    * @returns {DocumentFragment}
    */
   draw() {
     let fragment = document.createDocumentFragment();
-    if (this.hasAttribute("wrap"))
-      this.classList.add("wje-wrap");
+    if (this.hasAttribute("wrap")) this.classList.add("wje-wrap");
     let element = document.createElement("slot");
     fragment.appendChild(element);
     return fragment;

package/dist/wje-select.js

@@ -10,13 +10,11 @@ import Chip from "./wje-chip.js";
 import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
-import { P as Popup } from "./popup.element-C0a1z1y2.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n  --wje-select-border-width: 1px;\n  --wje-select-border-style: solid;\n  --wje-select-border-color: var(--wje-border-color);\n\n  --wje-select-options-border-width: 1px;\n  --wje-select-options-border-style: var(--wje-border-style);\n  --wje-select-options-border-color: var(--wje-border-color);\n\n  --wje-select-background: var(--wje-background);\n  --wje-select-line-height: 20px;\n  --wje-select-color: var(--wje-color);\n  --wje-select-border-radius: var(--wje-border-radius-medium);\n\n  --wje-select-margin-bottom: .5rem;\n  margin-bottom: var(--wje-select-margin-bottom);\n\n  width: 100%;\n  display: block;\n  [slot=arrow] {\n    transform: rotate(0deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.native-select {\n  &.default{\n    .wrapper {\n      display: block;\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n      padding-inline: .5rem;\n      padding-top: 0.125rem;\n      padding-bottom: 0.125rem;\n    }\n    .input-wrapper {\n      padding: 0;\n      min-height: 28px;\n      margin-top: -4px;\n    }\n    &.focused {\n      wje-label {\n        opacity: 0.67;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n    wje-label {\n      margin: 0;\n      display: block;\n      opacity: 1;\n      cursor: text;\n      transition: opacity 0.2s ease 0s;\n      line-height: var(--wje-select-line-height);\n      &.fade {\n        opacity: 0.5;\n        font-size: 12px;\n        letter-spacing: normal;\n      }\n    }\n  }\n  &.standard {\n    .wrapper {\n      background-color: var(--wje-select-background);\n      border-width: var(--wje-select-border-width);\n      border-style: var(--wje-select-border-style);\n      border-color: var(--wje-select-border-color);\n      border-radius: var(--wje-select-border-radius);\n    }\n    .input-wrapper {\n      background: transparent;\n      width: 100%;\n    }\n  }\n}\n\n.wrapper {\n  display: flex;\n  width: 100%;\n}\n\n.input-wrapper {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  background-color: var(--wje-select-background);\n  min-height: 28px;\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  appearance: none;\n  padding: 2px .5rem;\n  font-size: 14px !important;\n  font-weight: normal;\n  vertical-align: middle;\n}\n\ninput {\n  color: var(--wje-select-color);\n  line-height: var(--wje-select-line-height);\n  font-size: 14px !important;\n  font-weight: 400;\n  letter-spacing: .01em;\n  border: medium;\n  height: 25px;\n  min-height: 25px;\n  padding: 0;\n  background: none;\n  box-shadow: none;\n  width: 100%;\n  outline: 0;\n  font-size: 14px !important;\n}\n\n::placeholder {\n  opacity: 1;\n}\n\n:host [active] {\n  .wrapper {\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n  }\n  [slot=arrow] {\n    transform: rotate(180deg);\n    transition: all .2s ease-in;\n  }\n}\n\n.options-wrapper {\n  border-width: var(--wje-select-options-border-width);\n  border-style: var(--wje-select-options-border-style);\n  border-color: var(--wje-select-options-border-color);\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n  margin-top: calc(0px - var(--wje-select-border-width));\n  background: var(--wje-select-background);\n  overflow: hidden;\n\n}\n\n.find {\n  --wje-input-border-radius: 0;\n  --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n  overflow: auto;\n  height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n  height: calc(100% - 32px - .5rem);\n}\n\n:host([multiple]) input {\n  position: absolute;\n  z-index: -1;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n  opacity: 0;\n}\n\n:host([multiple]) .chips {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper{\n  opacity: 0.5;\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.counter {\n  padding-inline: .5rem;\n}\n\nwje-chip {\n  --wje-chip-margin: 0 .25rem 0 0;\n}\n\nwje-button {\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n.slot-start, .slot-end {\n  &:not(:empty) {\n    margin-right: .5rem;\n  }\n}\n";
+import { P as Popup } from "./popup.element-4DNn6DjX.js";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    --wje-select-border-width: 1px;\n    --wje-select-border-style: solid;\n    --wje-select-border-color: var(--wje-border-color);\n\n    --wje-select-options-border-width: 1px;\n    --wje-select-options-border-style: var(--wje-border-style);\n    --wje-select-options-border-color: var(--wje-border-color);\n\n    --wje-select-background: var(--wje-background);\n    --wje-select-line-height: 20px;\n    --wje-select-color: var(--wje-color);\n    --wje-select-border-radius: var(--wje-border-radius-medium);\n\n    --wje-select-margin-bottom: 0.5rem;\n    margin-bottom: var(--wje-select-margin-bottom);\n\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.native-select {\n    &.default {\n        .wrapper {\n            display: block;\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        wje-label {\n            margin: 0;\n            display: block;\n            opacity: 1;\n            cursor: text;\n            transition: opacity 0.2s ease 0s;\n            line-height: var(--wje-select-line-height);\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto 1fr auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    min-height: 28px;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background: var(--wje-select-background);\n    overflow: hidden;\n}\n\n.find {\n    --wje-input-border-radius: 0;\n    --wje-input-border-width: 0 0 1px 0;\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 0.5rem);\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n";
 class Select extends WJElement {
   /**
    * Creates an instance of Select.
-   *
-   * @constructor
    */
   constructor() {
     super();
@@ -33,8 +31,7 @@ class Select extends WJElement {
     __publicField(this, "className", "Select");
     /**
      * Handles the option change event.
-     *
-     * @param {Event} e - The event.
+     * @param {Event} e The event.
      */
     __publicField(this, "optionChange", (e) => {
       let allOptions = this.getAllOptions();
@@ -50,8 +47,7 @@ class Select extends WJElement {
     });
     /**
      * Handles the chip remove event.
-     *
-     * @param {Event} e - The event.
+     * @param {Event} e The event.
      */
     __publicField(this, "removeChip", (e) => {
       let option = e.target.option;
@@ -66,7 +62,7 @@ class Select extends WJElement {
   }
   /**
    * Setter for the value attribute.
-   * @param {string} value - The value to set.
+   * @param {string} value The value to set.
    */
   set value(value) {
     if (Array.isArray(value)) {
@@ -105,13 +101,11 @@ class Select extends WJElement {
   }
   /**
    * Setter for the invalid attribute.
-   * @param {boolean} isInvalid - Whether the input is invalid.
+   * @param {boolean} isInvalid Whether the input is invalid.
    */
   set invalid(isInvalid) {
-    if (isInvalid)
-      this.setAttribute("invalid", "");
-    else
-      this.removeAttribute("invalid");
+    if (isInvalid) this.setAttribute("invalid", "");
+    else this.removeAttribute("invalid");
   }
   /**
    * Getter for the form attribute.
@@ -169,22 +163,20 @@ class Select extends WJElement {
    * @summary Setter for the defaultValue attribute.
    * This method sets the 'value' attribute of the custom input element to the provided value.
    * The 'value' attribute represents the default value of the input element.
-   * @param {string} value - The value to set as the default value.
+   * @param {string} value The value to set as the default value.
    */
   set defaultValue(value) {
     this.setAttribute("value", value);
   }
   /**
-   * Sets the selected value.
-   *
-   * @param {Array} value - The selected value.
+   * Sets the label value.
+   * @param {Array} value The selected value to set.
    */
   set selected(value) {
     this._selected = value;
   }
   /**
    * Returns the selected value.
-   *
    * @returns {Array} The selected value.
    */
   get selected() {
@@ -192,15 +184,13 @@ class Select extends WJElement {
   }
   /**
    * Sets the trigger value.
-   *
-   * @param {string} value - The trigger value.
+   * @param {string} value The trigger value to set.
    */
   set trigger(value) {
     this.setAttribute("trigger", value);
   }
   /**
    * Returns the trigger value.
-   *
    * @returns {string} The trigger value.
    */
   get trigger() {
@@ -208,7 +198,6 @@ class Select extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -217,7 +206,6 @@ class Select extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
@@ -231,16 +219,12 @@ class Select extends WJElement {
     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.
+   * Draws the component for the select.
    * @returns {DocumentFragment}
    */
   draw() {
     let fragment = document.createDocumentFragment();
-    this.classList.add("wje-placement", "wje-" + this.placement || "wje-start");
+    this.classList.add("wje-placement", this.placement ? "wje-" + this.placement : "wje-start");
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("native-select", this.variant || "default");
@@ -285,20 +269,16 @@ class Select extends WJElement {
     popup.setAttribute("placement", "bottom-start");
     popup.setAttribute("manual", "");
     popup.setAttribute("size", "");
-    if (this.hasAttribute("disabled"))
-      popup.setAttribute("disabled", "");
+    if (this.hasAttribute("disabled")) popup.setAttribute("disabled", "");
     if (this.variant === "standard") {
-      if (this.hasAttribute("label"))
-        native.appendChild(label);
+      if (this.hasAttribute("label")) native.appendChild(label);
     } else {
       wrapper.appendChild(label);
     }
     inputWrapper.appendChild(slotStart);
     inputWrapper.appendChild(input);
-    if (this.hasAttribute("multiple"))
-      inputWrapper.appendChild(chips);
-    if (this.hasAttribute("clearable"))
-      inputWrapper.appendChild(clear);
+    if (this.hasAttribute("multiple")) inputWrapper.appendChild(chips);
+    if (this.hasAttribute("clearable")) inputWrapper.appendChild(clear);
     inputWrapper.appendChild(slotEnd);
     inputWrapper.appendChild(arrow);
     list.appendChild(slot);
@@ -314,8 +294,7 @@ class Select extends WJElement {
     wrapper.appendChild(inputWrapper);
     popup.appendChild(wrapper);
     popup.appendChild(optionsWrapper);
-    if (this.trigger === "click")
-      popup.setAttribute("manual", "");
+    if (this.trigger === "click") popup.setAttribute("manual", "");
     native.appendChild(popup);
     this.native = native;
     this.popup = popup;
@@ -332,9 +311,6 @@ class Select extends WJElement {
   }
   /**
    * 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() {
     this.input.addEventListener("focus", (e) => {
@@ -343,8 +319,7 @@ class Select extends WJElement {
     });
     this.input.addEventListener("blur", (e) => {
       this.native.classList.remove("focused");
-      if (!e.target.value)
-        this.labelElement.classList.remove("fade");
+      if (!e.target.value) this.labelElement.classList.remove("fade");
     });
     this.addEventListener("wje-option:change", this.optionChange);
     this.clear.addEventListener("wje-button:click", (e) => {
@@ -367,10 +342,8 @@ class Select extends WJElement {
         } else {
           let value = e.target.value.trim().toLowerCase();
           this.getAllOptions().forEach((option) => {
-            if (option.textContent.trim().toLowerCase().includes(value))
-              option.style.display = "block";
-            else
-              option.style.display = "none";
+            if (option.textContent.trim().toLowerCase().includes(value)) option.style.display = "block";
+            else option.style.display = "none";
           });
         }
       });
@@ -378,24 +351,20 @@ class Select extends WJElement {
   }
   /**
    * Returns all the options as HTML.
-   *
-   * @returns {NodeList} The options.
+   * @returns {NodeList} The options as HTML.
    */
   getAllOptions() {
     return this.querySelectorAll("wje-option");
   }
   /**
    * Returns the selected options as HTML.
-   *
-   * @returns {NodeList} The selected options.
+   * @returns {NodeList} The selected options as HTML.
    */
   getSelectedOptions() {
     return this.querySelectorAll("wje-option[selected]");
   }
   /**
    * Returns the selected options.
-   *
-   * @param {Element} option - The option to get.
    * @returns {Array} The selected options.
    */
   getSelected() {
@@ -411,9 +380,8 @@ class Select extends WJElement {
   }
   /**
    * Handles the selection change.
-   *
-   * @param {Element} option - The option that changed.
-   * @param {number} length - The length of the selected options.
+   * @param {Element} option The option that changed.
+   * @param {number} length The length of the selected options.
    */
   selectionChanged(option = null, length = 0) {
     var _a, _b;
@@ -426,8 +394,7 @@ class Select extends WJElement {
         if (this.counterEl instanceof HTMLElement || length > +this.maxOptions) {
           this.counter();
         } else {
-          if (option !== null)
-            this.chips.appendChild(this.getChip(option));
+          if (option !== null) this.chips.appendChild(this.getChip(option));
         }
       }
     } else {
@@ -447,9 +414,21 @@ class Select extends WJElement {
     }
   }
   /**
-   * Handles the selections.
-   *
-   * @param {Element} option - The option to select.
+   * Updates the selected options and their corresponding chips.
+   * @param {boolean} [silence] Determines whether to suppress the "wje-select:change" event.
+   * @returns {void}
+   * @description
+   * This method fetches the currently selected options and updates the `selectedOptions` array.
+   * It clears and rebuilds the chips representing the selected items in the UI.
+   * If the number of selected options reaches the maximum allowed (`maxOptions`), it stops updating the counter.
+   * Optionally, it dispatches a custom event when the selection changes unless `silence` is set to `true`.
+   * //@fires wje-select:change - Dispatched when the selection changes, unless `silence` is `true`.
+   * @example
+   * // Call the method and allow event dispatch
+   * selections();
+   * @example
+   * // Call the method without dispatching the event
+   * selections(true);
    */
   selections(silence = false) {
     let options = this.getSelectedOptions();
@@ -457,7 +436,9 @@ class Select extends WJElement {
     if (this.selectedOptions.length >= +this.maxOptions) {
       this.counterEl = null;
     }
-    this.chips.innerHTML = "";
+    if (this.chips) {
+      this.chips.innerHTML = "";
+    }
     if (this.selectedOptions.length > 0) {
       this.selectedOptions.forEach((option, index) => {
         this.selectionChanged(option, ++index);
@@ -469,7 +450,9 @@ class Select extends WJElement {
     event.dispatchCustomEvent(this, "wje-select:change");
   }
   /**
-   * Handles the counter.
+   * Manages the display of a counter element to indicate the number of items exceeding the maximum allowed options.
+   * - If the number of selected items equals the maximum allowed, the counter element is removed.
+   * - If the counter element doesn't exist and the number of items exceeds the maximum, it is created and updated.
    */
   counter() {
     if (this.counterEl && this.value.length === +this.maxOptions) {
@@ -486,8 +469,7 @@ class Select extends WJElement {
   }
   /**
    * Returns a chip element.
-   *
-   * @param {Element} option - The option to get the chip for.
+   * @param {Element} option The option to get the chip for.
    * @returns {Element} The chip element.
    */
   getChip(option) {
@@ -502,11 +484,10 @@ class Select extends WJElement {
   }
   /**
    * Generates an HTML option element based on the provided item and mapping.
-   * 
-   * @param {Object} item - The item to generate the option for.
-   * @param {Object} [map] - The mapping object that specifies the properties of the item to use for the option's value and text.
-   * @param {string} [map.value="value"] - The property of the item to use for the option's value.
-   * @param {string} [map.text="text"] - The property of the item to use for the option's text.
+   * @param {object} item The item to generate the option for.
+   * @param {object} [map] The mapping object that specifies the properties of the item to use for the option's value and text.
+   * @param {string} [map.value] The property of the item to use for the option's value.
+   * @param {string} [map.text] The property of the item to use for the option's text.
    * @returns {HTMLElement} The generated HTML option element.
    */
   htmlOption(item, map = { value: "value", text: "text" }) {
@@ -523,10 +504,9 @@ class Select extends WJElement {
   }
   /**
    * Adds an option to the select element.
-   * 
-   * @param {any} optionData - The data for the option to be added.
-   * @param {boolean} [silent=false] - Whether to suppress any events triggered by the addition of the option.
-   * @param {object} [map={ value: "value", text: "text" }] - The mapping object specifying the properties of the option data to be used for the value and text of the option.
+   * @param {any} optionData The data for the option to be added.
+   * @param {boolean} [silent] Whether to suppress any events triggered by the addition of the option.
+   * @param {object} [map] The mapping object specifying the properties of the option data to be used for the value and text of the option.
    */
   addOption(optionData, silent = false, map = { value: "value", text: "text" }) {
     if (!optionData) return;
@@ -540,10 +520,9 @@ class Select extends WJElement {
   }
   /**
    * Adds options to the select element.
-   * 
-   * @param {Array|Object} optionsData - The options data to be added. Can be an array of objects or a single object.
-   * @param {boolean} [silent=false] - Indicates whether to trigger events when adding options. Default is false.
-   * @param {Object} [map] - The mapping object that specifies the properties of the options data object. Default is { value: "value", text: "text" }.
+   * @param {Array | object} optionsData The options data to be added. Can be an array of objects or a single object.
+   * @param {boolean} [silent] Indicates whether to trigger events when adding options. Default is false.
+   * @param {object} [map] The mapping object that specifies the properties of the options data object. Default is { value: "value", text: "text" }.
    */
   addOptions(optionsData, silent = false, map = { value: "value", text: "text" }) {
     if (!Array.isArray(optionsData)) {
@@ -561,9 +540,8 @@ class Select extends WJElement {
   }
   /**
    * Selects an option with the specified value.
-   * 
-   * @param {string} value - The value of the option to be selected.
-   * @param {boolean} [silent=false] - Whether to suppress firing events.
+   * @param {string} value The value of the option to be selected.
+   * @param {boolean} [silent] Whether to suppress firing events.
    */
   selectOption(value, silent = false) {
     if (!value) return;
@@ -571,13 +549,12 @@ class Select extends WJElement {
     if (option) {
       option.selected = true;
     }
-    this.selections(silent);
+    if (this.drawingStatus > this.drawingStatuses.START) this.selections(silent);
   }
   /**
    * Selects one or multiple options in the select element.
-   *
-   * @param {Array|any} values - The value(s) of the option(s) to be selected.
-   * @param {boolean} [silent=false] - Whether to trigger the change event or not.
+   * @param {Array|any} values The value(s) of the option(s) to be selected.
+   * @param {boolean} [silent] Whether to trigger the change event or not.
    */
   selectOptions(values, silent = false) {
     if (!Array.isArray(values)) {
@@ -591,7 +568,7 @@ class Select extends WJElement {
   /**
    * @summary Callback function that is called when the custom element is associated with a form.
    * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-   * @param {HTMLFormElement} form - The form the custom element is associated with.
+   * @param {HTMLFormElement} form The form the custom element is associated with.
    */
   formAssociatedCallback(form) {
     form == null ? void 0 : form.addEventListener("submit", () => {
@@ -601,8 +578,7 @@ class Select extends WJElement {
    * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
    * This method is responsible for resetting the value of the custom input element to its default value.
    * It also resets the form value and validity state in the form internals.
-   *
-   * @method
+   * @function
    */
   formResetCallback() {
     this.value = this.defaultValue;
@@ -613,9 +589,8 @@ class Select extends WJElement {
    * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
    * This method is responsible for restoring the value of the custom input element to its saved state.
    * It also restores the form value and validity state in the form internals to their saved states.
-   *
-   * @param {Object} state - The saved state of the custom input element.
-   * @method
+   * @param {object} state The saved state of the custom input element.
+   * @function
    */
   formStateRestoreCallback(state) {
     this.value = state.value;
@@ -625,9 +600,8 @@ class Select extends WJElement {
   /**
    * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
    * This method is responsible for saving the value of the custom input element.
-   *
-   * @returns {Object} The saved state of the custom input element.
-   * @method
+   * @returns {object} The saved state of the custom input element.
+   * @function
    */
   formStateSaveCallback() {
     return {
@@ -637,9 +611,8 @@ class Select extends WJElement {
   /**
    * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
    * This method is not implemented yet.
-   *
-   * @param {boolean} disabled - The new disabled state of the custom input element.
-   * @method
+   * @param {boolean} disabled The new disabled state of the custom input element.
+   * @function
    */
   formDisabledCallback(disabled) {
     console.warn("formDisabledCallback not implemented yet");