wj-elements 0.1.105 → 0.1.108

package/dist/{infinite-scroll.element-7dR-X4sd.js → infinite-scroll.element-BJZCBKDO.js}

@@ -238,7 +238,7 @@ class InfiniteScroll extends WJElement {
         } else {
           response = await this.getPages(page);
         }
-        this.totalPages = response.totalPages;
+        this.totalPages = response == null ? void 0 : response.totalPages;
         this.currentPage = page;
         this.placementObj = this;
         if (this.hasAttribute("placement"))
@@ -252,7 +252,7 @@ class InfiniteScroll extends WJElement {
         this.endingEl.classList.add("show");
       }
     } catch (error) {
-      console.log(error.message);
+      console.log(error);
     } finally {
       this.hideLoader();
     }

package/dist/wje-element.js

@@ -619,11 +619,12 @@ const _WJElement = class _WJElement extends HTMLElement {
   setUpAccessors() {
     let attrs = this.getAttributeNames();
     attrs.forEach((name) => {
+      var _a, _b;
       const sanitizedName = this.sanitizeName(name);
       if (this[sanitizedName] == void 0) {
         Object.defineProperty(this, sanitizedName, {
-          set: (value) => this.setAttribute(name, value),
-          get: (_) => {
+          set: Object.getOwnPropertyDescriptors(this.__proto__).hasOwnProperty(sanitizedName) ? (_a = Object.getOwnPropertyDescriptors(this.__proto__)) == null ? void 0 : _a[sanitizedName].set : (value) => this.setAttribute(name, value),
+          get: Object.getOwnPropertyDescriptors(this.__proto__).hasOwnProperty(sanitizedName) ? (_b = Object.getOwnPropertyDescriptors(this.__proto__)) == null ? void 0 : _b[sanitizedName].get : (_) => {
             return this.getAttribute(name);
           }
         });

package/dist/wje-file-upload.js

@@ -84,7 +84,10 @@ function isValidFileType(file, acceptedFileTypes) {
   }
   return false;
 }
-function upload(url, chunkSize = 1024 * 1024) {
+function upload(url, chunkSize = 1024 * 1024, wholeFile = false) {
+  if (wholeFile) {
+    return (file, preview) => uploadWholeFile(url, file, preview);
+  }
   return (file, preview) => uploadFileInChunks(url, chunkSize, file, preview);
 }
 async function uploadFileInChunks(url, chunkSize = 1024 * 1024, file, preview) {
@@ -134,6 +137,20 @@ async function uploadFileInChunks(url, chunkSize = 1024 * 1024, file, preview) {
   console.log("File upload complete!");
   return partResponses.at(-1).json();
 }
+function uploadWholeFile(url, file, preview) {
+  const formData = new FormData();
+  formData.append("file", file);
+  return fetch(url, {
+    method: "POST",
+    body: formData
+  }).then((response) => response.json()).then((data) => {
+    console.log(data);
+    preview.setAttribute("uploaded", file.size);
+    return data;
+  }).catch((error) => {
+    console.error("Error:", error);
+  });
+}
 const styles = '/*\r\n[ WJ File Upload ]\r\n*/\r\n\r\n:host {\r\n    width: 100%;\r\n}\r\n\r\n.native-file-upload {\r\n    width: 100%;\r\n}\r\n\r\n.file-label {\r\n    background: var(--wje-color-contrast-0);\r\n    border: 1px dashed var(--wje-border-color);\r\n    border-radius: var(--wje-border-radius-medium);\r\n    align-items: center;\r\n    justify-content: center;\r\n    display: flex;\r\n    padding: 1rem;\r\n    margin-bottom: .5rem;\r\n    flex-direction: column;\r\n}\r\n\r\n.file-preview {\r\n    display: grid;\r\n    grid-template-columns: auto 1fr 1fr;\r\n    grid-template-rows: auto auto auto;\r\n    gap: 0 0;\r\n    grid-template-areas:\r\n    "image name name"\r\n    "image size size"\r\n    "progress progress progress";\r\n}\r\n\r\n.file-image {\r\n    grid-area: image;\r\n    align-items: center;\r\n    display: flex;\r\n}\r\n\r\n.file-name {\r\n    grid-area: name;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n.file-size {\r\n    grid-area: size;\r\n    display: flex;\r\n}\r\n\r\n.file-progress { grid-area: progress; }\r\n\r\nwje-icon {\r\n    margin-right: .25rem;\r\n}\r\n\r\nwje-img {\r\n    margin-right: .25rem;\r\n}\r\n\r\n.file-info > span {\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\nwje-slider {\r\n    flex-basis: 100%;\r\n    margin-top: .5rem;\r\n}\r\n\r\n::part(slider) {\r\n    &::-webkit-slider-thumb {\r\n        visibility: hidden;\r\n    }\r\n\r\n    &::-moz-range-thumb {\r\n        visibility: hidden;\r\n    }\r\n\r\n    &::-ms-thumb {\r\n        visibility: hidden;\r\n    }\r\n}\r\n\r\nwje-img {\r\n    width: 50px;\r\n    height: 50px;\r\n    display: flex;\r\n    align-items: center;\r\n    padding: .25rem;\r\n    border: 1px solid var(--wje-border-color);\r\n    border-radius: var(--wje-border-radius-medium);\r\n}';
 class FileUpload extends WJElement {
   /**
@@ -262,7 +279,7 @@ class FileUpload extends WJElement {
     this.isShadowRoot = "open";
   }
   beforeDraw() {
-    this.uploadFunction = upload(this.uploadUrl, this.chunkSize);
+    this.uploadFunction = upload(this.uploadUrl, this.chunkSize, true);
   }
   /**
    * Method to draw the component.

package/dist/wje-icon-picker.js

@@ -9,7 +9,7 @@ import "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import Tooltip from "./wje-tooltip.js";
 import "./wje-popup.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-BJZCBKDO.js";
 import { P as Popup } from "./popup.element-Dna4OwCH.js";
 const styles = "/*\r\n[ Wj Icon Picker ]\r\n*/\r\n\r\n:host {\r\n  --wje-icon-picker-radius: var(--wje-border-radius-small);\r\n  --wje-icon-picker-icon-size: 1.5rem;\r\n  --wje-icon-picker-border-width: 1px;\r\n  --wje-icon-picker-border-style: solid;\r\n  --wje-icon-picker-border-color: var(--wje-border-color);\r\n  --wje-icon-picker-padding: .25rem;\r\n  padding: 0 1rem;\r\n}\r\n\r\n.anchor {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n  padding: var(--wje-icon-picker-padding);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  box-sizing: border-box;\r\n  border-radius: var(--wje-icon-picker-radius);\r\n}\r\n\r\n.picker {\r\n  width: 320px;\r\n  height: 271px;\r\n  box-shadow: 0 0 5px rgba(0,0,0,.05), 0 5px 20px rgba(0,0,0,.1);\r\n  border-radius: var(--wje-icon-picker-radius);\r\n  border-width: var(--wje-icon-picker-border-width);\r\n  border-style: var(--wje-icon-picker-border-style);\r\n  border-color: var(--wje-icon-picker-border-color);\r\n  overflow: auto;\r\n  padding: 1rem;\r\n  background: var(--wje-background);\r\n}\r\n\r\n.icon-items {\r\n  --icon-min-width: 2rem;\r\n  display: grid;\r\n  grid-gap: .5rem;\r\n  grid-template-columns: repeat(auto-fit,minmax(var(--icon-min-width),1fr));\r\n}\r\n\r\n.icon-item {\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n  color: inherit;\r\n  padding: .25rem;\r\n  min-height: var(--wje-icon-picker-icon-size);\r\n  min-width: var(--wje-icon-picker-icon-size);\r\n  text-decoration: none;\r\n\r\n  &:hover {\r\n    border-radius: .25rem;\r\n    background: var(--wje-border-color);\r\n  }\r\n}\r\n\r\n.wje-size {\r\n  --wje-icon-size: 24px !important;\r\n}\r\n\r\nicon-item svg {\r\n  width: var(--wje-icon-picker-icon-size);\r\n  height: var(--wje-icon-picker-icon-size);\r\n}\r\n\r\nwje-input {\r\n  --wje-input-border-radius: 4px;\r\n  --wje-input-margin-bottom: 0;\r\n}\r\n\r\nwje-infinite-scroll {\r\n  margin-top: 1rem;\r\n}\r\n\r\nwje-select {\r\n  --wje-select-border-width: 0 0 1px 0 !important;\r\n  --wje-select-border-radius: 0 !important;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.anchor wje-icon {\r\n  --wje-icon-size: 100% !important;\r\n}";
 class IconPicker extends WJElement {

package/dist/wje-infinite-scroll.js

@@ -1,4 +1,4 @@
-import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-BJZCBKDO.js";
 InfiniteScroll.define("wje-infinite-scroll", InfiniteScroll);
 export {
   InfiniteScroll as default

package/dist/wje-master.js

@@ -99,7 +99,7 @@ import { default as default84 } from "./wje-tooltip.js";
 import { default as default85 } from "./wje-visually-hidden.js";
 import { default as default86 } from "./wje-sliding-container.js";
 import { L } from "./list.element-BkOOqBtW.js";
-import { I } from "./infinite-scroll.element-7dR-X4sd.js";
+import { I } from "./infinite-scroll.element-BJZCBKDO.js";
 import { P } from "./popup.element-Dna4OwCH.js";
 function formatDate(input, format) {
   let date;

package/dist/wje-option.js

@@ -29,7 +29,7 @@ class Option extends WJElement {
    * @param {boolean} value - The value to set.
    */
   set selected(value) {
-    return value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
+    value ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
   /**
    * Sets the value attribute of the option.

package/dist/wje-options.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-7dR-X4sd.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-BJZCBKDO.js";
 import { L as List } from "./list.element-BkOOqBtW.js";
 import Option from "./wje-option.js";
 class Options extends WJElement {
@@ -30,10 +30,17 @@ class Options extends WJElement {
      */
     __publicField(this, "htmlItem", (item) => {
       let option = document.createElement("wje-option");
-      option.setAttribute("value", item[this.itemValue] || item.value);
-      option.innerText = item[this.itemText] || item.text;
+      if (item[this.itemValue] == null) {
+        console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);
+      }
+      if (item[this.itemText] == null) {
+        console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);
+      }
+      option.setAttribute("value", item[this.itemValue] ?? "");
+      option.innerText = item[this.itemText] ?? "";
       return option;
     });
+    this._loadedOptions = [];
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -86,11 +93,16 @@ class Options extends WJElement {
   set lazy(value) {
     this.setAttribute("lazy", value);
   }
+  get options() {
+    var _a;
+    return (_a = this._loadedOptions) == null ? void 0 : _a.flat();
+  }
   /**
    * Lifecycle method, called whenever an observed property changes
    */
-  attributeChangedCallback(name, old, newName) {
-    if (this.infiniteScroll) {
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (this.infiniteScroll && name === "search" && oldValue !== newValue) {
+      this._loadedOptions = [];
       this.infiniteScroll.placementObj.innerHTML = "";
       this.infiniteScroll.totalPages = 0;
       this.infiniteScroll.refresh();
@@ -122,13 +134,18 @@ class Options extends WJElement {
       infiniteScroll.dataToHtml = this.htmlItem;
       infiniteScroll.setCustomData = async (page, signal) => {
         let res = await this.service.get(`${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`, null, false, signal);
-        return res;
+        const filteredOptions = this.filterOutDrawnOptions(res);
+        this._loadedOptions.push(...this.processData(filteredOptions));
+        return filteredOptions;
       };
       this.contains(infiniteScroll) || this.appendChild(infiniteScroll);
       this.infiniteScroll = infiniteScroll;
     } else {
       this.response = await this.getPages();
-      this.append(...this.processData(this.response).map(this.htmlItem));
+      let optionsData = this.filterOutDrawnOptions(this.response);
+      optionsData = this.processData(optionsData);
+      this._loadedOptions.push(...optionsData);
+      this.append(...optionsData.map(this.htmlItem));
     }
     fragment.appendChild(slot);
     return fragment;
@@ -141,12 +158,32 @@ class Options extends WJElement {
    */
   processData(data) {
     var _a;
-    const splittedOptionArrayPath = (_a = this.optionArrayPath) == null ? void 0 : _a.split(".");
+    const splittedOptionArrayPath = this.optionArrayPath ? (_a = this.optionArrayPath) == null ? void 0 : _a.split(".") : null;
     let options = data;
     splittedOptionArrayPath == null ? void 0 : splittedOptionArrayPath.forEach((path) => {
       options = options[path];
     });
-    return options;
+    return options ?? [];
+  }
+  /**
+   * Filters out drawn options from the response.
+   * 
+   * @param {any} response - The response to filter.
+   * @returns {any} - The filtered response.
+   */
+  filterOutDrawnOptions(response) {
+    var _a;
+    const splittedOptionArrayPath = this.optionArrayPath ? (_a = this.optionArrayPath) == null ? void 0 : _a.split(".") : [];
+    let filteredResponse = structuredClone(response);
+    const recursiveUpdate = (object, pathToProperty) => {
+      if (pathToProperty.length > 1) {
+        recursiveUpdate(object[pathToProperty[0]], pathToProperty.slice(1));
+      } else {
+        object[pathToProperty[0]] = object[pathToProperty[0]].filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]));
+      }
+    };
+    recursiveUpdate(filteredResponse, splittedOptionArrayPath);
+    return filteredResponse;
   }
   /**
    * Fetches the pages from the provided URL.
@@ -163,6 +200,36 @@ class Options extends WJElement {
     const data = await response.json();
     return data;
   }
+  /**
+   * Finds the selected option data based on the given selected option values.
+   *
+   * @param {Array} selectedOptionValues - The array of selected option values.
+   * @returns {Array} - The array of option data that matches the selected option values.
+   */
+  findSelectedOptionData(selectedOptionValues = []) {
+    return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));
+  }
+  /**
+   * Adds an option to the element.
+   * 
+   * @param {Object} optionData - The data of the option to be added.
+   */
+  addOption(optionData) {
+    if (this._loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {
+      return;
+    }
+    this.appendChild(this.htmlItem(optionData));
+    this._loadedOptions.push(optionData);
+  }
+  /**
+   * Adds options to the element.
+   * 
+   * @param {Array} optionsData - The array of option data to be added.
+   * @param {boolean} [silent=false] - Whether to suppress events triggered by adding options.
+   */
+  addOptions(optionsData = [], silent = false) {
+    Array.isArray(optionsData) ? optionsData == null ? void 0 : optionsData.forEach((optionData) => this.addOption(optionData, silent)) : this.addOption(optionsData, silent);
+  }
 }
 Options.define("wje-options", Options);
 export {

package/dist/wje-select.js

@@ -14,7 +14,7 @@ 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-Dna4OwCH.js";
-const styles = "/*\r\n[ WJ Select ]\r\n*/\r\n\r\n:host {\r\n  --wje-select-border-width: 1px;\r\n  --wje-select-border-style: solid;\r\n  --wje-select-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-options-border-width: 1px;\r\n  --wje-select-options-border-style: var(--wje-border-style);\r\n  --wje-select-options-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-background: var(--wje-background);\r\n  --wje-select-line-height: 20px;\r\n  --wje-select-color: var(--wje-color);\r\n  --wje-select-border-radius: var(--wje-border-radius-medium);\r\n\r\n  width: 100%;\r\n  display: block;\r\n  [slot=arrow] {\r\n    transform: rotate(0deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.native-select {\r\n  &.default{\r\n    .wrapper {\r\n      display: block;\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n      padding-inline: .5rem;\r\n      padding-top: 0.125rem;\r\n      padding-bottom: 0.125rem;\r\n    }\r\n    .input-wrapper {\r\n      padding: 0;\r\n      min-height: 28px;\r\n      margin-top: -4px;\r\n    }\r\n    &.focused {\r\n      wje-label {\r\n        opacity: 0.67;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n    wje-label {\r\n      margin: 0;\r\n      display: block;\r\n      opacity: 1;\r\n      cursor: text;\r\n      transition: opacity 0.2s ease 0s;\r\n      line-height: var(--wje-select-line-height);\r\n      &.fade {\r\n        opacity: 0.5;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n  }\r\n  &.standard {\r\n    .wrapper {\r\n      background-color: var(--wje-select-background);\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n    }\r\n    .input-wrapper {\r\n      background: transparent;\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.input-wrapper {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr auto auto auto;\r\n  align-items: center;\r\n  background-color: var(--wje-select-background);\r\n  min-height: 28px;\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  appearance: none;\r\n  padding: 2px .5rem;\r\n  font-size: 14px !important;\r\n  font-weight: normal;\r\n  vertical-align: middle;\r\n}\r\n\r\ninput {\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  font-size: 14px !important;\r\n  font-weight: 400;\r\n  letter-spacing: .01em;\r\n  border: medium;\r\n  height: 25px;\r\n  min-height: 25px;\r\n  padding: 0;\r\n  background: none;\r\n  box-shadow: none;\r\n  width: 100%;\r\n  outline: 0;\r\n  font-size: 14px !important;\r\n}\r\n\r\n::placeholder {\r\n  opacity: 1;\r\n}\r\n\r\n:host [active] {\r\n  .wrapper {\r\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\r\n  }\r\n  [slot=arrow] {\r\n    transform: rotate(180deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.options-wrapper {\r\n  border-width: var(--wje-select-options-border-width);\r\n  border-style: var(--wje-select-options-border-style);\r\n  border-color: var(--wje-select-options-border-color);\r\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\r\n  margin-top: calc(0px - var(--wje-select-border-width));\r\n  background: var(--wje-select-background);\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n.find {\r\n  --wje-input-border-radius: 0;\r\n  --wje-input-border-width: 0 0 1px 0;\r\n}\r\n\r\n.list {\r\n  overflow: auto;\r\n  height: 100%;\r\n}\r\n\r\n.options-wrapper:has(.find) .list {\r\n  height: calc(100% - 32px - .5rem);\r\n}\r\n\r\n:host([multiple]) input {\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 0;\r\n  left: 0;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n}\r\n\r\n:host([multiple]) .chips {\r\n  display: flex;\r\n  flex: 1;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n:host([disabled]) .input-wrapper{\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.counter {\r\n  padding-inline: .5rem;\r\n}\r\n\r\nwje-chip {\r\n  --wje-chip-margin: 0 .25rem 0 0;\r\n}\r\n\r\nwje-button {\r\n  --wje-padding-top: .25rem;\r\n  --wje-padding-start: .25rem;\r\n  --wje-padding-end: .25rem;\r\n  --wje-padding-bottom: .25rem;\r\n  --wje-button-margin-inline: 0 .25rem;\r\n}\r\n\r\n.slot-start, .slot-end {\r\n  &:not(:empty) {\r\n    margin-right: .5rem;\r\n  }\r\n}\r\n";
+const styles = "/*\r\n[ WJ Select ]\r\n*/\r\n\r\n:host {\r\n  --wje-select-border-width: 1px;\r\n  --wje-select-border-style: solid;\r\n  --wje-select-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-options-border-width: 1px;\r\n  --wje-select-options-border-style: var(--wje-border-style);\r\n  --wje-select-options-border-color: var(--wje-border-color);\r\n\r\n  --wje-select-background: var(--wje-background);\r\n  --wje-select-line-height: 20px;\r\n  --wje-select-color: var(--wje-color);\r\n  --wje-select-border-radius: var(--wje-border-radius-medium);\r\n\r\n  --wje-select-margin-bottom: .5rem;\r\n  margin-bottom: var(--wje-select-margin-bottom);\r\n\r\n  width: 100%;\r\n  display: block;\r\n  [slot=arrow] {\r\n    transform: rotate(0deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.native-select {\r\n  &.default{\r\n    .wrapper {\r\n      display: block;\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n      padding-inline: .5rem;\r\n      padding-top: 0.125rem;\r\n      padding-bottom: 0.125rem;\r\n    }\r\n    .input-wrapper {\r\n      padding: 0;\r\n      min-height: 28px;\r\n      margin-top: -4px;\r\n    }\r\n    &.focused {\r\n      wje-label {\r\n        opacity: 0.67;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n    wje-label {\r\n      margin: 0;\r\n      display: block;\r\n      opacity: 1;\r\n      cursor: text;\r\n      transition: opacity 0.2s ease 0s;\r\n      line-height: var(--wje-select-line-height);\r\n      &.fade {\r\n        opacity: 0.5;\r\n        font-size: 12px;\r\n        letter-spacing: normal;\r\n      }\r\n    }\r\n  }\r\n  &.standard {\r\n    .wrapper {\r\n      background-color: var(--wje-select-background);\r\n      border-width: var(--wje-select-border-width);\r\n      border-style: var(--wje-select-border-style);\r\n      border-color: var(--wje-select-border-color);\r\n      border-radius: var(--wje-select-border-radius);\r\n    }\r\n    .input-wrapper {\r\n      background: transparent;\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n.wrapper {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.input-wrapper {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr auto auto auto;\r\n  align-items: center;\r\n  background-color: var(--wje-select-background);\r\n  min-height: 28px;\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  appearance: none;\r\n  padding: 2px .5rem;\r\n  font-size: 14px !important;\r\n  font-weight: normal;\r\n  vertical-align: middle;\r\n}\r\n\r\ninput {\r\n  color: var(--wje-select-color);\r\n  line-height: var(--wje-select-line-height);\r\n  font-size: 14px !important;\r\n  font-weight: 400;\r\n  letter-spacing: .01em;\r\n  border: medium;\r\n  height: 25px;\r\n  min-height: 25px;\r\n  padding: 0;\r\n  background: none;\r\n  box-shadow: none;\r\n  width: 100%;\r\n  outline: 0;\r\n  font-size: 14px !important;\r\n}\r\n\r\n::placeholder {\r\n  opacity: 1;\r\n}\r\n\r\n:host [active] {\r\n  .wrapper {\r\n    border-radius: var(--wje-select-border-radius) var(--wje-select-border-radius) 0 0;\r\n  }\r\n  [slot=arrow] {\r\n    transform: rotate(180deg);\r\n    transition: all .2s ease-in;\r\n  }\r\n}\r\n\r\n.options-wrapper {\r\n  border-width: var(--wje-select-options-border-width);\r\n  border-style: var(--wje-select-options-border-style);\r\n  border-color: var(--wje-select-options-border-color);\r\n  border-radius: 0 0 var(--wje-select-border-radius) var(--wje-select-border-radius);\r\n  margin-top: calc(0px - var(--wje-select-border-width));\r\n  background: var(--wje-select-background);\r\n  overflow: hidden;\r\n\r\n}\r\n\r\n.find {\r\n  --wje-input-border-radius: 0;\r\n  --wje-input-border-width: 0 0 1px 0;\r\n}\r\n\r\n.list {\r\n  overflow: auto;\r\n  height: 100%;\r\n}\r\n\r\n.options-wrapper:has(.find) .list {\r\n  height: calc(100% - 32px - .5rem);\r\n}\r\n\r\n:host([multiple]) input {\r\n  position: absolute;\r\n  z-index: -1;\r\n  top: 0;\r\n  left: 0;\r\n  width: 0;\r\n  height: 0;\r\n  opacity: 0;\r\n}\r\n\r\n:host([multiple]) .chips {\r\n  display: flex;\r\n  flex: 1;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n:host([disabled]) .input-wrapper{\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.counter {\r\n  padding-inline: .5rem;\r\n}\r\n\r\nwje-chip {\r\n  --wje-chip-margin: 0 .25rem 0 0;\r\n}\r\n\r\nwje-button {\r\n  --wje-padding-top: .25rem;\r\n  --wje-padding-start: .25rem;\r\n  --wje-padding-end: .25rem;\r\n  --wje-padding-bottom: .25rem;\r\n  --wje-button-margin-inline: 0 .25rem;\r\n}\r\n\r\n.slot-start, .slot-end {\r\n  &:not(:empty) {\r\n    margin-right: .5rem;\r\n  }\r\n}\r\n";
 class Select extends WJElement {
   /**
    * Creates an instance of Select.
@@ -49,8 +49,7 @@ class Select extends WJElement {
         this.popup.removeAttribute("active");
       }
       e.target.selected = !e.target.hasAttribute("selected");
-      this.selections(e.target);
-      event.dispatchCustomEvent(this, "wje-select:change");
+      this.selections();
     });
     /**
      * Handles the chip remove event.
@@ -62,7 +61,7 @@ class Select extends WJElement {
       option.selected = false;
       option.removeAttribute("selected");
       e.target.parentNode.removeChild(e.target);
-      this.selections(null, 0);
+      this.selections();
     });
     this._selected = [];
     this.counterEl = null;
@@ -353,7 +352,7 @@ class Select extends WJElement {
       this.selections();
       e.stopPropagation();
     });
-    this.selections();
+    this.selections(true);
     this.list.addEventListener("wje-options:load", (e) => {
       this.list.scrollTo(0, 0);
     });
@@ -449,7 +448,7 @@ class Select extends WJElement {
    *
    * @param {Element} option - The option to select.
    */
-  selections(option) {
+  selections(silence = false) {
     let options = this.getSelectedOptions();
     this.selectedOptions = Array.isArray(options) ? options : Array.from(options);
     if (this.selectedOptions.length >= +this.maxOptions) {
@@ -457,12 +456,15 @@ class Select extends WJElement {
     }
     this.chips.innerHTML = "";
     if (this.selectedOptions.length > 0) {
-      this.selectedOptions.forEach((option2, index) => {
-        this.selectionChanged(option2, ++index);
+      this.selectedOptions.forEach((option, index) => {
+        this.selectionChanged(option, ++index);
       });
     } else {
       this.selectionChanged();
     }
+    if (silence)
+      return;
+    event.dispatchCustomEvent(this, "wje-select:change");
   }
   /**
    * Handles the counter.
@@ -496,6 +498,95 @@ class Select extends WJElement {
     chip.appendChild(label);
     return chip;
   }
+  /**
+   * 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.
+   * @returns {HTMLElement} The generated HTML option element.
+   */
+  htmlOption(item, map = { value: "value", text: "text" }) {
+    let option = document.createElement("wje-option");
+    if (item[map.value] == null) {
+      console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.value}`);
+    }
+    if (item[map.text] == null) {
+      console.warn(`The item ${JSON.stringify(item)} does not have the property ${map.text}`);
+    }
+    option.setAttribute("value", item[map.value] ?? "");
+    option.innerText = item[map.text] ?? "";
+    return option;
+  }
+  /**
+   * 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.
+   */
+  addOption(optionData, silent = false, map = { value: "value", text: "text" }) {
+    if (!optionData)
+      return;
+    const optionsElement = this.querySelector("wje-options");
+    if (optionsElement) {
+      optionsElement.addOption(optionData, silent, map);
+      return;
+    }
+    let option = this.htmlOption(optionData, map);
+    this.appendChild(option);
+  }
+  /**
+   * 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" }.
+   */
+  addOptions(optionsData, silent = false, map = { value: "value", text: "text" }) {
+    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);
+      });
+    }
+  }
+  /**
+   * 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.
+   */
+  selectOption(value, silent = false) {
+    if (!value)
+      return;
+    let option = this.querySelector(`wje-option[value="${value}"]`);
+    if (option) {
+      option.selected = true;
+    }
+  }
+  /**
+   * 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.
+   */
+  selectOptions(values, silent = false) {
+    if (!Array.isArray(values)) {
+      this.selectOption(values, silent);
+    } else {
+      values.forEach((value) => {
+        this.selectOption(value, silent);
+      });
+    }
+  }
   /**
    * @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.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.105",
+  "version": "0.1.108",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",