wj-elements 0.1.140 → 0.1.142

package/dist/wje-master.js

@@ -1,101 +1,105 @@
 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 { default as default2 } from "./wje-level-indicator.js";
 import { b } from "./router-links-CJnOdbas.js";
-import { default as default2 } from "./wje-sliding-container.js";
+import { default as default3 } from "./wje-sliding-container.js";
 import { fetchAndParseCSS } from "./wje-fetchAndParseCSS.js";
 import WJElement from "./wje-element.js";
 import { WjePermissionsApi, event } from "./wje-element.js";
 import { Localizer } from "./localize.js";
-import { default as default3 } from "./wje-accordion.js";
-import { default as default4 } from "./wje-accordion-item.js";
-import { default as default5 } from "./wje-animation.js";
-import { default as default6 } from "./wje-aside.js";
-import { default as default7 } from "./wje-avatar.js";
-import { default as default8 } from "./wje-badge.js";
-import { default as default9 } from "./wje-breadcrumb.js";
-import { default as default10 } from "./wje-breadcrumbs.js";
-import { default as default11 } from "./wje-button.js";
-import { default as default12 } from "./wje-button-group.js";
-import { default as default13 } from "./wje-card.js";
-import { default as default14 } from "./wje-card-content.js";
-import { default as default15 } from "./wje-card-controls.js";
-import { default as default16 } from "./wje-card-header.js";
-import { default as default17 } from "./wje-card-subtitle.js";
-import { default as default18 } from "./wje-card-title.js";
-import { default as default19 } from "./wje-carousel.js";
-import { default as default20 } from "./wje-carousel-item.js";
-import { default as default21 } from "./wje-checkbox.js";
-import { default as default22 } from "./wje-chip.js";
-import { default as default23 } from "./wje-col.js";
-import { default as default24 } from "./wje-color-picker.js";
-import { default as default25 } from "./wje-container.js";
-import { default as default26 } from "./wje-copy-button.js";
-import { default as default27 } from "./wje-dialog.js";
-import { default as default28 } from "./wje-divider.js";
-import { default as default29 } from "./wje-dropdown.js";
-import { default as default30 } from "./wje-file-upload.js";
-import { default as default31 } from "./wje-file-upload-item.js";
-import { default as default32 } from "./wje-footer.js";
-import { default as default33 } from "./wje-format-digital.js";
-import { default as default34 } from "./wje-grid.js";
-import { default as default35 } from "./wje-header.js";
-import { default as default36 } from "./wje-icon.js";
-import { default as default37 } from "./wje-icon-picker.js";
-import { default as default38 } from "./wje-img.js";
-import { default as default39 } from "./wje-img-comparer.js";
+import { default as default4 } from "./wje-accordion.js";
+import { default as default5 } from "./wje-accordion-item.js";
+import { default as default6 } from "./wje-animation.js";
+import { default as default7 } from "./wje-aside.js";
+import { default as default8 } from "./wje-avatar.js";
+import { default as default9 } from "./wje-badge.js";
+import { default as default10 } from "./wje-breadcrumb.js";
+import { default as default11 } from "./wje-breadcrumbs.js";
+import { default as default12 } from "./wje-button.js";
+import { default as default13 } from "./wje-button-group.js";
+import { default as default14 } from "./wje-card.js";
+import { default as default15 } from "./wje-card-content.js";
+import { default as default16 } from "./wje-card-controls.js";
+import { default as default17 } from "./wje-card-header.js";
+import { default as default18 } from "./wje-card-subtitle.js";
+import { default as default19 } from "./wje-card-title.js";
+import { default as default20 } from "./wje-carousel.js";
+import { default as default21 } from "./wje-carousel-item.js";
+import { default as default22 } from "./wje-checkbox.js";
+import { default as default23 } from "./wje-chip.js";
+import { default as default24 } from "./wje-col.js";
+import { default as default25 } from "./wje-color-picker.js";
+import { default as default26 } from "./wje-container.js";
+import { default as default27 } from "./wje-copy-button.js";
+import { default as default28 } from "./wje-dialog.js";
+import { default as default29 } from "./wje-divider.js";
+import { default as default30 } from "./wje-dropdown.js";
+import { default as default31 } from "./wje-file-upload.js";
+import { default as default32 } from "./wje-file-upload-item.js";
+import { default as default33 } from "./wje-footer.js";
+import { default as default34 } from "./wje-format-digital.js";
+import { default as default35 } from "./wje-grid.js";
+import { default as default36 } from "./wje-header.js";
+import { default as default37 } from "./wje-icon.js";
+import { default as default38 } from "./wje-icon-picker.js";
+import { default as default39 } from "./wje-img.js";
+import { default as default40 } from "./wje-img-comparer.js";
 import "./wje-infinite-scroll.js";
