wj-elements 0.1.184 → 0.1.186

package/dist/wje-select.js

@@ -9,8 +9,9 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn;
-import WJElement from "./wje-element.js";
+var _addedOptions, _htmlOptions, _Select_instances, htmlSelectedItem_fn, getSelected_fn, getSelectedOptions_fn, _applySearchFilter;
+import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
+import { event } from "./event.js";
 import Button from "./wje-button.js";
 import "./wje-popup.js";
 import { I as Icon } from "./icon-DY5AZ6xM.js";
@@ -20,20 +21,9 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-Di4nHYij.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\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    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\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            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        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\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    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\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);\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: var(--wje-select-options-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    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\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    gap: var(--wje-spacing-3x-small);\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\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}";
-class Select extends WJElement {
-  /**
-   * Constructor for the Select class.
-   * @class
-   * @description Initializes the Select component.
-   * This constructor sets up the initial state of the component, including selected items, counter element, and internal element API.
-   * It also tracks whether the select element was previously opened.
-   * @class
-   * @augments {WJElement}
-   * @memberof Select
-   */
+import { P as Popup } from "./popup.element-CVbbnTWI.js";
+const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\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    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\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            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        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\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    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\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);\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: var(--wje-select-options-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    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\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    gap: var(--wje-spacing-3x-small);\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\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background: black;\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: white;\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}";
+class Select extends FormAssociatedElement {
   constructor() {
     super();
     __privateAdd(this, _Select_instances);
@@ -51,7 +41,6 @@ class Select extends WJElement {
      * @property {Function} 'wje-chip' Represents the Chip component class.
      * @property {Function} 'wje-input' Represents the Input component class.
      * @property {Function} 'wje-option' Represents the Option component class.
-     * @property {Function} 'wje-options' Represents the Options component class.
      * @property {Function} 'wje-checkbox' Represents the Checkbox component class.
      */
     __publicField(this, "dependencies", {
@@ -88,7 +77,7 @@ class Select extends WJElement {
         this.processClickedOption(e.target, true);
       }
       this.selections();
-      this.validateSelect();
+      this.validate(this.selectedOptions);
       this.pristine = false;
       this.propagateValidation();
     });
@@ -129,9 +118,22 @@ class Select extends WJElement {
       this.processClickedOption(e.target.option, true);
       this.selections();
     });
-    this._selected = [];
+    __privateAdd(this, _applySearchFilter, (e) => {
+      const optionsElement = this.querySelector("wje-options");
+      if (optionsElement && optionsElement.hasAttribute("lazy")) {
+        optionsElement.setAttribute("search", e.target.value);
+      } 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";
+          }
+        });
+      }
+    });
     this.counterEl = null;
-    this.internals = this.attachInternals();
     this._wasOppened = false;
     this.native = null;
     this.popup = null;
