wj-elements 0.1.104 → 0.1.107

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-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-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();
@@ -117,17 +129,21 @@ class Options extends WJElement {
       const infiniteScroll = document.createElement("wje-infinite-scroll");
       infiniteScroll.setAttribute("placement", "wje-list");
       infiniteScroll.setAttribute("height", "100%");
+      infiniteScroll.setAttribute("object-name", this.optionArrayPath);
       infiniteScroll.append(list);
       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);
+        this._loadedOptions.push(this.processData(res));
         return res;
       };
       this.contains(infiniteScroll) || this.appendChild(infiniteScroll);
       this.infiniteScroll = infiniteScroll;
     } else {
       this.response = await this.getPages();
-      this.append(...this.processData(this.response).map(this.htmlItem));
+      const optionsData = this.processData(this.response);
+      this._loadedOptions.push(optionsData);
+      this.append(...optionsData.map(this.htmlItem));
     }
     fragment.appendChild(slot);
     return fragment;
@@ -140,7 +156,7 @@ 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];
@@ -162,6 +178,9 @@ class Options extends WJElement {
     const data = await response.json();
     return data;
   }
+  findSelectedOptionData(selectedOptionValues = []) {
+    return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));
+  }
 }
 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.
@@ -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.

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.104",
+  "version": "0.1.107",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",