-import { default as default40 } from "./wje-input.js";
-import { default as default41 } from "./wje-input-file.js";
-import { default as default42 } from "./wje-item.js";
-import { default as default43 } from "./wje-kanban.js";
-import { default as default44 } from "./wje-label.js";
+import { default as default41 } from "./wje-input.js";
+import { default as default42 } from "./wje-input-file.js";
+import { default as default43 } from "./wje-item.js";
+import { default as default44 } from "./wje-kanban.js";
+import { default as default45 } from "./wje-label.js";
 import "./wje-list.js";
-import { default as default45 } from "./wje-main.js";
-import { default as default46 } from "./wje-masonry.js";
-import { default as default47 } from "./wje-menu.js";
-import { default as default48 } from "./wje-menu-button.js";
-import { default as default49 } from "./wje-menu-item.js";
-import { default as default50 } from "./wje-menu-label.js";
-import { default as default51 } from "./wje-option.js";
-import { default as default52 } from "./wje-options.js";
-import { default as default53 } from "./wje-orgchart.js";
-import { default as default54 } from "./wje-orgchart-group.js";
-import { default as default55 } from "./wje-orgchart-item.js";
+import { default as default46 } from "./wje-main.js";
+import { default as default47 } from "./wje-masonry.js";
+import { default as default48 } from "./wje-menu.js";
+import { default as default49 } from "./wje-menu-button.js";
+import { default as default50 } from "./wje-menu-item.js";
+import { default as default51 } from "./wje-menu-label.js";
+import { default as default52 } from "./wje-option.js";
+import { default as default53 } from "./wje-options.js";
+import { default as default54 } from "./wje-orgchart.js";
+import { default as default55 } from "./wje-orgchart-group.js";
+import { default as default56 } from "./wje-orgchart-item.js";
+import { default as default57 } from "./wje-pagination.js";
 import "./wje-popup.js";
-import { default as default56 } from "./wje-progress-bar.js";
-import { default as default57 } from "./wje-qr-code.js";
-import { default as default58 } from "./wje-radio.js";
-import { default as default59 } from "./wje-radio-group.js";
-import { default as default60 } from "./wje-rate.js";
-import { default as default61 } from "./wje-relative-time.js";
-import { default as default62 } from "./wje-reorder.js";
-import { default as default63 } from "./wje-reorder-dropzone.js";
-import { default as default64 } from "./wje-reorder-handle.js";
-import { default as default65 } from "./wje-reorder-item.js";
-import { default as default66 } from "./wje-route.js";
-import { default as default67 } from "./wje-routerx.js";
-import { default as default68 } from "./wje-router-link.js";
-import { default as default69 } from "./wje-router-outlet.js";
-import { default as default70 } from "./wje-row.js";
-import { default as default71 } from "./wje-select.js";
-import { default as default72 } from "./wje-slider.js";
-import { default as default73 } from "./wje-split-view.js";
-import { default as default74 } from "./wje-status.js";
-import { default as default75 } from "./wje-step.js";
-import { default as default76 } from "./wje-stepper.js";
+import { default as default58 } from "./wje-progress-bar.js";
+import { default as default59 } from "./wje-qr-code.js";
+import { default as default60 } from "./wje-radio.js";
+import { default as default61 } from "./wje-radio-group.js";
+import { default as default62 } from "./wje-rate.js";
+import { default as default63 } from "./wje-relative-time.js";
+import { default as default64 } from "./wje-reorder.js";
+import { default as default65 } from "./wje-reorder-dropzone.js";
+import { default as default66 } from "./wje-reorder-handle.js";
+import { default as default67 } from "./wje-reorder-item.js";
+import { default as default68 } from "./wje-route.js";
+import { default as default69 } from "./wje-routerx.js";
+import { default as default70 } from "./wje-router-link.js";
+import { default as default71 } from "./wje-router-outlet.js";
+import { default as default72 } from "./wje-row.js";
+import { default as default73 } from "./wje-select.js";
+import { default as default74 } from "./wje-slider.js";
+import { default as default75 } from "./wje-split-view.js";
+import { default as default76 } from "./wje-status.js";
+import { default as default77 } from "./wje-step.js";
+import { default as default78 } from "./wje-stepper.js";
 import { defaultStoreActions, store } from "./wje-store.js";
