wj-elements 0.1.134 → 0.1.136

package/dist/wje-option.js

@@ -1,111 +0,0 @@
-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 Icon from "./wje-icon.js";
-const styles = "/*\n[ WJ Option ]\n*/\n\n:host {\n    display: block;\n    wje-icon {\n        visibility: hidden;\n        margin-inline: 0.5rem;\n    }\n}\n\n:host([selected]) {\n    wje-icon {\n        visibility: visible;\n    }\n}\n\n:host([disabled]) {\n    background-color: lightgray;\n    opacity: 0.3;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.native-option {\n    display: flex;\n    align-items: center;\n    padding-top: var(--wje-option-padding-top);\n    padding-bottom: var(--wje-option-padding-bottom);\n}\n\n.native-option:hover {\n    background-color: var(--wje-option-highlighted);\n}\n\n::slotted([slot='start']) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-inline-end: 0.5rem;\n}\n\n::slotted([slot='end']) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-inline: auto 0.5rem;\n}\n";
-class Option extends WJElement {
-  /**
-   * Creates an instance of Option.
-   * @class
-   */
-  constructor() {
-    super();
-    /**
-     * Dependencies of the Option component.
-     */
-    __publicField(this, "dependencies", {
-      "wje-icon": Icon
-    });
-    __publicField(this, "className", "Option");
-  }
-  /**
-   * Sets the selected attribute of the option.
-   * @param {boolean} value The value to set.
-   */
-  set selected(value) {
-    if (value) this.setAttribute("selected", "");
-    else this.removeAttribute("selected");
-  }
-  /**
-   * Sets the value attribute of the option.
-   * @param {string} value The value to set.
-   */
-  set value(value) {
-    this.setAttribute("value", value);
-  }
-  /**
-   * Sets the text content of the option.
-   * @param {string} value The text to set.
-   */
-  set text(value) {
-    this.innerText = value;
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return [];
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component for the option.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-option");
-    element.setAttribute("part", "native");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "check");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let slot = document.createElement("slot");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    element.appendChild(icon);
-    element.appendChild(start);
-    element.appendChild(slot);
-    element.appendChild(end);
-    fragment.appendChild(element);
-    return fragment;
-  }
-  /**
-   * Adds event listeners after the component is drawn.
-   */
-  afterDraw() {
-    event.addListener(this, "click", null, (e, b, c) => {
-      if (this.hasAttribute("disabled")) return;
-      this.dispatchEvent(
-        new CustomEvent("wje-option:change", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            value: this.value,
-            text: this.text
-          }
-        })
-      );
-    });
-  }
-}
-Option.define("wje-option", Option);
-export {
-  Option as default
-};

package/dist/wje-options.js

@@ -1,341 +0,0 @@
-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-XVJukzjy.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.
-   * @class
-   */
-  constructor() {
-    super();
-    __publicField(this, "dependencies", {
-      "wje-option": Option,
-      "wje-infinite-scroll": InfiniteScroll,
-      "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.
-     * @returns {HTMLElement} The generated option element.
-     */
-    __publicField(this, "htmlItem", (item) => {
-      let option = document.createElement("wje-option");
-      if (item[this.itemValue] === null || item[this.itemValue] === void 0) {
-        console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);
-      }
-      if (item[this.itemText] === null || item[this.itemText] === void 0) {
-        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.
-   * @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");
-  }
-  /**
-   * 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();
-  }
-  get loadedOptions() {
-    return this._loadedOptions;
-  }
-  set loadedOptions(loadedOptions) {
-    this._loadedOptions = loadedOptions;
-  }
-  /**
-   * Lifecycle method, called whenever an observed property changes.
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (this.infiniteScroll && name === "search" && oldValue !== newValue) {
-      this.loadedOptions = [];
-      this.infiniteScroll.placementObj.innerHTML = "";
-      this.infiniteScroll.totalPages = 0;
-      this.infiniteScroll.refresh();
-    }
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Prepares the component before drawing.
-   * Fetches the pages and creates the options elements.
-   */
-  beforeDraw() {
-    event.dispatchCustomEvent(this, "wje-options:load", {});
-  }
-  /**
-   * Draws the component.
-   * @returns {DocumentFragment}
-   */
-  async draw() {
-    let fragment = document.createDocumentFragment();
-    const slot = document.createElement("slot");
-    if (this.hasAttribute("lazy")) {
-      const list = document.createElement("wje-list");
-      const infiniteScroll = document.createElement("wje-infinite-scroll");
-      infiniteScroll.setAttribute("placement", "wje-list");
-      infiniteScroll.setAttribute("height", this.dropdownHeight);
-      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
-        );
-        const filteredOptions = this.filterOutDrawnOptions(res);
-        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.append(...optionsData.map(this.htmlItem));
-    }
-    fragment.appendChild(slot);
-    return fragment;
-  }
-  /**
-   * Processes the given data and returns the options based on the option array path.
-   * @param {any} data The data to be processed.
-   * @returns {any} - The options based on the option array path.
-   */
-  processData(data) {
-    var _a;
-    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 ?? [];
-  }
-  /**
-   * Filters out drawn options from the 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);
-    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.
-   * @throws Will throw an error if the response is not ok.
-   */
-  async getPages(page) {
-    const response = await fetch(this.url);
-    if (!response.ok) {
-      throw new Error(`An error occurred: ${response.status}`);
-    }
-    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.
-   * @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.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] 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);
-  }
-}
-Options.define("wje-options", Options);
-export {
-  Options as default
-};

