wj-elements 0.1.159 → 0.1.161

package/dist/{infinite-scroll.element-DUjjOm1e.js → infinite-scroll.element-Cj53cbpC.js}

@@ -53,6 +53,7 @@ class InfiniteScroll extends WJElement {
         this._loading = this.loadPages(this.currentPage);
       }
     });
+    __publicField(this, "compareFunction", (i, item) => i.id === item.id);
     /**
      * Converts a data item into an HTML element based on a template.
      * This function takes a data item, interpolates it into a predefined template,
@@ -76,6 +77,7 @@ class InfiniteScroll extends WJElement {
     __publicField(this, "customForeach", (data) => {
       data.forEach((item) => {
         let element = this.dataToHtml(item);
+        this._dataToElementWeakMap.set(element, item);
         event.addListener(element, "click", "wje-infinite-scroll:click-item", null);
         this.placementObj.insertAdjacentElement("beforeend", element);
       });
@@ -110,6 +112,10 @@ class InfiniteScroll extends WJElement {
     this._infiniteScrollTemplate = null;
     this._abortController = new AbortController();
     this._signal = this._abortController.signal;
+    this._dataToElementWeakMap = /* @__PURE__ */ new WeakMap();
+    this._drawnItems = [];
+    this._loadedItems = [];
+    this._actualDrawnIndex = 0;
   }
   /**
    * Dependencies of the InfiniteScroll component.
@@ -178,10 +184,20 @@ class InfiniteScroll extends WJElement {
    * @returns {void} No return value.
    */
   beforeDraw() {
-    var _a, _b;
+    var _a, _b, _c;
+    this._loadedItems = [];
+    this._drawnItems = [];
+    this._dataToElementWeakMap = /* @__PURE__ */ new WeakMap();
     this.iterate = this.querySelector("[iterate]");
-    this.infiniteScrollTemplate = (_a = this.iterate) == null ? void 0 : _a.outerHTML;
-    (_b = this.iterate) == null ? void 0 : _b.remove();
+    if (this.iterate) {
+      if (this.iterate.nodeName !== "TEMPLATE") {
+        console.error("The iterate attribute must be a template element");
+        this.infiniteScrollTemplate = (_a = this.iterate) == null ? void 0 : _a.outerHTML;
+      } else {
+        this.infiniteScrollTemplate = (_b = this.iterate) == null ? void 0 : _b.innerHTML;
+      }
+      (_c = this.iterate) == null ? void 0 : _c.remove();
+    }
     this.setAttribute("style", "height: " + this.height);
     if (this._signal) {
       this._abortController.abort();
@@ -291,7 +307,10 @@ class InfiniteScroll extends WJElement {
         if (this.hasAttribute("placement")) this.placementObj = this.querySelector(this.placement);
         event.dispatchCustomEvent(this, "wje-infinite-scroll:load", response);
         this.response = response;
-        this.customForeach(this.objectName ? response[this.objectName] : response);
+        this._loadedItems = this.objectName ? response[this.objectName] : response;
+        const notDrawnItems = this._loadedItems.filter((item) => !this._drawnItems.some(this.compareFunction.bind(this, item)));
+        this.customForeach(notDrawnItems);
+        this._drawnItems.push(...notDrawnItems);
         this.isLoading.push(page);
       } else {
         event.dispatchCustomEvent(this, "wje-infinite-scroll:complete");
@@ -303,8 +322,26 @@ class InfiniteScroll extends WJElement {
       this.hideLoader();
     }
   }
+  addItem(item, place = "beforeend") {
+    let element = this.dataToHtml(item);
+    this._dataToElementWeakMap.set(element, item);
+    this.placementObj.insertAdjacentElement(place, element);
+    this._drawnItems.push(item);
+    if (this._drawnItems.length > this.size * this.currentPage) {
+      this.totalPages += 1;
+    }
+  }
+  removeItem(item) {
+    let element = this._dataToElementWeakMap.get(item);
+    element.remove();
+    this._drawnItems = this._drawnItems.filter((i) => i !== item);
+    if (this._drawnItems.length < this.size * this.currentPage) {
+      this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);
+      this.currentPage--;
+    }
+  }
 }
 export {
   InfiniteScroll as I
 };
