wj-elements 0.1.138 → 0.1.140

package/dist/light.css

@@ -528,7 +528,8 @@
     --wje-tooltip-spacing: var(--wje-spacing-x-small);
     --wje-tooltip-border-radius: var(--wje-border-radius-medium);
 
-    /* Tree */
-    --wje-tree-item-indent: 1.3rem;
+    /* Tree - Item */
+    --wje-tree-item-indent: var(--wje-spacing-large);
     --wje-tree-item-indent-guid-width: 0px;
+    --wje-tree-item-border-radius: var(--wje-border-radius-medium);
 }

package/dist/localize.js

@@ -3,6 +3,7 @@ class LocalizerDefault {
     this.element = element;
     this.lang = this.element.lang || document.documentElement.lang || "en-gb";
     this.dir = this.element.dir || document.documentElement.dir || "ltr";
+    this.currentLang = "en-gb";
     this.setLanguage();
   }
   get languages() {
@@ -10,7 +11,8 @@ class LocalizerDefault {
   }
   // Nastavenie aktuálneho jazyka
   setLanguage() {
-    if (this.languages.has(this.lang)) {
+    var _a;
+    if ((_a = this.languages) == null ? void 0 : _a.has(this.lang)) {
       this.currentLang = this.lang;
     } else {
       console.error(`Language "${this.lang}" not loaded.`);
@@ -18,9 +20,9 @@ class LocalizerDefault {
   }
   // Vyhľadávanie prekladu podľa kľúča
   translate(key) {
-    console.log("TRANSLATE:", this.element.lang, this.lang, this.currentLang, key);
-    const langMap = this.languages.get(this.currentLang);
-    console.log("LANG MAP:", langMap);
+    var _a;
+    const langMap = (_a = this.languages) == null ? void 0 : _a.get(this.currentLang);
+    if (!langMap) return key;
     return langMap ? langMap[key] || key : key;
   }
   // Vyhľadávanie prekladu podľa kľúča a typu čísla

package/dist/localize.js.map

@@ -1 +1 @@
-{"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n    constructor(element) {\n        this.element = element;\n\n        this.lang = this.element.lang || document.documentElement.lang || 'en-gb';\n        this.dir = this.element.dir || document.documentElement.dir || 'ltr';\n\n        this.setLanguage();\n    }\n\n    get languages() {\n        return window.translations;\n    }\n\n    // Nastavenie aktuálneho jazyka\n    setLanguage() {\n        if (this.languages.has(this.lang)) {\n            this.currentLang = this.lang;\n        } else {\n            console.error(`Language \"${this.lang}\" not loaded.`);\n        }\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča\n    translate(key) {\n        console.log(\"TRANSLATE:\",this.element.lang, this.lang, this.currentLang, key);\n        const langMap = this.languages.get(this.currentLang);\n        console.log(\"LANG MAP:\", langMap);\n        return langMap ? langMap[key] || key : key;\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča a typu čísla\n    translatePlural(key, count = 0, type = 'cardinal') {\n        const plural = new Intl.PluralRules(this.lang, { type: type });\n\n        if (count !== undefined) key += '.' + plural.select(count);\n\n        return this.translate(key);\n    }\n\n    // Formátovanie čísla podľa aktuálneho jazyka\n    formatNumber(number, options) {\n        return new Intl.NumberFormat(this.currentLang, options).format(number);\n    }\n\n    // Formátovanie dátumu podľa aktuálneho jazyka\n    formatDate(date) {\n        return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));\n    }\n\n    relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n        lang = lang || this.currentLang;\n        return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n    }\n}\n\nexport function registerTranslation(...translation) {\n    translation.forEach((t) => {\n        if (!t.code) {\n            console.error(\"Translation object is missing 'code' property:\", t);\n            return;\n        }\n\n        const code = t.code.toLowerCase();\n        if (window.translations.has(code)) {\n            window.translations.set(code, { ...window.translations.get(code), ...t });\n        } else {\n            window.translations.set(code, t);\n        }\n    });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n    constructor(element) {\n        super(element);\n    }\n    static registerTranslation(...translation) {\n        registerTranslation(...translation);\n    }\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AACjB,SAAK,UAAU;AAEf,SAAK,OAAO,KAAK,QAAQ,QAAQ,SAAS,gBAAgB,QAAQ;AAClE,SAAK,MAAM,KAAK,QAAQ,OAAO,SAAS,gBAAgB,OAAO;AAE/D,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AACV,QAAI,KAAK,UAAU,IAAI,KAAK,IAAI,GAAG;AAC/B,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA,EAGI,UAAU,KAAK;AACX,YAAQ,IAAI,cAAa,KAAK,QAAQ,MAAM,KAAK,MAAM,KAAK,aAAa,GAAG;AAC5E,UAAM,UAAU,KAAK,UAAU,IAAI,KAAK,WAAW;AACnD,YAAQ,IAAI,aAAa,OAAO;AAChC,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA,EAGI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA,EAGI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA,EAGI,WAAW,MAAM;AACb,WAAO,IAAI,KAAK,eAAe,KAAK,WAAW,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EAC9E;AAAA,EAEI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACtEO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}
+{"version":3,"file":"localize.js","sources":["../packages/localize/localize.js","../packages/utils/localize.js"],"sourcesContent":["// export const translations = new Map();\n\nexport class LocalizerDefault {\n    constructor(element) {\n        this.element = element;\n\n        this.lang = this.element.lang || document.documentElement.lang || 'en-gb';\n        this.dir = this.element.dir || document.documentElement.dir || 'ltr';\n        this.currentLang = 'en-gb';\n\n        this.setLanguage();\n    }\n\n    get languages() {\n        return window.translations;\n    }\n\n    // Nastavenie aktuálneho jazyka\n    setLanguage() {\n        if (this.languages?.has(this.lang)) {\n            this.currentLang = this.lang;\n        } else {\n            console.error(`Language \"${this.lang}\" not loaded.`);\n        }\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča\n    translate(key) {\n        const langMap = this.languages?.get(this.currentLang);\n        if (!langMap) return key;\n        return langMap ? langMap[key] || key : key;\n    }\n\n    // Vyhľadávanie prekladu podľa kľúča a typu čísla\n    translatePlural(key, count = 0, type = 'cardinal') {\n        const plural = new Intl.PluralRules(this.lang, { type: type });\n\n        if (count !== undefined) key += '.' + plural.select(count);\n\n        return this.translate(key);\n    }\n\n    // Formátovanie čísla podľa aktuálneho jazyka\n    formatNumber(number, options) {\n        return new Intl.NumberFormat(this.currentLang, options).format(number);\n    }\n\n    // Formátovanie dátumu podľa aktuálneho jazyka\n    formatDate(date) {\n        return new Intl.DateTimeFormat(this.currentLang).format(new Date(date));\n    }\n\n    relativeTime(lang, value = 0, unit = 'day', options = { numeric: 'auto' }) {\n        lang = lang || this.currentLang;\n        return new Intl.RelativeTimeFormat(lang, options).format(value, unit);\n    }\n}\n\nexport function registerTranslation(...translation) {\n    translation.forEach((t) => {\n        if (!t.code) {\n            console.error(\"Translation object is missing 'code' property:\", t);\n            return;\n        }\n\n        const code = t.code.toLowerCase();\n        if (window.translations.has(code)) {\n            window.translations.set(code, { ...window.translations.get(code), ...t });\n        } else {\n            window.translations.set(code, t);\n        }\n    });\n}\n","import { LocalizerDefault, registerTranslation } from '../localize/localize.js';\n\nexport class Localizer extends LocalizerDefault {\n    constructor(element) {\n        super(element);\n    }\n    static registerTranslation(...translation) {\n        registerTranslation(...translation);\n    }\n}\n"],"names":[],"mappings":"AAEO,MAAM,iBAAiB;AAAA,EAC1B,YAAY,SAAS;AACjB,SAAK,UAAU;AAEf,SAAK,OAAO,KAAK,QAAQ,QAAQ,SAAS,gBAAgB,QAAQ;AAClE,SAAK,MAAM,KAAK,QAAQ,OAAO,SAAS,gBAAgB,OAAO;AAC/D,SAAK,cAAc;AAEnB,SAAK,YAAa;AAAA,EAC1B;AAAA,EAEI,IAAI,YAAY;AACZ,WAAO,OAAO;AAAA,EACtB;AAAA;AAAA,EAGI,cAAc;AAlBlB;AAmBQ,SAAI,UAAK,cAAL,mBAAgB,IAAI,KAAK,OAAO;AAChC,WAAK,cAAc,KAAK;AAAA,IACpC,OAAe;AACH,cAAQ,MAAM,aAAa,KAAK,IAAI,eAAe;AAAA,IAC/D;AAAA,EACA;AAAA;AAAA,EAGI,UAAU,KAAK;AA3BnB;AA4BQ,UAAM,WAAU,UAAK,cAAL,mBAAgB,IAAI,KAAK;AACzC,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,UAAU,QAAQ,GAAG,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA,EAGI,gBAAgB,KAAK,QAAQ,GAAG,OAAO,YAAY;AAC/C,UAAM,SAAS,IAAI,KAAK,YAAY,KAAK,MAAM,EAAE,MAAY;AAE7D,QAAI,UAAU,OAAW,QAAO,MAAM,OAAO,OAAO,KAAK;AAEzD,WAAO,KAAK,UAAU,GAAG;AAAA,EACjC;AAAA;AAAA,EAGI,aAAa,QAAQ,SAAS;AAC1B,WAAO,IAAI,KAAK,aAAa,KAAK,aAAa,OAAO,EAAE,OAAO,MAAM;AAAA,EAC7E;AAAA;AAAA,EAGI,WAAW,MAAM;AACb,WAAO,IAAI,KAAK,eAAe,KAAK,WAAW,EAAE,OAAO,IAAI,KAAK,IAAI,CAAC;AAAA,EAC9E;AAAA,EAEI,aAAa,MAAM,QAAQ,GAAG,OAAO,OAAO,UAAU,EAAE,SAAS,UAAU;AACvE,WAAO,QAAQ,KAAK;AACpB,WAAO,IAAI,KAAK,mBAAmB,MAAM,OAAO,EAAE,OAAO,OAAO,IAAI;AAAA,EAC5E;AACA;AAEO,SAAS,uBAAuB,aAAa;AAChD,cAAY,QAAQ,CAAC,MAAM;AACvB,QAAI,CAAC,EAAE,MAAM;AACT,cAAQ,MAAM,kDAAkD,CAAC;AACjE;AAAA,IACZ;AAEQ,UAAM,OAAO,EAAE,KAAK,YAAa;AACjC,QAAI,OAAO,aAAa,IAAI,IAAI,GAAG;AAC/B,aAAO,aAAa,IAAI,MAAM,EAAE,GAAG,OAAO,aAAa,IAAI,IAAI,GAAG,GAAG,EAAC,CAAE;AAAA,IACpF,OAAe;AACH,aAAO,aAAa,IAAI,MAAM,CAAC;AAAA,IAC3C;AAAA,EACA,CAAK;AACL;ACtEO,MAAM,kBAAkB,iBAAiB;AAAA,EAC5C,YAAY,SAAS;AACjB,UAAM,OAAO;AAAA,EACrB;AAAA,EACI,OAAO,uBAAuB,aAAa;AACvC,wBAAoB,GAAG,WAAW;AAAA,EAC1C;AACA;"}

package/dist/packages/localize/localize.d.ts

@@ -4,9 +4,9 @@ export class LocalizerDefault {
     element: any;
     lang: any;
     dir: any;
+    currentLang: string;
     get languages(): any;
     setLanguage(): void;
-    currentLang: any;
     translate(key: any): any;
     translatePlural(key: any, count?: number, type?: string): any;
     formatNumber(number: any, options: any): string;

package/dist/packages/wje-file-upload-item/file-upload-item.element.d.ts

@@ -39,12 +39,14 @@ export default class FileUploadItem extends WJElement {
      */
     dependencies: object;
     /**
-     * Called when an observed attribute has been added, removed, updated, or replaced.
-     * @param {string} name The name of the attribute that has changed.
-     * @param {string} oldValue The old value of the attribute.
-     * @param {string} newValue The new value of the attribute.
+     * Handles updates to the attributes of a custom element whenever one of the observed attributes is changed.
+     * Updates the related elements based on the changed attribute and its new value.
+     * @param {string} name The name of the attribute being changed.
+     * @param {string | null} oldValue The previous value of the attribute before the change, or null if the attribute was not previously set.
+     * @param {string | null} newValue The new value of the attribute after the change, or null if the attribute is being removed.
+     * @returns {void} Does not return a value.
      */
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /**
      * Method to draw the component on the screen.
      * @returns {DocumentFragment} The fragment containing the component.

package/dist/packages/wje-tree/tree.element.d.ts

@@ -1,7 +1,14 @@
 import { default as WJElement } from '../wje-element/element.js';
 /**
- * Represents a custom Tree component that extends the functionality of WJElement.
- * This component is used to create a hierarchical tree structure with selectable items.
+ * `Tree` is a custom web component that represents a hierarchical tree structure.
+ * It extends from `WJElement`.
+ * @summary This element visually represents a tree structure, supporting single or multiple selection modes and hierarchy management.
+ * @documentation https://elements.webjet.sk/components/tree
+ * @status stable
+ * @augments {WJElement}
+ * @csspart native - The native container part of the tree.
+ * @slot - The default slot to place `wje-tree-item` child components.
+ * @tag wje-tree
  */
 export default class Tree extends WJElement {
     /**
@@ -10,9 +17,24 @@ export default class Tree extends WJElement {
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Sets the selection attribute for the element.
+     * @param {string} value The value to set as the selection attribute.
+     */
     set selection(value: string);
+    /**
+     * 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(): string;
-    beforeDraw(context: any, appStoreObj: any, params: any): void;
+    /**
+     * 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(): void;
     /**
      * Draw method for the toast notification.
      * @returns {object} Document fragment
@@ -45,4 +67,38 @@ export default class Tree extends WJElement {
      * @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: HTMLElement, status: string): void;
+    /**
+     * 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: object, isInitialSync?: boolean): void;
+    isInitialSync: boolean;
+    /**
+     * 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: object): void;
+    /**
+     * 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: HTMLElement): void;
+    /**
+     * 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: object): void;
 }

package/dist/packages/wje-tree-item/tree-item.element.d.ts

@@ -1,48 +1,155 @@
-import { default as WJElement } from '../wje-element/element.js';
 /**
- * `Toast` is a custom web component that represents a toast notification.
- * @summary This element represents a toast notification.
- * @documentation https://elements.webjet.sk/components/toast
+ * `wje-tree-item` is a custom web component used as a child of the `wje-tree`.
+ * It represents a node within a tree structure, capable of nesting other items.
+ * @summary Represents a single item in a tree structure.
+ * @documentation https://elements.webjet.sk/components/tree-item
  * @status stable
- * @augments {WJElement}
- * @csspart native - The native part
- * @cssproperty {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.
- * @cssproperty {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.
- * @cssproperty {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.
- * @cssproperty {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.
- * @cssproperty {string} color - Defines the color of the toast. Accepts any valid CSS color value such as `hex`, `RGB`, or named colors.
- * @cssproperty {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.
- * @slot - The content of the toast.
- * @slot media - The media of the toast.
- * // @fires wje-toast:after-show - Fired after the toast is shown.
- * // @fires wje-toast:after-hide - Fired after the toast is hidden.
+ * @augments {HTMLElement}
+ * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).
+ * @csspart native - The native container of the tree item.
+ * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.
+ * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.
+ * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.
+ * @tag wje-tree-item
  */
-export default class TreeItem extends WJElement {
+export default class TreeItem extends HTMLElement {
     /**
      * Returns the CSS stylesheet for the component.
      * @static
      * @returns {CSSStyleSheet} The CSS stylesheet
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @static
+     * @returns {Array<string>}
+     */
+    static get observedAttributes(): Array<string>;
     _selection: string;
+    /**
+     * 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: boolean);
+    /**
+     * 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(): boolean;
+    /**
+     * 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: boolean);
+    /**
+     * 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(): boolean;
+    /**
+     * 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: string);
-    get selection(): string;
-    beforeDraw(context: any, appStoreObj: any, params: any): void;
     /**
-     * Draw method for the toast notification.
-     * @returns {object} Document fragment
+     * Retrieves the current selection.
+     * @returns {*} The value of the current selection.
+     */
+    get selection(): any;
+    /**
+     * 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: boolean);
+    /**
+     * Retrieves the state of the indeterminate attribute.
+     * @returns {boolean} True if the indeterminate attribute is present, otherwise false.
+     */
+    get indeterminate(): boolean;
+    /**
+     * Setup attributes for the Button element.
      */
-    draw(): object;
+    setupAttributes(): void;
+    isShadowRoot: string;
+    /**
+     * 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: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * 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(): void;
+    /**
+     * 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(): DocumentFragment;
     checkbox: HTMLElement;
     native: HTMLDivElement;
     button: HTMLDivElement;
     childrenElement: HTMLDivElement;
     childrenSlot: HTMLSlotElement;
+    /**
+     * 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(): void;
+    /**
+     * 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(): boolean;
-    isTreeItem(node: any): boolean;
+    /**
+     * 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: object): boolean;
+    /**
+     * 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(): void;
-    getChildrenItems(options?: {}): Element[];
+    /**
+     * 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?: {
+        includeDisabled?: boolean;
+    }): any[];
+    /**
+     * 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?: object): any[];
 }

package/dist/wje-element.js

@@ -744,7 +744,7 @@ const _WJElement = class _WJElement extends HTMLElement {
    */
   async enqueueUpdate() {
     try {
-      if (this.renderPromise && this.renderPromise instanceof Promise) {
+      if (this.renderPromise && (this.renderPromise instanceof Promise || this.renderPromise.constructor.name === "Promise")) {
         await this.renderPromise;
       }
     } catch (e) {
@@ -836,7 +836,7 @@ const _WJElement = class _WJElement extends HTMLElement {
   async render() {
     this.drawingStatus = this.drawingStatuses.DRAWING;
     let _draw = this.draw(this.context, this.store, WjElementUtils.getAttributes(this));
-    if (_draw instanceof Promise) {
+    if (_draw instanceof Promise || _draw.constructor.name === "Promise") {
       _draw = await _draw;
     }
     let rend = _draw;
@@ -923,12 +923,12 @@ const _WJElement = class _WJElement extends HTMLElement {
     return new Promise(async (resolve, reject) => {
       var _a;
       const __beforeDraw = this.beforeDraw(this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__beforeDraw instanceof Promise) {
+      if (__beforeDraw instanceof Promise || __beforeDraw.constructor.name === "Promise") {
         await __beforeDraw;
       }
       await this.render();
       const __afterDraw = (_a = this.afterDraw) == null ? void 0 : _a.call(this, this.context, this.store, WjElementUtils.getAttributes(this));
-      if (__afterDraw instanceof Promise) {
+      if (__afterDraw instanceof Promise || __afterDraw.constructor.name === "Promise") {
         await __afterDraw;
       }
       this.finisPromise();