package/dist/wje-orgchart-group.js

@@ -1,71 +0,0 @@
-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,\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.
-   * @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}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component for the org chart group.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("orgchart-group");
-    let card = document.createElement("wje-card");
-    let title = document.createElement("h4");
-    title.setAttribute("part", "title");
-    title.innerHTML = this.getAttribute("title") || "";
-    let items = document.createElement("div");
-    items.setAttribute("part", "items");
-    items.classList.add("items");
-    let slot = document.createElement("slot");
-    items.appendChild(slot);
-    card.appendChild(title);
-    card.appendChild(items);
-    native.appendChild(card);
-    fragment.appendChild(native);
-    this.card = card;
-    return fragment;
-  }
-  /**
-   * After Draws the component for the org chart group.
-   */
-  afterDraw() {
-    this.card.addEventListener("click", (e) => {
-      e.stopPropagation();
-      event.dispatchCustomEvent(this.card, "wje-orgchart-group:click", { target: this });
-    });
-  }
-}
-OrgchartGroup.define("wje-orgchart-group", OrgchartGroup);
-export {
-  OrgchartGroup as default
-};

package/dist/wje-orgchart-item.js

@@ -1,97 +0,0 @@
-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 {\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.
-   * @class
-   */
-  constructor() {
-    super();
-    __publicField(this, "className", "OrgchartItem");
-    /**
-     * Toggles the children of the orgchart item.
-     * @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 = "-";
-    });
-  }
-  /**
-   * Sets the boss of the orgchart item.
-   * @param value
-   */
-  set boss(value) {
-    if (value) this.setAttribute("boss", value);
-  }
-  /**
-   * Gets the boss of the orgchart item.
-   * @returns {boolean}
-   */
-  get boss() {
-    return this.hasAttribute("boss");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  beforeDraw() {
-    if (this.parentElement && this.parentElement.tagName === "WJE-ORGCHART-GROUP") {
-      this.classList.add("parent-group");
-    }
-  }
-  /**
-   * Draws the component for the org chart item.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("orgchart-item");
-    let card = document.createElement("wje-card");
-    card.setAttribute("part", "card");
-    let slot = document.createElement("slot");
-    let child = document.createElement("slot");
-    child.setAttribute("name", "child");
-    let expander = document.createElement("div");
-    expander.setAttribute("part", "expander");
-    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);
-    native.appendChild(card);
-    native.appendChild(child);
-    fragment.appendChild(native);
-    this.expander = expander;
-    return fragment;
-  }
-  /**
-   * After Draws the component for the org chart item.
-   */
-  afterDraw() {
-    this.expander.addEventListener("click", this.toggleChildren);
-  }
-  dispatchEvent(e) {
-    return false;
-  }
-}
-OrgchartItem.define("wje-orgchart-item", OrgchartItem);
-export {
-  OrgchartItem as default
-};

package/dist/wje-orgchart.js

@@ -1,48 +0,0 @@
-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 = "* {\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.
-   * @class
-   */
-  constructor() {
-    super();
-    __publicField(this, "className", "Orgchart");
-  }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Sets up the attributes for the component.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Draws the component for the org chart.
-   * @returns {DocumentFragment}
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-orgchart");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    this.native = native;
-    return fragment;
-  }
-}
-Orgchart.define("wje-orgchart", Orgchart);
-export {
-  Orgchart as default
-};

package/dist/wje-popup.js

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