-import { default as default77 } from "./wje-tab.js";
-import { default as default78 } from "./wje-tab-group.js";
-import { default as default79 } from "./wje-tab-panel.js";
-import { default as default80 } from "./wje-textarea.js";
-import { default as default81 } from "./wje-thumbnail.js";
-import { default as default82 } from "./wje-toast.js";
-import { default as default83 } from "./wje-toggle.js";
-import { default as default84 } from "./wje-toolbar.js";
-import { default as default85 } from "./wje-toolbar-action.js";
-import { default as default86 } from "./wje-tooltip.js";
-import { default as default87 } from "./wje-visually-hidden.js";
+import { default as default79 } from "./wje-tab.js";
+import { default as default80 } from "./wje-tab-group.js";
+import { default as default81 } from "./wje-tab-panel.js";
+import { default as default82 } from "./wje-textarea.js";
+import { default as default83 } from "./wje-thumbnail.js";
+import { default as default84 } from "./wje-toast.js";
+import { default as default85 } from "./wje-toggle.js";
+import { default as default86 } from "./wje-toolbar.js";
+import { default as default87 } from "./wje-toolbar-action.js";
+import { default as default88 } from "./wje-tooltip.js";
+import { default as default89 } from "./wje-tree.js";
+import { default as default90 } from "./wje-tree-item.js";
+import { default as default91 } from "./wje-visually-hidden.js";
 import { I } from "./infinite-scroll.element-XVJukzjy.js";
 import { L } from "./list.element-Ce1vIm1O.js";
 import { P } from "./popup.element-tyYxow0p.js";
@@ -150,10 +154,15 @@ const enGb = {
   "wj.stepper.button.next": "Next",
   "wj.stepper.button.finish": "Finish",
   "wj.stepper.button.previous": "Previous",
-  "wj.stepper.step": "Step"
+  "wj.stepper.step": "Step",
+  "wj.pagination.of": "of",
+  "wj.pagination.first": "First page",
+  "wj.pagination.prev": "Previous",
+  "wj.pagination.next": "Next",
+  "wj.pagination.last": "Last page"
 };
 Localizer.registerTranslation(enGb);
