wj-elements 0.1.107 → 0.1.109

package/dist/wje-element.js

@@ -620,14 +620,12 @@ const _WJElement = class _WJElement extends HTMLElement {
     let attrs = this.getAttributeNames();
     attrs.forEach((name) => {
       const sanitizedName = this.sanitizeName(name);
-      if (this[sanitizedName] == void 0) {
-        Object.defineProperty(this, sanitizedName, {
-          set: (value) => this.setAttribute(name, value),
-          get: (_) => {
-            return this.getAttribute(name);
-          }
-        });
-      }
+      const protoFunc = Object.getOwnPropertyDescriptors(this.__proto__)[sanitizedName];
+      const func = Object.getOwnPropertyDescriptors(this)[sanitizedName];
+      Object.defineProperty(this, sanitizedName, {
+        set: (protoFunc == null ? void 0 : protoFunc.set) ?? (func == null ? void 0 : func.set) ?? ((value) => this.setAttribute(name, value)),
+        get: (protoFunc == null ? void 0 : protoFunc.get) ?? (func == null ? void 0 : func.get) ?? (() => this.getAttribute(name))
+      });
     });
   }
   isProcessingFlow(processId) {

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

@@ -134,15 +134,17 @@ 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);
-        this._loadedOptions.push(this.processData(res));
-        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();
-      const optionsData = this.processData(this.response);
-      this._loadedOptions.push(optionsData);
+      let optionsData = this.filterOutDrawnOptions(this.response);
+      optionsData = this.processData(optionsData);
+      this._loadedOptions.push(...optionsData);
       this.append(...optionsData.map(this.htmlItem));
     }
     fragment.appendChild(slot);
@@ -161,7 +163,27 @@ class Options extends WJElement {
     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.
@@ -178,9 +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

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