-//# sourceMappingURL=infinite-scroll.element-DUjjOm1e.js.map
+//# sourceMappingURL=infinite-scroll.element-Cj53cbpC.js.map

package/dist/infinite-scroll.element-Cj53cbpC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"infinite-scroll.element-Cj53cbpC.js","sources":["../packages/wje-infinite-scroll/infinite-scroll.element.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `InfiniteScroll` is a custom web component that represents an infinite scroll.\n * It extends from `WJElement`.\n * @summary This element allows users to scroll through a potentially infinite amount of content.\n * @documentation https://elements.webjet.sk/components/infinite-scroll\n * @status stable\n * @augments {WJElement}\n * @csspart loader - The loader part of the infinite scroll.\n * @slot - The default slot for the infinite scroll.\n * @cssproperty [--wje-infinite-scroll-width=100%] - Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (`%`), pixels (`px`), or viewport units (`vw`). The default value is `100%`, which makes it span the full width of its container.\n * @cssproperty [--wje-infinite-scroll-height=300px] - Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (`px`), percentages (`%`), or viewport units (`vh`). The default value is `300px`, providing a fixed height suitable for most use cases.\n * //@fires wje-infinite-scroll:click-item - Event fired when an item is clicked.\n * @tag wje-infinite-scroll\n */\n\nexport default class InfiniteScroll extends WJElement {\n    /**\n     * Creates an instance of InfiniteScroll.\n     */\n    constructor() {\n        super();\n\n        this.totalPages = 0;\n        this.isLoading = [];\n        this._response = {};\n        this.iterate = null;\n        this._infiniteScrollTemplate = null;\n        this._abortController = new AbortController();\n        this._signal = this._abortController.signal;\n        this._dataToElementWeakMap = new WeakMap();\n        this._drawnItems = [];\n        this._loadedItems = [];\n        this._actualDrawnIndex = 0;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set infiniteScrollTemplate(value) {\n        this._infiniteScrollTemplate = value;\n    }\n\n    /**\n     * Getter for the infiniteScrollTemplate property.\n     * @returns {null}\n     */\n    get infiniteScrollTemplate() {\n        return this._infiniteScrollTemplate;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set response(value) {\n        this._response = value;\n    }\n\n    /**\n     * Getter for the response property.\n     * @returns {*|{}}\n     */\n    get response() {\n        return this._response;\n    }\n\n    /**\n     * Dependencies of the InfiniteScroll component.\n     * @param value\n     */\n    set objectName(value) {\n        this.setAttribute('object-name', value);\n    }\n\n    get objectName() {\n        return this.getAttribute('object-name') ?? 'data';\n    }\n\n    className = 'InfiniteScroll';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component for updates before it is drawn.\n     * This method handles the removal of templates for iteration, adjusts the height styling of the component,\n     * and manages abort signals for loading operations.\n     * @returns {void} No return value.\n     */\n    beforeDraw() {\n        this._loadedItems = [];\n        this._drawnItems = [];\n        this._dataToElementWeakMap = new WeakMap();\n\n        this.iterate = this.querySelector('[iterate]');\n\n        if (this.iterate) {\n            if (this.iterate.nodeName !== 'TEMPLATE') {\n                console.error('The iterate attribute must be a template element');\n                this.infiniteScrollTemplate = this.iterate?.outerHTML;\n            } else {\n                this.infiniteScrollTemplate = this.iterate?.innerHTML;\n            }\n\n            this.iterate?.remove(); // remove template\n        }\n\n        this.setAttribute('style', 'height: ' + this.height);\n\n        // if this._loading is not fulfilled then cancel the promise\n        if (this._signal) {\n            this._abortController.abort();\n            this._abortController = new AbortController();\n            this._signal = this._abortController.signal;\n        }\n    }\n\n    /**\n     * Creates and returns a document fragment containing the structure for an infinite scroll component.\n     * The structure includes native elements, slots for customization, and optional loading content.\n     * @returns {DocumentFragment} The document fragment containing the component's DOM structure.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native');\n        native.setAttribute('part', 'native-infinite-scroll');\n\n        let slot = document.createElement('slot');\n\n        let ending = document.createElement('slot');\n        ending.setAttribute('name', 'ending');\n\n        if (WjElementUtils.hasSlot(this, 'loader')) {\n            let loading = document.createElement('div');\n            loading.classList.add('loading');\n\n            let loader = document.createElement('slot');\n            loader.setAttribute('name', 'loader');\n\n            loading.appendChild(loader);\n\n            this.loadingEl = loading;\n\n            fragment.appendChild(loading);\n        }\n\n        native.appendChild(slot);\n        native.appendChild(ending);\n\n        fragment.appendChild(native);\n\n        this.endingEl = ending;\n\n        return fragment;\n    }\n\n    /**\n     * Called after the component has been drawn.\n     */\n    async afterDraw() {\n        this.queryParams = this.queryParams || '';\n        this.size = +this.size || 10;\n        this.currentPage = 0;\n\n        this.scrollEvent();\n        this._loading = this.loadPages(this.currentPage);\n        await this._loading;\n    }\n\n    /**\n     * Attaches a scroll event listener to the current object.\n     * The `scrollEvent` function binds the `onScroll` method to the 'scroll' event\n     * of the current object. This enables handling of scroll events for\n     * specific functionality such as updating UI elements, loading content dynamically,\n     * or tracking user interaction with scrollable content.\n     */\n    scrollEvent = () => {\n        this.addEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A function that removes the scroll event listener from the current context.\n     * This function is used to unbind the `onScroll` event listener\n     * from the `scroll` event of the current object. It ensures that\n     * the scroll event no longer triggers the `onScroll` handler.\n     * @function\n     */\n    unScrollEvent = () => {\n        this.removeEventListener('scroll', this.onScroll);\n    };\n\n    /**\n     * A scroll event handler function that checks the scroll position and triggers loading additional content\n     * when the user scrolls near the bottom of the page.\n     * Properties accessed:\n     * - `scrollTop`: The number of pixels that the content of an element is scrolled vertically.\n     * - `scrollHeight`: The total height of the element's content.\n     * - `clientHeight`: The inner height of the element in pixels, including padding but excluding borders and scrollbars.\n     * Conditions:\n     * - Determines if the scroll position is within 300 pixels of the bottom of the element.\n     * - Verifies that the current page number is less than or equal to the total number of pages.\n     * - Checks if the current page is already in the loading state.\n     * Actions:\n     * - Increments the current page number when the conditions are met.\n     * - Initiates loading for the next page by calling the `loadPages` function.\n     * @param {Event} e The scroll event object.\n     */\n    onScroll = (e) => {\n        const { scrollTop, scrollHeight, clientHeight } = e.target;\n\n        if (\n            scrollTop + clientHeight >= scrollHeight - 300 &&\n            this.currentPage <= this.totalPages &&\n            this.isLoading.includes(this.currentPage)\n        ) {\n            this.currentPage++;\n            this._loading = this.loadPages(this.currentPage);\n        }\n    };\n\n    /**\n     * Fetches the pages from the server.\n     * @param {number} page The page number.\n     * @returns {Promise<object>} The response from the server.\n     */\n    async getPages(page) {\n        let hasParams = this.url.includes('?');\n        const response = await fetch(\n            `${this.url}${hasParams ? '&' : '?'}page=${page}&size=${this.size}${this?.queryParams}`,\n            {\n                signal: this._signal,\n            }\n        );\n\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Hides the loader.\n     */\n    hideLoader() {\n        this?.loadingEl?.classList.remove('show');\n    }\n\n    /**\n     * Displays the loader element by adding the 'show' class to its class list.\n     * This method is useful for indicating a loading or processing state in the UI.\n     * @returns {void} No return value.\n     */\n    showLoader() {\n        this?.loadingEl?.classList.add('show');\n    }\n\n    /**\n     * Checks if there are more pages to load.\n     * @param {number} page The page number.\n     * @returns {boolean} Whether there are more pages to load.\n     */\n    hasMorePages(page) {\n        return this.totalPages === 0 || page < this.totalPages;\n    }\n\n    /**\n     * Loads the pages.\n     * @param {number} page The page number.\n     */\n    async loadPages(page) {\n        this.showLoader();\n        try {\n            if (this.hasMorePages(page)) {\n                let response;\n                this.parser = new DOMParser();\n\n                if (typeof this.setCustomData === 'function') {\n                    response = await this.setCustomData(page, this._signal);\n                } else {\n                    response = await this.getPages(page);\n                }\n\n                this.totalPages = response?.totalPages;\n                this.currentPage = page;\n\n                this.placementObj = this;\n\n                // if there is a \"container\" attribute, find the element\n                if (this.hasAttribute('placement')) this.placementObj = this.querySelector(this.placement);\n\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:load', response);\n\n                this.response = response;\n                this._loadedItems = this.objectName ? response[this.objectName] : response;\n                const notDrawnItems = this._loadedItems.filter((item) => !this._drawnItems.some(this.compareFunction.bind(this, item)));\n                this.customForeach(notDrawnItems);\n                this._drawnItems.push(...notDrawnItems);\n\n                this.isLoading.push(page);\n            } else {\n                event.dispatchCustomEvent(this, 'wje-infinite-scroll:complete');\n                this.endingEl.classList.add('show');\n            }\n        } catch (error) {\n            console.log(error);\n        } finally {\n            this.hideLoader();\n        }\n    }\n\n    compareFunction = (i, item) => i.id === item.id\n\n    /**\n     * Converts a data item into an HTML element based on a template.\n     * This function takes a data item, interpolates it into a predefined template,\n     * parses the resulting HTML string, and returns the first child element of the parsed HTML content.\n     * @param {object} item The data object to interpolate into the HTML template.\n     * @returns {Element} The first child element generated from the interpolated HTML string.\n     */\n    dataToHtml = (item) => {\n        let interpolateItem = this.interpolate(this.infiniteScrollTemplate, item);\n        let doc = this.parser.parseFromString(interpolateItem, 'text/html');\n        let element = doc.activeElement.firstElementChild;\n\n        return element;\n    };\n\n    /**\n     * A custom implementation of the forEach method designed to iterate over an array of data,\n     * transform each item into an HTML element, and append the element to a specified placement object.\n     * Additionally, it adds an event listener to each generated element for handling click events.\n     * @param {Array} data An array of items to process. Each item is transformed into an HTML element\n     * and appended to the placement object specified in the context of `this`.\n     */\n    customForeach = (data) => {\n        data.forEach((item) => {\n            let element = this.dataToHtml(item);\n            this._dataToElementWeakMap.set(element, item);\n\n            event.addListener(element, 'click', 'wje-infinite-scroll:click-item', null);\n\n            this.placementObj.insertAdjacentElement('beforeend', element);\n        });\n    };\n\n    /**\n     * Interpolates a string template with values from the provided parameters object.\n     * The template contains placeholders in the format `{{key}}` or `{{key.subkey}}`,\n     * which are replaced with the corresponding values from the `params` object.\n     * Placeholders support dot notation for accessing nested properties within the `params` object.\n     * @param {string} template The string template containing placeholders to be replaced.\n     * @param {object} params The object containing key-value pairs used for substitution in the template.\n     * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.\n     */\n    interpolate = (template, params) => {\n        let keys = template.match(/\\{{.*?\\}}/g);\n\n        if (keys) {\n            for (let key of keys) {\n                let cleanKey = key.replace('{{', '').replace('}}', '');\n                let val = '';\n                cleanKey.split('.').forEach((k) => {\n                    val = val === '' ? params[k] : val[k];\n                });\n\n                template = template.replace(key, val);\n            }\n        }\n        return template;\n    };\n\n    addItem(item, place = 'beforeend') {\n        let element = this.dataToHtml(item);\n        this._dataToElementWeakMap.set(element, item);\n        this.placementObj.insertAdjacentElement(place, element);\n\n        this._drawnItems.push(item);\n\n        // if drawnItems are more than page * size then add the page to isLoading\n        if (this._drawnItems.length > this.size * this.currentPage) {\n            this.totalPages += 1;\n        }\n    }\n\n    removeItem(item) {\n        let element = this._dataToElementWeakMap.get(item);\n        element.remove();\n        this._drawnItems = this._drawnItems.filter((i) => i !== item);\n        // if drawnItems are less than page * size then remove the page from isLoading\n        if (this._drawnItems.length < this.size * this.currentPage) {\n            this.isLoading = this.isLoading.filter((i) => i !== this.currentPage);\n            this.currentPage--;\n        }\n    }\n}\n"],"names":[],"mappings":"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"}