-const styles$3 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n";
+const styles$1 = ".native-timeline {\n    position: relative;\n}\n\n.vertical-line {\n    position: absolute;\n    margin-left: calc(var(--wje-spacing-x-large) + 1px);\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background-color: var(--wje-color-info-3);\n}\n";
 class Timeline extends WJElement {
   /**
    * Creates an instance of Timeline.
@@ -171,7 +180,7 @@ class Timeline extends WJElement {
    * @returns {CSSStyleSheet} The CSS stylesheet
    */
   static get cssStyleSheet() {
-    return styles$3;
+    return styles$1;
   }
   /**
    * Sets up the attributes for the component.
@@ -199,7 +208,7 @@ class Timeline extends WJElement {
   }
 }
 Timeline.define("wje-timeline", Timeline);
-const styles$2 = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: 0.5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small);\n    height: var(--wje-size-small);\n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle);\n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}\n";
+const styles = ":host {\n    --wje-card-content-padding: var(--wje-spacing-medium);\n    margin-bottom: 0.5rem;\n    display: block;\n}\n\n.native-timeline-item > wje-icon {\n    color: var(--wje-color-contrast-5) !important;\n}\n\n.timeline-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.native-timeline-item {\n    display: flex;\n    position: relative;\n    padding: var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-medium) var(--wje-spacing-large);\n    gap: var(--wje-spacing-medium);\n    border-width: 1px;\n    border-style: solid;\n    border-color: transparent;\n    border-radius: var(--wje-border-radius-large);\n}\n\n:host .native-timeline-item:hover {\n    background-color: var(--wje-color-contrast-1);\n    border-color: var(--wje-color-contrast-3);\n}\n\n:host([active]) .native-timeline-item {\n    background-color: var(--wje-color-primary-1);\n    border-color: var(--wje-color-primary-3);\n}\n\n:host([active]) .native-timeline-item:hover {\n    background-color: var(--wje-color-primary-2);\n}\n\n.icon-container {\n    position: absolute;\n    display: flex;\n    width: var(--wje-size-small);\n    height: var(--wje-size-small);\n    padding: var(--wje-spacing-2x-small);\n    border-radius: var(--wje-border-radius-circle);\n    opacity: 0;\n}\n\n.content-container {\n    height: fit-content;\n    gap: var(--wje-spacing-small);\n}\n\n.event {\n    margin: 0;\n    font-size: var(--wje-font-size-large);\n    font-weight: var(--wje-font-weight-bold);\n    line-height: var(--wje-line-height-dense);\n    letter-spacing: var(--wje-spacing-4x-small);\n}\n\n.additional-content {\n    font-size: var(--wje-font-size-medium);\n    margin-top: 1rem;\n}\n\nwje-status {\n    position: relative;\n    z-index: 1;\n}\n\nwje-relative-time {\n    display: block;\n    margin-bottom: var(--wje-spacing-2x-small);\n}\n";
 class TimelineItem extends WJElement {
   constructor() {
     super();
@@ -215,7 +224,7 @@ class TimelineItem extends WJElement {
    * @returns {CSSStyleSheet}
    */
   static get cssStyleSheet() {
-    return styles$2;
+    return styles;
   }
   /**
    * Sets up the attributes for the component.
@@ -266,573 +275,103 @@ class TimelineItem extends WJElement {
   }
 }
 TimelineItem.define("wje-timeline-item", TimelineItem);
-const styles$1 = "/*\n[ WJ Tree ]\n*/\n\n:host {\n    position: relative;\n    width: 100%;\n    font-size: 0;\n}\n";
-class Tree extends WJElement {
-  /**
-   * Creates an instance of Toast.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "Tree");
-    /**
-     * Handles the click event triggered by the user interaction.
-     * Identifies the closest tree item element to the event target and sets it
-     * as the selected item. Ensures that only one item is selected at a time, resetting
-     * the selection state for all other items.
-     * @param {Event} e The click event object.
-     */
-    __publicField(this, "handleClick", (e) => {
-      let selectedItem = e.target.closest("wje-tree-item");
-      let isClickButton = e.composedPath().some((el) => {
-        var _a;
-        return (_a = el == null ? void 0 : el.classList) == null ? void 0 : _a.contains("toggle");
-      });
-      if (isClickButton)
-        return;
-      if (this.selection === "single") {
-        if (selectedItem) {
-          for (let item of this.getAllItems()) {
-            item.selected = item === selectedItem;
-          }
-        }
-      } else if (this.selection === "multiple") {
-        selectedItem.selected = !selectedItem.selected;
-        this.updateCheckboxState(selectedItem);
-      }
-    });
-  }
-  /**
-   * Sets the selection attribute for the element.
-   * @param {string} value The value to set as the selection attribute.
-   */
-  set selection(value) {
-    this.setAttribute("selection", value);
-  }
-  /**
-   * Gets the current selection mode for the element.
-   * If no selection is explicitly set, it defaults to 'single'.
-   * @returns {string} The current selection mode, either set by the element's attribute or the default value 'single'.
-   */
-  get selection() {
-    return this.getAttribute("selection") || "single";
-  }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
-  static get cssStyleSheet() {
-    return styles$1;
-  }
-  /**
-   * Setup attributes for the Button element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * A method called before the drawing or rendering process of tree items.
-   * It iterates through all `wje-tree-item` elements, updating their selection state
-   * and managing their expand/collapse icons accordingly.
-   * @returns {void} This method does not return a value.
-   */
-  beforeDraw() {
-    const items = this.querySelectorAll("wje-tree-item");
-    items == null ? void 0 : items.forEach((item) => {
-      item.selection = this.selection;
-      this.getExpandCollapseIcon(item, "expand");
-      this.getExpandCollapseIcon(item, "collapse");
-    });
-  }
-  /**
-   * Draw method for the toast notification.
-   * @returns {object} Document fragment
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-tree");
-    let slot = document.createElement("slot");
-    native.appendChild(slot);
-    fragment.appendChild(native);
-    return fragment;
-  }
-  /**
-   * Called after the draw process of the component is completed.
-   * Typically used to add event listeners or perform operations
-   * that are dependent on the component's drawn state.
-   * @returns {void} This method does not return a value.
-   */
-  afterDraw() {
-    this.addEventListener("click", this.handleClick);
-  }
-  /**
-   * Retrieves all items that match the selector 'wje-tree-item' within the current context.
-   * @returns {Array<Element>} An array of all matching DOM elements.
-   */
-  getAllItems() {
-    return [...this.querySelectorAll("wje-tree-item")];
-  }
-  /**
-   * Retrieves and appends an expand/collapse icon to a given item based on the provided status.
-   * @param {HTMLElement} item The DOM element to which the icon will be appended.
-   * @param {string} status The status indicating which icon to retrieve (e.g., "expand" or "collapse").
-   * @returns {void} This method does not return a value. If the icon matching the given status is not found, a warning is logged.
-   */
-  getExpandCollapseIcon(item, status) {
-    let icon = this.querySelector(`[slot="${status}"]`);
-    if (!icon) {
-      console.warn(`Icon with slot "${status}" was not found.`);
-      return;
-    }
-    let iconClone = icon.cloneNode(true);
-    item.appendChild(iconClone);
-  }
-  /**
-   * Updates the state of a checkbox, syncing the state both upwards to parent elements
-   * and downwards to child elements as necessary.
-   * @param {object} changedItem The specific item whose checkbox state has changed.
-   * @param {boolean} [isInitialSync] Indicates whether the state update is part of the initial synchronization process.
-   * @returns {void} This method does not return a value.
-   */
-  updateCheckboxState(changedItem, isInitialSync = false) {
-    this.isInitialSync = isInitialSync;
-    this.propagateStateDownwards(changedItem);
-    this.propagateStateUpwards(changedItem);
-  }
-  /**
-   * Updates the state of the parent item based on the state of its child items.
-   * Recursively propagates changes up to all parent items to reflect the selection
-   * or indeterminate state accurately.
-   * @param {object} item The current tree item whose parent state needs to be updated.
-   * It is expected to have properties `selected`, `indeterminate`,
-   * and a method `getChildrenItems({ includeDisabled: boolean })`.
-   * @returns {void} This method does not return a value.
-   */
-  updateParentState(item) {
-    var _a;
-    const children = item.getChildrenItems({ includeDisabled: false });
-    if (children.length) {
-      const areAllChildrenChecked = children.every((child) => child.selected);
-      const areSomeChildrenChecked = children.some((child) => child.selected);
-      const areSomeChildrenIndeterminate = children.some((child) => child.indeterminate);
-      item.selected = areAllChildrenChecked;
-      item.indeterminate = areSomeChildrenIndeterminate || areSomeChildrenChecked && !areAllChildrenChecked;
-    } else {
-      item.indeterminate = false;
-    }
-    const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
-    if (parent) {
-      this.updateParentState(parent);
-    }
-  }
-  /**
-   * Propagates the state changes of an item upwards through its ancestors in the hierarchy.
-   * Calls the `updateParentState` method for each parent element until no parent exists.
-   * @param {HTMLElement} item The current item whose state to propagate to its parent.
-   * @returns {void} This method does not return a value.
-   */
-  propagateStateUpwards(item) {
-    var _a;
-    const parent = (_a = item.parentElement) == null ? void 0 : _a.closest("wje-tree-item");
-    if (parent) {
-      this.updateParentState(parent);
-      this.propagateStateUpwards(parent);
-    }
-  }
-  /**
-   * Propagates the selected state of an item to its children recursively. Depending on the `isInitialSync` flag,
-   * it also determines how the state should be applied to the child items and updates the parent state if needed.
-   * @param {object} item The item whose state is being propagated to its child items. The item must have properties
-   * such as `selected` and methods like `getChildrenItems` to retrieve its child elements.
-   * @returns {void} This method does not return a value.
-   */
-  propagateStateDownwards(item) {
-    const isChecked = item.selected;
-    item.getChildrenItems().forEach((child) => {
-      child.selected = this.isInitialSync ? isChecked || child.selected : !child.disabled && isChecked;
-      this.propagateStateDownwards(child);
-    });
-    if (this.isInitialSync) {
-      this.updateParentState(item);
-    }
-  }
-}
-Tree.define("wje-tree", Tree);
-const styles = '/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n\n            /*--toggle-width: var(--wje-tree-item-indent);*/\n            /*--spacer-col: var(--wje-tree-item-indent);*/\n\n            /*display: grid;*/\n            /*grid-template-columns: var(--spacer-col) var(--wje-tree-item-indent) 1fr;*/\n            /*grid-template-areas: "indent toggle content";*/\n\n            padding-inline: var(--wje-spacing-3x-small);\n            padding-block: var(--wje-spacing-3x-small);\n            border-radius: var(--wje-tree-item-border-radius);\n            /*padding-left: var(--wje-tree-item-indent);*/\n            &:hover {\n                background-color: var(--wje-color-contrast-1);\n            }\n            .indent {\n                /*grid-area: indent;*/\n                display: block;\n                /*width: var(--wje-tree-item-indent);*/\n                width: 1em;\n            }\n            .toggle {\n                font-size: var(--wje-font-size-medium);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n                /*grid-area: toggle;*/\n            }\n            wje-checkbox {\n                font-size: var(--wje-font-size-medium);\n                margin: 0;\n            }\n            .content {\n                font-size: var(--wje-font-size-medium);\n                grid-area: content;\n            }\n            slot {\n                display: flex;\n                align-items: center;\n            }\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n        }\n        .children {\n            font-size: calc(1em + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            display: none;\n            &.open {\n                display: block;\n\n                ::before {\n                    content: "";\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name="expand"], .native-tree-item:not(.expanded) slot[name="collapse"] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-color-contrast-2);\n    }\n}';
-class TreeItem extends WJElement {
-  /**
-   * Creates an instance of Toast.
-   */
-  constructor() {
-    super();
-    /**
-     * The class name for the component.
-     * @type {string}
-     */
-    __publicField(this, "className", "TreeItem");
-    this._selection = "single";
-  }
-  /**
-   * Sets the expanded state of the element. When set to a truthy value,
-   * the 'expanded' attribute will be added to the element. When set to a falsy
-   * value, the 'expanded' attribute will be removed.
-   * @param {boolean} value A boolean value indicating whether the
-   * element should be expanded (true) or collapsed (false).
-   */
-  set expanded(value) {
-    if (value) {
-      this.setAttribute("expanded", "");
-    } else {
-      this.removeAttribute("expanded");
-    }
-  }
-  /**
-   * Retrieves the value of the 'expanded' state for the current element.
-   * This getter checks whether the 'expanded' attribute is present on the element.
-   * If the attribute exists, it returns true, representing that the element is expanded.
-   * Otherwise, it returns false, indicating that the element is not expanded.
-   * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.
-   */
-  get expanded() {
-    return this.hasAttribute("expanded");
-  }
-  /**
-   * Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.
-   * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.
-   */
-  set selected(value) {
-    this.removeAttribute("selected");
-    if (value)
-      this.setAttribute("selected", "");
-  }
-  /**
-   * Getter method for determining if the 'selected' attribute is present on the element.
-   * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.
-   */
-  get selected() {
-    return this.hasAttribute("selected");
-  }
-  /**
-   * Sets the selection mode for the component.
-   * @param {string} value The selection mode to apply. Defaults to 'single'
-   * if no value is provided. Possible options may be
-   * specific to the implementation of the component
-   * (e.g., 'single', 'multiple').
-   */
-  set selection(value) {
-    this._selection = value || "single";
-  }
-  /**
-   * Retrieves the current selection.
-   * @returns {*} The value of the current selection.
-   */
-  get selection() {
-    return this._selection;
-  }
-  /**
-   * Sets or removes the 'indeterminate' attribute based on the provided value.
-   * This can be used to visually indicate an indeterminate state for elements like checkboxes.
-   * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.
-   * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.
-   */
-  set indeterminate(value) {
-    this.removeAttribute("indeterminate");
-    if (value)
-      this.setAttribute("indeterminate", "");
-  }
-  /**
-   * Retrieves the state of the indeterminate attribute.
-   * @returns {boolean} True if the indeterminate attribute is present, otherwise false.
-   */
-  get indeterminate() {
-    return this.hasAttribute("indeterminate");
-  }
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @static
-   * @returns {CSSStyleSheet} The CSS stylesheet
-   */
-  static get cssStyleSheet() {
-    return styles;
-  }
-  /**
-   * Setup attributes for the Button element.
-   */
-  setupAttributes() {
-    this.isShadowRoot = "open";
-  }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
-  static get observedAttributes() {
-    return ["selected", "indeterminate"];
-  }
-  /**
-   * Handles updates when observed attributes of the element are changed.
-   * Updates the checkbox state based on changes to the "selected" or "indeterminate" attributes.
-   * @param {string} name The name of the attribute that was changed.
-   * @param {string|null} oldValue The previous value of the attribute before the change.
-   * @param {string|null} newValue The new value of the attribute after the change.
-   * @returns {void}
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (name === "selected") {
-      this.checkbox.removeAttribute("indeterminate");
-      if (this.selected) {
-        this.checkbox.setAttribute("checked", "");
-      } else {
-        this.checkbox.removeAttribute("checked");
-      }
-    }
-    if (name === "indeterminate" && !this.selected) {
-      this.checkbox.removeAttribute("indeterminate");
-      this.checkbox.removeAttribute("checked");
-      if (this.indeterminate)
-        this.checkbox.setAttribute("indeterminate", "");
-    }
-  }
-  /**
-   * Custom logic executed before the draw process begins.
-   * Determines and sets the appropriate slot if the current item is nested.
-   * @returns {void} No return value.
-   */
-  beforeDraw() {
-    if (this.isNestedItem())
-      this.slot = "children";
-  }
-  /**
-   * Creates and returns a document fragment representing the structure of a tree item component.
-   * The method constructs the DOM elements including the native container, indentation, toggle button,
-   * selection checkbox, label, and children container, along with their respective slots and attributes.
-   * It dynamically handles the creation of expand and collapse icons, as well as appending slots for
-   * child components.
-   * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.
-   */
-  draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.setAttribute("part", "native");
-    native.classList.add("native-tree-item", this.selection === "multiple" ? "multiple" : "single");
-    let item = document.createElement("div");
-    item.classList.add("item");
-    let indent = document.createElement("div");
-    indent.classList.add("indent");
-    let button = document.createElement("div");
-    button.classList.add("toggle");
-    let checkbox = document.createElement("wje-checkbox");
-    if (this.selected)
-      checkbox.setAttribute("checked", "");
-    let label = document.createElement("div");
-    label.classList.add("content");
-    let slotElement = document.createElement("slot");
-    let children = document.createElement("div");
-    children.classList.add("children");
-    let slot = document.createElement("slot");
-    slot.setAttribute("name", "children");
-    children.appendChild(slot);
-    item.appendChild(indent);
-    if (this.querySelectorAll(":scope > wje-tree-item").length > 0) {
-      if (this.querySelectorAll('[slot="expand"]').length < 1) {
-        let expandIcon = document.createElement("wje-icon");
-        expandIcon.setAttribute("name", "chevron-right");
-        expandIcon.setAttribute("slot", "expand");
-        this.appendChild(expandIcon);
-      }
-      if (this.querySelectorAll('[slot="collapse"]').length < 1) {
-        let collapseIcon = document.createElement("wje-icon");
-        collapseIcon.setAttribute("name", "chevron-down");
-        collapseIcon.setAttribute("slot", "collapse");
-        this.appendChild(collapseIcon);
-      }
-      let expandSlot = document.createElement("slot");
-      expandSlot.setAttribute("name", "expand");
-      let collapseSlot = document.createElement("slot");
-      collapseSlot.setAttribute("name", "collapse");
-      button.appendChild(expandSlot);
-      button.appendChild(collapseSlot);
-    }
-    item.appendChild(button);
-    if (this.selection === "multiple")
-      item.appendChild(checkbox);
-    label.appendChild(slotElement);
-    item.appendChild(label);
-    native.appendChild(item);
-    native.appendChild(children);
-    fragment.appendChild(native);
-    this.checkbox = checkbox;
-    this.native = native;
-    this.button = button;
-    this.childrenElement = children;
-    this.childrenSlot = slot;
-    return fragment;
-  }
-  /**
-   * Executes operations to be performed after the draw action is completed.
-   * If the state indicates it is expanded, toggles its children.
-   * Additionally, sets up an event listener on the button element to handle toggling children upon click.
-   * @returns {void} Does not return a value.
-   */
-  afterDraw() {
-    if (this.expanded)
-      this.toggleChildren();
-    this.button.addEventListener("click", this.toggleChildren.bind(this));
-  }
-  /**
-   * Determines if the current item is a nested item within a tree structure.
-   * Checks if the item's parent element exists and is also a tree item.
-   * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
-   */
-  isNestedItem() {
-    const parent = this.parentElement;
-    return !!parent && this.isTreeItem(parent);
-  }
-  /**
-   * Checks whether the given node is a tree item.
-   * @param {object} node The node to check.
-   * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.
-   */
-  isTreeItem(node) {
-    return node instanceof Element && node.className === "TreeItem";
-  }
-  /**
-   * Toggles the visibility state of the children element and updates the class of the parent element.
-   * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,
-   * effectively showing or hiding the children and indicating the expanded state.
-   * @returns {void} Does not return a value.
-   */
-  toggleChildren() {
-    this.childrenElement.classList.toggle("open");
-    this.native.classList.toggle("expanded");
-  }
-  /**
-   * Retrieves the child items from the `childrenSlot` that match specific criteria.
-   * @param {object} [options] Configuration options.
-   * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.
-   * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.
-   */
-  getChildrenItems(options = {}) {
-    const includeDisabled = options.includeDisabled ?? true;
-    if (!this.childrenSlot) {
-      return [];
-    }
-    return [...this.childrenSlot.assignedElements({ flatten: true })].filter((item) => this.isTreeItem(item) && (includeDisabled || !item.disabled));
-  }
-  /**
-   * Retrieves all descendant children of the current object in a flattened array structure.
-   * @param {object} [options] An optional object specifying filters or configurations for retrieving children.
-   * @returns {Array} An array containing all children and their descendants in a flat structure.
-   */
-  getAllChildrenFlat(options = {}) {
-    const directChildren = this.getChildrenItems(options);
-    return directChildren.flatMap(
-      (child) => [child, ...child.getAllChildrenFlat(options)]
-    );
-  }
-}
-TreeItem.define("wje-tree-item", TreeItem);
 export {
-  default3 as Accordion,
-  default4 as AccordionItem,
-  default5 as Animation,
-  default6 as Aside,
-  default7 as Avatar,
-  default8 as Badge,
-  default9 as Breadcrumb,
-  default10 as Breadcrumbs,
-  default11 as Button,
-  default12 as ButtonGroup,
-  default13 as Card,
-  default14 as CardContent,
-  default15 as CardControls,
-  default16 as CardHeader,
-  default17 as CardSubtitle,
-  default18 as CardTitle,
-  default19 as Carousel,
-  default20 as CarouselItem,
-  default21 as Checkbox,
-  default22 as Chip,
-  default23 as Col,
-  default24 as ColorPicker,
-  default25 as Container,
-  default26 as CopyButton,
-  default27 as Dialog,
-  default28 as Divider,
-  default29 as Dropdown,
-  default30 as FileUpload,
-  default31 as FileUploadItem,
-  default32 as Footer,
-  default33 as FormatDigital,
-  default34 as Grid,
-  default35 as Header,
-  default36 as Icon,
-  default37 as IconPicker,
-  default38 as Img,
-  default39 as ImgComparer,
+  default4 as Accordion,
+  default5 as AccordionItem,
+  default6 as Animation,
+  default7 as Aside,
+  default8 as Avatar,
+  default9 as Badge,
+  default10 as Breadcrumb,
+  default11 as Breadcrumbs,
+  default12 as Button,
+  default13 as ButtonGroup,
+  default14 as Card,
+  default15 as CardContent,
+  default16 as CardControls,
+  default17 as CardHeader,
+  default18 as CardSubtitle,
+  default19 as CardTitle,
+  default20 as Carousel,
+  default21 as CarouselItem,
+  default22 as Checkbox,
+  default23 as Chip,
+  default24 as Col,
+  default25 as ColorPicker,
+  default26 as Container,
+  default27 as CopyButton,
+  default28 as Dialog,
+  default29 as Divider,
+  default30 as Dropdown,
+  default31 as FileUpload,
+  default32 as FileUploadItem,
+  default33 as Footer,
+  default34 as FormatDigital,
+  default35 as Grid,
+  default36 as Header,
+  default37 as Icon,
+  default38 as IconPicker,
+  default39 as Img,
+  default40 as ImgComparer,
   I as InfiniteScroll,
-  default40 as Input,
-  default41 as InputFile,
-  default42 as Item,
-  default43 as Kanban,
-  default44 as Label,
+  default41 as Input,
+  default42 as InputFile,
+  default43 as Item,
+  default44 as Kanban,
+  default45 as Label,
+  default2 as LevelIndicator,
   L as List,
   Localizer,
-  default45 as Main,
-  default46 as Masonry,
-  default47 as Menu,
-  default48 as MenuButton,
-  default49 as MenuItem,
-  default50 as MenuLabel,
-  default51 as Option,
-  default52 as Options,
-  default53 as Orgchart,
-  default54 as OrgchartGroup,
-  default55 as OrgchartItem,
+  default46 as Main,
+  default47 as Masonry,
+  default48 as Menu,
+  default49 as MenuButton,
+  default50 as MenuItem,
+  default51 as MenuLabel,
+  default52 as Option,
+  default53 as Options,
+  default54 as Orgchart,
+  default55 as OrgchartGroup,
+  default56 as OrgchartItem,
+  default57 as Pagination,
   P as Popup,
-  default56 as ProgressBar,
-  default57 as QrCode,
-  default58 as Radio,
-  default59 as RadioGroup,
-  default60 as Rate,
-  default61 as RelativeTime,
-  default62 as Reorder,
-  default63 as ReorderDropzone,
-  default64 as ReorderHandle,
-  default65 as ReorderItem,
-  default66 as Route,
-  default68 as RouterLink,
-  default69 as RouterOutlet,
-  default67 as Routerx,
-  default70 as Row,
-  default71 as Select,
-  default72 as Slider,
-  default2 as SlidingContainer,
-  default73 as SplitView,
-  default74 as Status,
-  default75 as Step,
-  default76 as Stepper,
-  default77 as Tab,
-  default78 as TabGroup,
-  default79 as TabPanel,
-  default80 as Textarea,
-  default81 as Thumbnail,
+  default58 as ProgressBar,
+  default59 as QrCode,
+  default60 as Radio,
+  default61 as RadioGroup,
+  default62 as Rate,
+  default63 as RelativeTime,
+  default64 as Reorder,
+  default65 as ReorderDropzone,
+  default66 as ReorderHandle,
+  default67 as ReorderItem,
+  default68 as Route,
+  default70 as RouterLink,
+  default71 as RouterOutlet,
+  default69 as Routerx,
+  default72 as Row,
+  default73 as Select,
+  default74 as Slider,
+  default3 as SlidingContainer,
+  default75 as SplitView,
+  default76 as Status,
+  default77 as Step,
+  default78 as Stepper,
+  default79 as Tab,
+  default80 as TabGroup,
+  default81 as TabPanel,
+  default82 as Textarea,
+  default83 as Thumbnail,
   Timeline,
   TimelineItem,
-  default82 as Toast,
-  default83 as Toggle,
-  default84 as Toolbar,
-  default85 as ToolbarAction,
-  default86 as Tooltip,
-  Tree,
-  TreeItem,
-  default87 as VisuallyHidden,
+  default84 as Toast,
+  default85 as Toggle,
+  default86 as Toolbar,
+  default87 as ToolbarAction,
+  default88 as Tooltip,
+  default89 as Tree,
+  default90 as TreeItem,
+  default91 as VisuallyHidden,
   WJElement,
   WjePermissionsApi,
   b as bindRouterLinks,