wj-elements 0.1.129 → 0.1.130

package/dist/wje-options.js

@@ -2,14 +2,13 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
-import { I as InfiniteScroll } from "./infinite-scroll.element-R3y_ZQj6.js";
-import { L as List } from "./list.element-syl98NWS.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-BmojLp3Z.js";
+import { L as List } from "./list.element-Ce1vIm1O.js";
 import Option from "./wje-option.js";
 class Options extends WJElement {
   /**
    * Creates an instance of Options.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -19,10 +18,41 @@ class Options extends WJElement {
       "wje-list": List
     });
     __publicField(this, "className", "Options");
+    /**
+     * Recursively updates the object based on the provided path to the property.
+     * @param {object | Array | null} object
+     * @param {Array<string> | null} pathToProperty
+     * @returns {object | Array | null}
+     */
+    __publicField(this, "recursiveUpdate", (object, pathToProperty) => {
+      var _a;
+      if (pathToProperty.length === 0) {
+        if (Array.isArray(object)) {
+          return object.filter(
+            (option) => !this.loadedOptions.some(
+              (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]
+            )
+          );
+        } else {
+          console.error("Expected an array but got:", object, pathToProperty);
+          return [];
+        }
+      }
+      const [currentPath, ...remainingPath] = pathToProperty;
+      if (remainingPath.length > 0) {
+        object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);
+      } else {
+        object[currentPath] = ((_a = object[currentPath]) == null ? void 0 : _a.filter(
+          (option) => !this.loadedOptions.some(
+            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]
+          )
+        )) ?? [];
+      }
+      return object;
+    });
     /**
      * Generates an HTML option element based on the provided item.
-     * 
-     * @param {Object} item - The item to generate the option element for.
+     * @param {object} item The item to generate the option element for.
      * @returns {HTMLElement} The generated option element.
      */
     __publicField(this, "htmlItem", (item) => {
@@ -41,71 +71,144 @@ class Options extends WJElement {
   }
   /**
    * Returns the list of attributes to observe for changes.
-   *
    * @static
    * @returns {Array<string>}
    */
   static get observedAttributes() {
     return ["search"];
   }
+  /**
+   * Sets the option array path attribute.
+   * @param {string} value The value to set for the option array path.
+   */
   set optionArrayPath(value) {
     this.setAttribute("option-array-path", value);
   }
+  /**
+   * Gets the option array path attribute.
+   * @returns {string} The value of the option array path attribute or "data" if not set.
+   */
   get optionArrayPath() {
-    return this.getAttribute("option-array-path") ?? "data";
+    return this.getAttribute("option-array-path");
   }
+  /**
+   * Checks if the option array path attribute is present.
+   * @returns {boolean} True if the option array path attribute is present, false otherwise.
+   */
   get hasOptionArrayPath() {
     return this.hasAttribute("option-array-path");
   }
+  /**
+   * Gets the dropdown height attribute.
+   * @returns {string} The value of the dropdown height attribute or "100%" if not set.
+   */
   get dropdownHeight() {
     return this.getAttribute("dropdown-height") || "100%";
   }
+  /**
+   * Sets the dropdown height attribute.
+   * @param {string} value The value to set for the dropdown height.
+   */
   set dropdownHeight(value) {
     this.setAttribute("dropdown-height", value);
   }
+  /**
+   * Sets the item value attribute.
+   * @param {string} value The value to set for the item value.
+   */
   set itemValue(value) {
     this.setAttribute("item-value", value);
   }
+  /**
+   * Gets the item value attribute.
+   * @returns {string} The value of the item value attribute or "value" if not set.
+   */
   get itemValue() {
     return this.getAttribute("item-value") || "value";
   }
+  /**
+   * Sets the item text attribute.
+   * @param {string} value The value to set for the item text.
+   */
   set itemText(value) {
     this.setAttribute("item-text", value);
   }
+  /**
+   * Gets the item text attribute.
+   * @returns {string} The value of the item text attribute or "text" if not set.
+   */
   get itemText() {
     return this.getAttribute("item-text") || "text";
   }
+  /**
+   * Gets the lazy load size attribute.
+   * @returns {number} The value of the lazy load size attribute or 10 if not set.
+   */
   get lazyLoadSize() {
     return this.getAttribute("lazy-load-size") || 10;
   }
+  /**
+   * Sets the lazy load size attribute.
+   * @param {number} value The value to set for the lazy load size.
+   */
   set lazyLoadSize(value) {
     this.setAttribute("lazy-load-size", value);
   }
+  /**
+   * Sets the search attribute.
+   * @param {string} value The value to set for the search.
+   */
   set search(value) {
     this.setAttribute("search", value);
   }
+  /**
+   * Gets the search attribute.
+   * @returns {string} The value of the search attribute.
+   */
   get search() {
     return this.getAttribute("search");
   }
+  /**
+   * Checks if the search attribute is present.
+   * @returns {boolean} True if the search attribute is present, false otherwise.
+   */
   get hasSearch() {
     return this.hasAttribute("search");
   }
+  /**
+   * Checks if the lazy attribute is present.
+   * @returns {boolean} True if the lazy attribute is present, false otherwise.
+   */
   get lazy() {
     return this.hasAttribute("lazy");
   }
+  /**
+   * Sets the lazy attribute.
+   * @param {boolean} value The value to set for the lazy attribute.
+   */
   set lazy(value) {
     this.setAttribute("lazy", value);
   }
+  /**
+   * Gets the loaded options.
+   * @returns {Array} The loaded options.
+   */
   get options() {
     var _a;
-    return (_a = this._loadedOptions) == null ? void 0 : _a.flat();
+    return (_a = this.loadedOptions) == null ? void 0 : _a.flat();
+  }
+  get loadedOptions() {
+    return this._loadedOptions;
+  }
+  set loadedOption(loadedOptions) {
+    this._loadedOptions = loadedOptions;
   }
   /**
-   * Lifecycle method, called whenever an observed property changes
+   * Lifecycle method, called whenever an observed property changes.
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.infiniteScroll && name === "search" && oldValue !== newValue) {
-      this._loadedOptions = [];
+      this.loadedOptions = [];
       this.infiniteScroll.placementObj.innerHTML = "";
       this.infiniteScroll.totalPages = 0;
       this.infiniteScroll.refresh();
@@ -126,10 +229,6 @@ class Options extends WJElement {
   }
   /**
    * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
    * @returns {DocumentFragment}
    */
   async draw() {
@@ -144,17 +243,25 @@ class Options extends WJElement {
       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);
+        let res = await this.service.get(
+          `${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`,
+          null,
+          false,
+          signal
+        );
         const filteredOptions = this.filterOutDrawnOptions(res);
-        this._loadedOptions.push(...this.processData(filteredOptions));
+        this.loadedOptions.push(...this.processData(filteredOptions));
         return filteredOptions;
       };
+      if (!this.contains(infiniteScroll)) {
+        this.appendChild(infiniteScroll);
+      }
       this.infiniteScroll = infiniteScroll;
     } else {
       this.response = await this.getPages();
       let optionsData = this.filterOutDrawnOptions(this.response);
       optionsData = this.processData(optionsData);
-      this._loadedOptions.push(...optionsData);
+      this.loadedOptions.push(...optionsData);
       this.append(...optionsData.map(this.htmlItem));
     }
     fragment.appendChild(slot);
@@ -162,8 +269,7 @@ class Options extends WJElement {
   }
   /**
    * Processes the given data and returns the options based on the option array path.
-   * 
-   * @param {any} data - The data to be processed.
+   * @param {any} data The data to be processed.
    * @returns {any} - The options based on the option array path.
    */
   processData(data) {
@@ -177,34 +283,20 @@ class Options extends WJElement {
   }
   /**
    * Filters out drawn options from the response.
-   * 
-   * @param {any} response - The response to filter.
-   * @returns {any} - The filtered response.
+   * @param {object | null} response The response to filter.
+   * @returns {object} 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) => {
-      var _a2;
-      if (pathToProperty.length === 0) {
-        return object.filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]));
-      }
-      if (pathToProperty.length > 1) {
-        object[pathToProperty[0]] = recursiveUpdate(object[pathToProperty[0]], pathToProperty.slice(1));
-        return object;
-      }
-      object[pathToProperty[0]] = ((_a2 = object[pathToProperty[0]]) == null ? void 0 : _a2.filter((option) => !this._loadedOptions.some((loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]))) ?? [];
-      return object;
-    };
-    filteredResponse = recursiveUpdate(filteredResponse, splittedOptionArrayPath);
+    filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);
     return filteredResponse;
   }
   /**
    * Fetches the pages from the provided URL.
-   *
-   * @param {number} page - The page number to fetch.
-   * @returns {Promise<Object>} The fetched data.
+   * @param {number} page The page number to fetch.
+   * @returns {Promise<object>} The fetched data.
    * @throws Will throw an error if the response is not ok.
    */
   async getPages(page) {
@@ -212,13 +304,11 @@ class Options extends WJElement {
     if (!response.ok) {
       throw new Error(`An error occurred: ${response.status}`);
     }
-    const data = await response.json();
-    return data;
+    return await response.json();
   }
   /**
    * Finds the selected option data based on the given selected option values.
-   *
-   * @param {Array} selectedOptionValues - The array of 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 = []) {
@@ -226,27 +316,23 @@ class Options extends WJElement {
   }
   /**
    * Adds an option to the element.
-   * 
-   * @param {Object} optionData - The data of the option to be added.
+   * @param {object} optionData The data of the option to be added.
    */
   addOption(optionData) {
-    if (this._loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {
+    if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {
       return;
     }
-    this.appendChild(this.htmlItem(optionData));
-    this._loadedOptions.push(optionData);
+    this.prepend(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.
+   * @param {Array} optionsData The array of option data to be added.
+   * @param {boolean} [silent] Whether to suppress events triggered by adding options.
    */
   addOptions(optionsData = [], silent = false) {
-    if (Array.isArray(optionsData))
-      optionsData == null ? void 0 : optionsData.forEach((od) => this.addOption(od, silent));
-    else
-      this.addOption(optionsData, silent);
+    if (Array.isArray(optionsData)) optionsData == null ? void 0 : optionsData.forEach((od) => this.addOption(od, silent));
+    else this.addOption(optionsData, silent);
   }
 }
 Options.define("wje-options", Options);

package/dist/wje-orgchart-group.js

@@ -2,20 +2,22 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
-const styles = ":host {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before, &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: var(--wje-orgchart-group-padding);\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after, :host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}";
+const styles = ":host {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: var(--wje-orgchart-group-padding);\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}\n";
 class OrgchartGroup extends WJElement {
   /**
    * Creates an instance of OrgchartGroup.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
     __publicField(this, "className", "OrgchartGroup");
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -29,11 +31,7 @@ class OrgchartGroup extends WJElement {
     this.isShadowRoot = "open";
   }
   /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * Draws the component for the org chart group.
    * @returns {DocumentFragment}
    */
   draw() {
@@ -58,12 +56,7 @@ class OrgchartGroup extends WJElement {
     return fragment;
   }
   /**
-   * After Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
+   * After Draws the component for the org chart group.
    */
   afterDraw() {
     this.card.addEventListener("click", (e) => {

package/dist/wje-orgchart-item.js

@@ -2,160 +2,23 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = `:host {
-    width: var(--wje-orgchart-item-width);
-    box-sizing: border-box;
-
-    .orgchart-item {
-        display: flex;
-        flex-direction: column;
-
-        wje-card {
-            margin: 0 auto;
-            padding-inline: .25rem;
-            width: var(--wje-orgchart-item-width);
-            box-sizing: border-box;
-            &::part(native) {
-                border-radius: var(--wje-orgchart-border-radius) !important;
-                box-sizing: border-box;
-                overflow: visible;
-                padding-block: .125rem;
-                background: var(--wje-orgchart-item-background);
-            }
-        }
-    }
-
-    .expander {
-        position: absolute;
-        left: calc(50% + 1px / 2);
-        border: 1px solid var(--wje-border-color);
-        border-radius: 50%;
-        width: var(--wje-orgchart-item-expander-size);
-        height: var(--wje-orgchart-item-expander-size);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--wje-color-contrast-0);
-        font-size: 8px;
-        line-height: 1;
-        box-sizing: border-box;
-        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));
-        padding-bottom: 1px;
-        cursor: pointer;
-        z-index: 999;
-        bottom: 0;
-        &.collapse {
-            content: "+";
-            wje-orgchart {
-                display: none;
-            }
-        }
-        &:hover {
-            background: var(--wje-color-contrast-1);
-        }
-    }
-}
-
-:host(.collapse) {
-    .expander {
-        content: "+";
-    }
-    slot[name=child] {
-        display: none;
-    }
-}
-/* ak nie je parent-group */
-:host(:not(.parent-group)) {
-    text-align: center;
-    list-style-type: none;
-    position: relative;
-    padding: var(--wje-orgchart-item-height-line) 0 0 0;
-    transition: all 0.5s;
-    width: auto;
-    box-sizing: border-box;
-
-    &::before, &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 50%;
-        border-top: 1px solid var(--wje-border-color);
-        width: 50%;
-        height: calc(var(--wje-orgchart-item-height-line) - 1px);
-    }
-
-    &::after {
-        right: auto;
-        left: 50%;
-        border-left: 1px solid var(--wje-border-color);
-    }
-
-    wje-card::part(native) {
-        box-sizing: border-box;
-    }
-}
-
-:host([boss]){
-    wje-card::part(native) {
-        background: var(--wje-orgchart-item-boss-background);
-        border: var(--wje-orgchart-item-boss-border);
-    }
-}
-
-:host(:hover){
-    wje-card::part(native) {
-        background: var(--wje-orgchart-item-hover-background);
-        border: var(--wje-orgchart-item-hover-border);
-    }
-}
-
-:host(.highlight){
-    wje-card::part(native) {
-        background: var(--wje-orgchart-item-highlight-background);
-        border: var(--wje-orgchart-item-highlight-border);
-    }
-}
-
-:host(:only-child)::after, :host(:only-child)::before {
-    display: none;
-}
-
-:host(:only-child) {
-    padding-top: 0;
-}
-
-:host(:first-child)::before,
-:host(:last-child)::after {
-    border: 0 none;
-}
-
-:host(:last-child)::before {
-    border-right: 1px solid var(--wje-border-color);
-    border-radius: 0 var(--wje-orgchart-item-border-radius) 0 0;
-}
-
-:host(:first-child)::after {
-    border-radius: var(--wje-orgchart-item-border-radius) 0 0 0;
-}`;
+const styles = ":host {\n    width: var(--wje-orgchart-item-width);\n    box-sizing: border-box;\n\n    .orgchart-item {\n        display: flex;\n        flex-direction: column;\n\n        wje-card {\n            margin: 0 auto;\n            padding-inline: 0.25rem;\n            width: var(--wje-orgchart-item-width);\n            box-sizing: border-box;\n            &::part(native) {\n                border-radius: var(--wje-orgchart-border-radius) !important;\n                box-sizing: border-box;\n                overflow: visible;\n                padding-block: 0.125rem;\n                background: var(--wje-orgchart-item-background);\n            }\n        }\n    }\n\n    .expander {\n        position: absolute;\n        left: calc(50% + 1px / 2);\n        border: 1px solid var(--wje-border-color);\n        border-radius: 50%;\n        width: var(--wje-orgchart-item-expander-size);\n        height: var(--wje-orgchart-item-expander-size);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--wje-color-contrast-0);\n        font-size: 8px;\n        line-height: 1;\n        box-sizing: border-box;\n        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));\n        padding-bottom: 1px;\n        cursor: pointer;\n        z-index: 999;\n        bottom: 0;\n        &.collapse {\n            content: '+';\n            wje-orgchart {\n                display: none;\n            }\n        }\n        &:hover {\n            background: var(--wje-color-contrast-1);\n        }\n    }\n}\n\n:host(.collapse) {\n    .expander {\n        content: '+';\n    }\n    slot[name='child'] {\n        display: none;\n    }\n}\n/* ak nie je parent-group */\n:host(:not(.parent-group)) {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-item-height-line) 0 0 0;\n    transition: all 0.5s;\n    width: auto;\n    box-sizing: border-box;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n    }\n}\n\n:host([boss]) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-boss-background);\n        border: var(--wje-orgchart-item-boss-border);\n    }\n}\n\n:host(:hover) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-hover-background);\n        border: var(--wje-orgchart-item-hover-border);\n    }\n}\n\n:host(.highlight) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-highlight-background);\n        border: var(--wje-orgchart-item-highlight-border);\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-item-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-item-border-radius) 0 0 0;\n}\n";
 class OrgchartItem extends WJElement {
   /**
    * Creates an instance of OrgchartItem.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
     __publicField(this, "className", "OrgchartItem");
     /**
      * Toggles the children of the orgchart item.
-     * @param e - The event object.
+     * @param e The event object.
      */
     __publicField(this, "toggleChildren", (e) => {
       this.classList.toggle("collapse");
-      if (this.classList.contains("collapse"))
-        e.target.innerHTML = "+";
-      else
-        e.target.innerHTML = "-";
+      if (this.classList.contains("collapse")) e.target.innerHTML = "+";
+      else e.target.innerHTML = "-";
     });
   }
   /**
@@ -163,8 +26,7 @@ class OrgchartItem extends WJElement {
    * @param value
    */
   set boss(value) {
-    if (value)
-      this.setAttribute("boss", value);
+    if (value) this.setAttribute("boss", value);
   }
   /**
    * Gets the boss of the orgchart item.
@@ -175,7 +37,6 @@ class OrgchartItem extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -194,11 +55,7 @@ class OrgchartItem extends WJElement {
     }
   }
   /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * Draws the component for the org chart item.
    * @returns {DocumentFragment}
    */
   draw() {
@@ -215,7 +72,8 @@ class OrgchartItem extends WJElement {
     expander.classList.add("expander");
     expander.innerHTML = "-";
     card.appendChild(slot);
-    if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART")) card.appendChild(expander);
+    if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
+      card.appendChild(expander);
     native.appendChild(card);
     native.appendChild(child);
     fragment.appendChild(native);
@@ -223,12 +81,7 @@ class OrgchartItem extends WJElement {
     return fragment;
   }
   /**
-   * After Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
-   * @returns {DocumentFragment}
+   * After Draws the component for the org chart item.
    */
   afterDraw() {
     this.expander.addEventListener("click", this.toggleChildren);

package/dist/wje-orgchart.js

@@ -2,12 +2,11 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "* {margin: 0; padding: 0;}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n\n";
+const styles = "* {\n    margin: 0;\n    padding: 0;\n}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n";
 class Orgchart extends WJElement {
   /**
    * Creates an instance of Orgchart.
-   *
-   * @constructor
+   * @class
    */
   constructor() {
     super();
@@ -15,7 +14,6 @@ class Orgchart extends WJElement {
   }
   /**
    * Returns the CSS styles for the component.
-   *
    * @static
    * @returns {CSSStyleSheet}
    */
@@ -29,11 +27,7 @@ class Orgchart extends WJElement {
     this.isShadowRoot = "open";
   }
   /**
-   * Draws the component.
-   *
-   * @param {Object} context - The context for drawing.
-   * @param {Object} store - The store for drawing.
-   * @param {Object} params - The parameters for drawing.
+   * Draws the component for the org chart.
    * @returns {DocumentFragment}
    */
   draw() {

package/dist/wje-popup.js

@@ -1,4 +1,4 @@
-import { P as Popup } from "./popup.element-C0a1z1y2.js";
+import { P as Popup } from "./popup.element-4DNn6DjX.js";
 Popup.define("wje-popup", Popup);
 export {
   Popup as default