@@ -143,19 +145,32 @@ class Select extends WJElement {
     this.chips = null;
     this.clear = null;
     this.list = null;
-    this.selectedOptions = [];
+    this._value = [];
+    this._selected = [];
+    this._selectedOptions = [];
   }
   /**
-   * Setter for the value attribute.
-   * @param {string} value The value to set.
+   * Sets the value of the form element. Handles multiple values when
+   * the element has the 'multiple' attribute by storing them in a FormData object.
+   * @param {string | Array} value The value to be set. Can be a single value or an array of values
+   * when 'multiple' attribute is present.
    */
   set value(value) {
-    if (this.hasAttribute("multiple")) {
+    if (value) {
+      let data = value;
+      if (!Array.isArray(data)) {
+        data = data.split(" ");
+      }
       const formData = new FormData();
-      value.forEach((v) => formData.append(this.name, v));
-      this.internals.setFormValue(formData);
-    } else {
+      data.forEach((v) => {
+        formData.append(this.name, v);
+      });
+      value = formData;
+      this._value = data;
+      this.selected = data;
       this.internals.setFormValue(value);
+    } else {
+      this._value = [];
     }
   }
   /**
@@ -163,25 +178,19 @@ class Select extends WJElement {
    * @returns {object} The value of the attribute.
    */
   get value() {
-    return this.selected;
+    return this._value;
   }
-  set required(value) {
+  /**
+   * Sets the `validate-on-change` attribute on the element. When the attribute is present, it typically indicates that validation should occur when the value of the input changes.
+   * @param {boolean} value A boolean indicating whether to enable or disable the `validate-on-change` attribute.
+   */
+  set validateOnChange(value) {
     if (value) {
-      this.setAttribute("required", "");
+      this.setAttribute("validate-on-change", "");
     } else {
-      this.removeAttribute("required");
+      this.removeAttribute("validate-on-change");
     }
   }
-  get required() {
-    return this.hasAttribute("required");
-  }
-  /**
-   * Getter for the customErrorDisplay attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
-  get customErrorDisplay() {
-    return this.hasAttribute("custom-error-display");
-  }
   /**
    * Getter for the validateOnChange attribute.
    * @returns {boolean} Whether the attribute is present.
@@ -189,30 +198,9 @@ class Select extends WJElement {
   get validateOnChange() {
     return this.hasAttribute("validate-on-change");
   }
-  /**
-   * Retrieves the value of the 'invalid' attribute.
-   * This method checks if the 'invalid' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'invalid' attribute is present, otherwise false.
-   */
-  get invalid() {
-    return this.hasAttribute("invalid");
-  }
-  /**
-   * Sets the 'invalid' property of the element.
-   * When set to a truthy value, the 'invalid' attribute is added to the element.
-   * When set to a falsy value, the 'invalid' attribute is removed from the element.
-   * @param {boolean} value A boolean indicating whether the element is invalid.
-   */
-  set invalid(value) {
-    if (value) {
-      this.setAttribute("invalid", "");
-    } else {
-      this.removeAttribute("invalid");
-    }
-  }
   /**
    * Sets the maximum number of options allowed.
-   * @param {string | number | null} value The value to set as the maximum number of options.
+   * @param { number | object} value The value to set as the maximum number of options.
    * If null, the 'max-options' attribute will be removed.
    */
   set maxOptions(value) {
@@ -232,65 +220,52 @@ class Select extends WJElement {
     return +this.getAttribute("max-options") || 1;
   }
   /**
-   * Getter for the form attribute.
-   * @returns {HTMLFormElement} The form the input is associated with.
-   */
-  get form() {
-    return this.internals.form;
-  }
-  /**
-   * Getter for the name attribute.
-   * @returns {string} The name of the input.
-   */
-  get name() {
-    return this.getAttribute("name");
-  }
-  /**
-   * Getter for the type attribute.
-   * @returns {string} The type of the input.
+   * @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.
    */
-  get type() {
-    return this.localName;
+  set defaultValue(value) {
+    this.setAttribute("value", value);
   }
   /**
-   * Getter for the validity attribute.
-   * @returns {ValidityState} The validity state of the input.
+   * @summary Getter for the defaultValue attribute.
+   * This method retrieves the 'value' attribute of the custom input element.
+   * The 'value' attribute represents the default value of the input element.
+   * If the 'value' attribute is not set, it returns an empty string.
+   * @returns {string} The default value of the input element.
    */
-  get validity() {
-    return this.internals.validity;
+  get defaultValue() {
+    return this.getAttribute("value") ?? "";
   }
   /**
-   * Getter for the validationMessage attribute.
-   * @returns {string} The validation message of the input.
+   * Sets the trigger value.
+   * @param {string} value The trigger value to set.
    */
-  get validationMessage() {
-    return this.internals.validationMessage;
+  set trigger(value) {
+    this.setAttribute("trigger", value);
   }
   /**
-   * Getter for the willValidate attribute.
-   * @returns {boolean} Whether the input will be validated.
+   * Returns the trigger value.
+   * @returns {string} The trigger value.
    */
-  get willValidate() {
-    return this.internals.willValidate;
+  get trigger() {
+    return this.getAttribute("trigger") || "click";
   }
   /**
-   * @summary Getter for the defaultValue attribute.
-   * This method retrieves the 'value' attribute of the custom input element.
-   * The 'value' attribute represents the default value of the input element.
-   * If the 'value' attribute is not set, it returns an empty string.
-   * @returns {string} The default value of the input element.
+   * Sets the offset attribute for the element.
+   * @param {string} value The value to assign to the offset attribute.
    */
-  get defaultValue() {
-    return this.getAttribute("value") ?? "";
+  set offset(value) {
+    this.setAttribute("offset", value);
   }
   /**
-   * @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.
+   * Gets the value of the offset attribute of the current element.
+   * If the offset attribute is not present, returns a default value of '0'.
+   * @returns {string} The value of the offset attribute or the default value '0'.
    */
-  set defaultValue(value) {
-    this.setAttribute("value", value);
+  get offset() {
+    return this.getAttribute("offset") || "5";
   }
   /**
    * Sets the label value.
@@ -304,7 +279,38 @@ class Select extends WJElement {
    * @returns {Array} The selected value.
    */
   get selected() {
-    return this.getSelected();
+    return this._selected;
+  }
+  /**
+   * Sets the selected options for the object.
+   * @param {Array|object} value The new value for the selected options. It can be an array or object containing the selected options.
+   */
+  set selectedOptions(value) {
+    this._selectedOptions = value;
+  }
+  /**
+   * Retrieves the selected options.
+   * @returns {Array} An array containing the currently selected options. If no options are selected, an empty array is returned.
+   */
+  get selectedOptions() {
+    return this._selectedOptions || [];
+  }
+  set lazy(value) {
+    if (value) {
+      this.setAttribute("lazy", "");
+    } else {
+      this.removeAttribute("lazy");
+    }
+  }
+  get lazy() {
+    return this.hasAttribute("lazy");
+  }
+  /**
+   * Getter for the customErrorDisplay attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
   }
   /**
    * Retrieves the complete list of options available for the component.
@@ -324,26 +330,6 @@ class Select extends WJElement {
       ).reverse();
     }
   }
-  /**
-   * Sets 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() {
-    return this.getAttribute("trigger") || "click";
-  }
-  set offset(value) {
-    this.setAttribute("offset", value);
-  }
-  get offset() {
-    return this.getAttribute("offset") || "0";
-  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -389,12 +375,22 @@ class Select extends WJElement {
     slotStart.classList.add("slot-start");
     let input = document.createElement("input");
     input.setAttribute("type", "text");
-    input.setAttribute("part", "input");
-    input.setAttribute("autocomplete", "off");
-    input.setAttribute("readonly", "");
-    input.setAttribute("placeholder", this.placeholder || "");
-    if (this.required)
+    input.value = this.value.join(" ").trim();
+    input.classList.add("input-hidden");
+    let display = document.createElement("input");
+    display.setAttribute("type", "text");
+    display.setAttribute("part", "input");
+    display.setAttribute("autocomplete", "off");
+    display.setAttribute("readonly", "");
+    display.setAttribute("placeholder", this.placeholder || "");
+    if (this.required) {
       input.setAttribute("required", "");
+      display.setAttribute("required", "");
+    }
+    if (this.disabled) {
+      input.setAttribute("disabled", "");
+      display.setAttribute("disabled", "");
+    }
     let slotEnd = document.createElement("div");
     slotEnd.classList.add("slot-end");
     let arrow = document.createElement("wje-icon");
@@ -422,17 +418,20 @@ class Select extends WJElement {
     errorSlot.setAttribute("name", "error");
     let popup = document.createElement("wje-popup");
     popup.setAttribute("placement", "bottom-start");
-    popup.setAttribute("manual", "");
     popup.setAttribute("size", "");
     popup.setAttribute("part", "popup");
     popup.setAttribute("offset", this.offset);
-    if (this.hasAttribute("disabled")) popup.setAttribute("disabled", "");
+    if (this.lazy || this.querySelector("wje-options")) {
+      popup.setAttribute("loader", "");
+    }
+    if (this.disabled) popup.setAttribute("disabled", "");
     if (this.variant === "standard") {
       if (this.hasAttribute("label")) native.appendChild(label);
     } else {
       wrapper.appendChild(label);
     }
     inputWrapper.append(slotStart);
+    inputWrapper.append(display);
     inputWrapper.append(input);
     clear.append(clearIcon);
     if (this.hasAttribute("multiple")) inputWrapper.append(chips);
@@ -450,18 +449,6 @@ class Select extends WJElement {
       optionsWrapper.appendChild(find);
       this.findEl = find;
     }
-    if (this.hasAttribute("lazy")) {
-      event.addListener(popup, "wje-popup:show", null, (e) => {
-        if (this._wasOppened) return;
-        this._wasOppened = true;
-        const optionsElement = this.querySelector("wje-options");
-        optionsElement.setAttribute("lazy", "");
-        optionsElement.setAttribute("attached", "");
-      });
-    } else {
-      const optionsElement = this.querySelector("wje-options");
-      optionsElement == null ? void 0 : optionsElement.setAttribute("attached", "");
-    }
     optionsWrapper.append(list);
     wrapper.append(inputWrapper);
     popup.append(wrapper);
@@ -470,17 +457,18 @@ class Select extends WJElement {
     this.append(error);
     native.append(popup);
     native.append(errorSlot);
+    fragment.appendChild(native);
     this.native = native;
     this.popup = popup;
     this.labelElement = label;
     this.slotStart = slotStart;
     this.slotEnd = slotEnd;
     this.input = input;
+    this.display = display;
     this.optionsWrapper = optionsWrapper;
     this.chips = chips;
     this.clear = clear;
     this.list = list;
-    fragment.appendChild(native);
     return fragment;
   }
   /**
@@ -491,13 +479,22 @@ class Select extends WJElement {
    */
   afterDraw() {
     var _a, _b;
-    this.validateSelect();
+    this.validate(this.selectedOptions);
     if (this.hasAttribute("invalid")) {
       this.showInvalidMessage();
     }
     (_a = this.getAllOptions()) == null ? void 0 : _a.forEach((option) => {
       this.optionCheckSlot(option);
     });
+    if (this.lazy) {
+      event.addListener(this.popup, "wje-popup:show", null, (e) => {
+        if (this._wasOppened) return;
+        this._wasOppened = true;
+        const optionsElement = this.querySelector("wje-options");
+        optionsElement.setAttribute("lazy", "");
+        optionsElement.setAttribute("attached", "");
+      });
+    }
     __privateSet(this, _htmlOptions, Array.from(this.querySelectorAll(":scope > wje-option")).map((option) => {
       return {
         value: option.value,
@@ -529,6 +526,7 @@ class Select extends WJElement {
     (_b = this.clear) == null ? void 0 : _b.addEventListener("wje-button:click", (e) => {
       e.preventDefault();
       e.stopPropagation();
+      this.selected = [];
       this.selectedOptions = [];
       this.getAllOptions().forEach((option) => {
         option.selected = false;
@@ -536,7 +534,9 @@ class Select extends WJElement {
       this.selections();
       e.stopPropagation();
     });
-    this.selectedOptions = this.getSelectedOptions();
+    this.selectOptions(this.value);
+    this.selected = __privateMethod(this, _Select_instances, getSelected_fn).call(this);
+    this.selectedOptions = __privateMethod(this, _Select_instances, getSelectedOptions_fn).call(this);
     this.selections(true);
     this.list.addEventListener("wje-options:load", (e) => {
       this.selectedOptions.forEach((option) => {
@@ -547,20 +547,11 @@ class Select extends WJElement {
         });
       });
       this.list.scrollTo(0, 0);
+      event.dispatchCustomEvent(this.popup, "wje-popup:content-ready");
     });
     if (this.hasAttribute("find") && this.findEl instanceof HTMLElement) {
-      event.addListener(this.findEl, "keyup", "", (e) => {
-        const optionsElement = this.querySelector("wje-options");
-        if (optionsElement && optionsElement.hasAttribute("lazy")) {
-          optionsElement.setAttribute("search", e.target.value);
-        } 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";
-          });
-        }
-      });
+      event.addListener(this.findEl, "keyup", "", __privateGet(this, _applySearchFilter));
+      event.addListener(this.findEl, "wje-input:clear", "", __privateGet(this, _applySearchFilter));
     }
   }
   /**
@@ -570,38 +561,19 @@ class Select extends WJElement {
   getAllOptions() {
     return this.querySelectorAll("wje-option");
   }
-  /**
-   * Returns the selected options as HTML.
-   * @returns {NodeList} The selected options as HTML.
-   */
-  getSelectedOptions() {
-    return Array.from(this.querySelectorAll("wje-option[selected]"));
-  }
-  /**
-   * Returns the selected options.
-   * @returns {Array} The selected options.
-   */
-  getSelected() {
-    return this.selectedOptions.map((option) => {
-      return {
-        value: option.value,
-        text: __privateMethod(this, _Select_instances, htmlSelectedItem_fn).call(this, option.value)
-        // option.textContent.trim(),
-      };
-    });
-  }
   /**
    * Handles the selection change.
    * @param {Element[]} options The option that changed.
    * @param {number} length The length of the selected options.
    */
   selectionChanged(options = null, length = 0) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
+    this.selected = __privateMethod(this, _Select_instances, getSelected_fn).call(this);
     if (this.hasAttribute("multiple")) {
       this.value = this.selectedOptions.map((el) => el.value).reverse();
+      this.input.value = this.selected.map((a) => a.value).join(" ").trim();
       if (this.placeholder && length === 0) {
         this.chips.innerHTML = this.placeholder;
-        this.input.value = "";
       } else {
         if (options !== null) Array.from(options).slice(0, +this.maxOptions).forEach((option) => this.chips.appendChild(this.getChip(option)));
         if (this.counterEl instanceof HTMLElement || !this.maxOptions || length > +this.maxOptions) {
@@ -609,10 +581,10 @@ class Select extends WJElement {
         }
       }
     } else {
-      let option = options == null ? void 0 : options.at(0);
-      let value = (option && __privateMethod(this, _Select_instances, htmlSelectedItem_fn).call(this, option.value)) ?? "";
+      const option = options == null ? void 0 : options.at(0);
       this.value = (_b = (_a = this.selectedOptions) == null ? void 0 : _a.map((el) => el.value)) == null ? void 0 : _b.at(0);
-      this.input.value = value;
+      this.input.value = ((_c = this.selected[0]) == null ? void 0 : _c.value) || "";
+      this.display.value = ((_e = (_d = this.selectedOptions[0]) == null ? void 0 : _d.textContent) == null ? void 0 : _e.trim()) || "";
       if (option && option instanceof HTMLElement) {
         this.slotStart.innerHTML = "";
         let optionSlotStart = option == null ? void 0 : option.querySelector("wje-option > [slot=start]");
@@ -654,7 +626,7 @@ class Select extends WJElement {
     if (this.selectedOptions.length > 0) {
       this.selectionChanged(this.selectedOptions, this.selectedOptions.length);
     } else {
-      this.selectionChanged();
+      this.selectionChanged(this.selectedOptions);
     }
     if (silence) return;
     event.dispatchCustomEvent(this, "wje-select:change");
@@ -715,6 +687,14 @@ class Select extends WJElement {
     __privateGet(this, _addedOptions).push({ [map.value]: item[map.value], [map.text]: item[map.text] });
     return option;
   }
+  /**
+   * Returns the provided item.
+   * @param {any} item The item to be returned.
+   * @returns {any} The same item that was passed as input.
+   */
+  htmlSelectedItem(item) {
+    return item;
+  }
   /**
    * Adds an option to the select element.
    * @param {any} optionData The data for the option to be added.
@@ -741,11 +721,6 @@ class Select extends WJElement {
     if (!Array.isArray(optionsData)) {
       this.addOption(optionsData, silent, map);
     } else {
-      const optionsElement = this.querySelector("wje-options");
-      if (optionsElement) {
-        optionsElement.addOptions(optionsData, silent, map);
-        return;
-      }
       optionsData.forEach((item) => {
         this.addOption(item, silent, map);
       });
@@ -778,14 +753,6 @@ class Select extends WJElement {
       });
     }
   }
-  /**
-   * Returns the provided item.
-   * @param {any} item The item to be returned.
-   * @returns {any} The same item that was passed as input.
-   */
-  htmlSelectedItem(item) {
-    return item;
-  }
   /**
    * Clones and appends an icon from a template with slot "check" to the given option element.
    * @param {HTMLElement} option The target option element where the "check" icon will be added.
@@ -801,106 +768,6 @@ class Select extends WJElement {
     let iconClone = icon.cloneNode(true);
     option.append(iconClone);
   }
-  /**
-   * Validates the selection of options in the select element.
-   * Checks if the element is required and no option is selected,
-   * in which case it sets a validation error with a custom message.
-   * If the element passes validation, it clears any existing validation errors.
-   *
-   * @return {void} Does not return a value.
-   */
-  validateSelect() {
-    if (this.required && this.selectedOptions.length === 0) {
-      const msg = this.getAttribute("message-required") || "Zvoľte možnosť";
-      this.internals.setValidity({ valueMissing: true }, msg);
-    } else {
-      this.internals.setValidity({});
-    }
-  }
-  /**
-   * Checks and updates the validation state of the component based on its current properties.
-   * If the component is invalid and a custom error display is enabled, it dispatches an 'invalid' event.
-   * @returns {void} This method does not return a value.
-   */
-  propagateValidation() {
-    this.invalid = !this.pristine && !this.validity.valid;
-    if (this.invalid) {
-      event.dispatchCustomEvent(this, "wje-select:invalid");
-    }
-  }
-  showInvalidMessage() {
-    {
-      const slot = this.querySelector("[slot='error']");
-      let errorMessageEL = slot.querySelector("[error-message]");
-      if (!errorMessageEL) {
-        const error = document.createElement("div");
-        error.setAttribute("error-message", "");
-        slot.append(error);
-        errorMessageEL = error;
-      }
-      errorMessageEL.textContent = this.internals.validationMessage;
-    }
-    console.log(`Invalid input: ${this.internals.validationMessage}`);
-  }
-  /**
-   * Lifecycle callback invoked when the custom element becomes associated with a form element.
-   * @param {HTMLFormElement} form The form element the custom element is associated with.
-   * @returns {void}
-   */
-  formAssociatedCallback(form) {
-    if (form) {
-      form.addEventListener("submit", () => {
-        this.validateSelect();
-        this.propagateValidation();
-      });
-    }
-  }
-  /**
-   * 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.
-   * @function
-   */
-  formResetCallback() {
-    this.value = this.defaultValue;
-    this.internals.setFormValue(this.defaultValue);
-    this.internals.setValidity({});
-  }
-  /**
-   * 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.
-   * @function
-   */
-  formStateRestoreCallback(state) {
-    this.value = state.value;
-    this.internals.setFormValue(state.value);
-    this.internals.setValidity({});
-  }
-  /**
-   * 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.
-   * @function
-   */
-  formStateSaveCallback() {
-    return {
-      value: this.value
-    };
-  }
-  /**
-   * 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.
-   * @function
-   */
-  formDisabledCallback(disabled) {
-    var _a;
-    console.warn("formDisabledCallback not implemented yet");
-    (_a = this.native) == null ? void 0 : _a.classList.toggle("disabled", disabled);
-    this.toggleAttribute("disabled", disabled);
-  }
   /**
    * Checks if all elements in the `elements` array are present in the `options` array based on their `option` property.
    * @param {Array} elements The array of elements to check. Each element should have an `option` property.
@@ -932,10 +799,26 @@ htmlSelectedItem_fn = function(item) {
   return this.htmlSelectedItem(value);
 };
 /**
- * Whether the input is associated with a form.
- * @type {boolean}
+ * Returns the selected options.
+ * @returns {Array} The selected options.
  */
-__publicField(Select, "formAssociated", true);
+getSelected_fn = function() {
+  return this.selectedOptions.map((option) => {
+    return {
+      value: option.value,
+      text: __privateMethod(this, _Select_instances, htmlSelectedItem_fn).call(this, option.value)
+      // option.textContent.trim(),
+    };
+  });
+};
+/**
+ * Returns the selected options as HTML.
+ * @returns {NodeList} The selected options as HTML.
+ */
+getSelectedOptions_fn = function() {
+  return Array.from(this.querySelectorAll("wje-option[selected]"));
+};
+_applySearchFilter = new WeakMap();
 Select.define("wje-select", Select);
 export {
   Select as default