package/dist/packages/wje-color-picker/color-picker.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -97,7 +97,7 @@ export default class WJElement extends HTMLElement {
      * Gets the rendering context, either the shadow root or the component itself.
      * @returns The rendering context.
      */
-    get context(): this | ShadowRoot;
+    get context(): any;
     /**
      * Gets the store instance.
      * @returns {object} The store instance.

package/dist/packages/wje-infinite-scroll/infinite-scroll.element.d.ts

@@ -33,6 +33,10 @@ export default class InfiniteScroll extends WJElement {
     _infiniteScrollTemplate: any;
     _abortController: AbortController;
     _signal: AbortSignal;
+    _dataToElementWeakMap: WeakMap<WeakKey, any>;
+    _drawnItems: any[];
+    _loadedItems: any[];
+    _actualDrawnIndex: number;
     /**
      * Dependencies of the InfiniteScroll component.
      * @param value
@@ -144,6 +148,7 @@ export default class InfiniteScroll extends WJElement {
     loadPages(page: number): Promise<void>;
     parser: DOMParser;
     placementObj: any;
+    compareFunction: (i: any, item: any) => boolean;
     /**
      * Converts a data item into an HTML element based on a template.
      * This function takes a data item, interpolates it into a predefined template,
@@ -170,4 +175,6 @@ export default class InfiniteScroll extends WJElement {
      * @returns {string} A string with all placeholders replaced by their respective values from the `params` object.
      */
     interpolate: (template: string, params: object) => string;
+    addItem(item: any, place?: string): void;
+    removeItem(item: any): void;
 }

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

@@ -95,9 +95,33 @@ export default class Options extends WJElement {
      * @returns {boolean} True if the search attribute is present, false otherwise.
      */
     get hasSearch(): boolean;
+    /**
+     * Sets the value to define search-to-query params behavior.
+     * @param {string} value The value to be set for the search-to-query-params attribute.
+     */
     set searchToQueryParams(value: string);
-    get searchToQueryParams(): string;
+    /**
+     * Retrieves the value of the 'search-to-query-params' attribute from the current instance.
+     * @returns {string | null} The value of the 'search-to-query-params' attribute, or null if the attribute is not set.
+     */
+    get searchToQueryParams(): string | null;
+    /**
+     * Determines whether the 'search-to-query-params' attribute is present on the element.
+     * @returns {boolean} True if the 'search-to-query-params' attribute exists, otherwise false.
+     */
     get hasSearchToQueryParams(): boolean;
+    /**
+     * Sets the value of the search parameter name attribute.
+     * @param {string} value The string value to set as the search parameter name.
+     */
+    set searchParamName(value: string);
+    /**
+     * Gets the search parameter name used in queries.
+     * Retrieves the value of the 'search-param-name' attribute.
+     * If the attribute is not set, it defaults to 'search'.
+     * @returns {string} The search parameter name used for queries.
+     */
+    get searchParamName(): string;
     /**
      * Sets the lazy attribute.
      * @param {boolean} value The value to set for the lazy attribute.

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

@@ -30,6 +30,7 @@ export default class Stepper extends WJElement {
     headerSteps: NodeListOf<Element>;
     prev: HTMLElement;
     next: HTMLElement;
+    processStep(index: any, step: any, header: any, steps: any): void;
     /**
      * Sets up the attributes for the component.
      */

package/dist/packages/wje-store/pubsub.d.ts

@@ -12,10 +12,11 @@ export default class PubSub {
     /**
      * If the passed event has callbacks attached to it, loop through each one and call it.
      * @param {string} event The name of the event to publish
-     * @param {object} [newData] The data to pass to the callbacks
-     * @param {object} [oldData] The data to pass to the callbacks
-     * @returns {Array} The callbacks for this event, or an empty array if no event exits
+     * @param {any} state The current state to pass to the callbacks
+     * @param {object} [newData] The new data to pass to the callbacks
+     * @param {object} [oldData] The old data to pass to the callbacks
+     * @returns {Array} The results of the callbacks for this event, or an empty array if no event exists
      * @memberof PubSub
      */
-    publish(event: string, newData?: object, oldData?: object): any[];
+    publish(event: string, state: any, newData?: object, oldData?: object): any[];
 }

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

@@ -28,6 +28,28 @@ export default class Tab extends WJElement {
      * @type {boolean}
      */
     last: boolean;
+    _hasPanel: boolean;
+    /**
+     * Sets the panel attribute to the specified value.
+     * @param {string} value The value to set for the panel attribute.
+     */
+    set panel(value: string);
+    /**
+     * Retrieves the value of the 'panel' attribute of the element.
+     * @returns {string|null} Returns the 'panel' attribute value if it exists; otherwise, returns null.
+     */
+    get panel(): string | null;
+    /**
+     * Sets the value of the 'route' attribute for the current object.
+     * @param {string} value The new value to set for the 'route' attribute.
+     */
+    set route(value: string);
+    /**
+     * Retrieves the value of the 'route' attribute.
+     * If the 'route' attribute is not set, it returns null.
+     * @returns {string|null} The value of the 'route' attribute or null if not set.
+     */
+    get route(): string | null;
     /**
      * Draws the component for the tab.
      * @returns {DocumentFragment}
@@ -38,4 +60,5 @@ export default class Tab extends WJElement {
      * // @fires wje-tab:change - Dispatched when the component is clicked, indicating a tab change.
      */
     afterDraw(): void;
+    unbindRouterLinks: any;
 }

package/dist/packages/wje-tab-group/tab-group.element.d.ts

@@ -31,10 +31,13 @@ export default class TabGroup extends WJElement {
      * @returns {DocumentFragment}
      */
     draw(context: object, store: object, params: object): DocumentFragment;
+    nav: HTMLElement;
+    moreDropdown: HTMLElement;
     /**
      * Sets up the event listeners after the component is drawn.
      */
     afterDraw(): void;
+    checkOverflow(): void;
     /**
      * Removes the active attribute from all tabs and panels.
      */
@@ -64,4 +67,6 @@ export default class TabGroup extends WJElement {
      * @returns {Array<string>} An array of all tab names.
      */
     getPanelAllName(): Array<string>;
+    toggleMoreVisibility(): void;
+    dropdownActive(el: any): void;
 }

package/dist/wje-dialog.js

@@ -19,7 +19,9 @@ class Dialog extends WJElement {
      * @param e
      */
     __publicField(this, "onOpen", (e) => {
-      this.dialog.innerHTML = "";
+      if (this.dialog) {
+        this.dialog.innerHTML = "";
+      }
       Promise.resolve(this.beforeOpen(this, e)).then((res) => {
         this.htmlDialogBody(this.dialog);
         this.dialog.showModal();

package/dist/wje-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        return fragment;\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n        close.appendChild(icon);\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.getAttribute('headline')}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        header.appendChild(headerActions);\n        if (!this.closeHidden) header.appendChild(close);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n        body.appendChild(contentSlot);\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        footer.appendChild(slotFooter);\n\n        dialog.appendChild(header);\n        dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.addEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen() {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen() {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose() {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose() {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        this.dialog.innerHTML = '';\n\n        Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n            this.htmlDialogBody(this.dialog);\n\n            this.dialog.showModal(); // Now open the dialog\n\n            if (this.dialog.open) {\n                Promise.resolve(this.afterOpen(this, e));\n            }\n        });\n    };\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            console.log('Button clicked');\n\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set placement(value) {\n        this.setAttribute('placement', value);\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {string|string}\n     */\n    get placement() {\n        return this.getAttribute('placement') || 'slide-up';\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set async(value) {\n        this.setAttribute('async', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get async() {\n        return this.hasAttribute('async');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @param value\n     */\n    set closeHidden(value) {\n        if (value) this.setAttribute('close-hidden', '');\n    }\n\n    /**\n     * Gets the headline of the dialog.\n     * @returns {boolean}\n     */\n    get closeHidden() {\n        return !!this.hasAttribute('close-hidden');\n    }\n\n    /**\n     * Sets the headline of the dialog.\n     * @type {string}\n     */\n    className = 'Dialog';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @returns {*[]}\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     * @returns {DocumentFragment}\n     */\n    draw(context, store, params) {\n        let fragment = document.createDocumentFragment();\n\n        this.classList.add('fade', this.placement, params.size);\n\n        let dialog = document.createElement('dialog');\n        dialog.classList.add('modal-dialog');\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        return fragment;\n    }\n\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n        close.appendChild(icon);\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.getAttribute('headline')}</span>`;\n\n        let slotHeader = document.createElement('slot');\n        slotHeader.setAttribute('name', 'header');\n\n        const headerActions = document.createElement('div');\n        headerActions.classList.add('header-actions');\n        headerActions.setAttribute('part', 'header-actions');\n        headerActions.appendChild(slotHeader);\n\n        header.appendChild(headerActions);\n        if (!this.closeHidden) header.appendChild(close);\n\n        let contentSlot = document.createElement('slot');\n\n        let body = document.createElement('div');\n        body.setAttribute('part', 'body');\n        body.classList.add('dialog-content');\n        body.appendChild(contentSlot);\n\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        footer.appendChild(slotFooter);\n\n        dialog.appendChild(header);\n        dialog.appendChild(body);\n        dialog.appendChild(footer);\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\n    }\n\n    /**\n     * Draws the component after it has been drawn.\n     * @param {object} context The context for drawing.\n     * @param {object} store The store for drawing.\n     * @param {object} params The parameters for drawing.\n     */\n    afterDraw(context, store, params) {\n        if (params.trigger) {\n            event.addListener(document, params.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.addEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the component is disconnected.\n     */\n    beforeDisconnect() {\n        if (this.params?.trigger) {\n            event.removeListener(document, this.params?.trigger, null, this.onOpen);\n        }\n\n        //this.dialog.removeEventListener('close', this.onClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen() {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen() {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose() {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose() {\n        // Hook for extending behavior after the dialog closes\n    }\n\n    /**\n     * Opens the dialog.\n     * @param e\n     */\n    onOpen = (e) => {\n        if (this.dialog) {\n            this.dialog.innerHTML = '';\n        }\n\n        Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n            this.htmlDialogBody(this.dialog);\n\n            this.dialog.showModal(); // Now open the dialog\n\n            if (this.dialog.open) {\n                Promise.resolve(this.afterOpen(this, e));\n            }\n        });\n    }\n\n    /**\n     * Closes the dialog.\n     * @param {object} e\n     */\n    onClose = (e) => {\n        Promise.resolve(this.beforeClose(this, e)).then((res) => {\n            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            console.log('Button clicked');\n\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}

package/dist/wje-element.js

@@ -877,7 +877,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 == null ? void 0 : _draw.constructor.name) === "Promise") {
       _draw = await _draw;
     }
     let rend = _draw;
@@ -964,12 +964,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 == null ? void 0 : __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 == null ? void 0 : __afterDraw.constructor.name) === "Promise") {
         await __afterDraw;
       }
       this.rendering = false;