wj-elements 0.5.2 → 0.6.1

package/dist/wje-dialog.js

@@ -296,11 +296,12 @@ const _Dialog = class _Dialog extends WJElement {
      * @param e
      */
     __publicField(this, "onOpen", (e) => {
-      if (!this.dialog) return;
-      this.dialog.innerHTML = "";
+      if (!this.dialog || this.dialog.open || this._opening) return;
+      this._opening = true;
       setTimeout(() => {
-        Promise.resolve(this.beforeOpen(this, e)).then((res) => {
-          if (!this.dialog) return;
+        Promise.resolve().then(() => this.beforeOpen(this, e)).then(() => {
+          if (!this.dialog || this.dialog.open) return;
+          this.dialog.replaceChildren();
           this.htmlDialogBody(this.dialog);
           this.dialog.showModal();
           this.syncHostOpenState();
@@ -308,6 +309,10 @@ const _Dialog = class _Dialog extends WJElement {
           if (this.dialog.open) {
             Promise.resolve(this.afterOpen(this, e));
           }
+        }).catch((err) => {
+          console.error(err);
+        }).finally(() => {
+          this._opening = false;
         });
       }, 0);
     });
@@ -338,6 +343,7 @@ const _Dialog = class _Dialog extends WJElement {
       this.toggleAttribute("open", !!((_a = this.dialog) == null ? void 0 : _a.open));
     });
     this._instanceId = ++_Dialog._instanceId;
+    this._opening = false;
   }
   /**
    * Sets the value of the 'headline' attribute.
@@ -464,6 +470,7 @@ const _Dialog = class _Dialog extends WJElement {
    */
   htmlDialogBody(dialog) {
     const dialogId = this.id || `wje-dialog-${this._instanceId}`;
+    dialog.replaceChildren();
     let icon = document.createElement("wje-icon");
     icon.setAttribute("name", "x");
     icon.setAttribute("slot", "icon-only");

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    static _instanceId = 0;\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dialog._instanceId;\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\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    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\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.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n        dialog.addEventListener('close', this.onNativeDialogClose);\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        this.syncHostOpenState();\n\n        return fragment;\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\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n\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.setAttribute('aria-label', 'Close dialog');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        header.id = `${dialogId}-header`;\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.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        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.id = `${dialogId}-body`;\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        slotFooter.id = 'footerSlot';\n        slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n\n        dialog.setAttribute('role', 'dialog');\n        dialog.setAttribute('aria-describedby', body.id);\n        if (!this.hiddenHeader) {\n            dialog.setAttribute('aria-labelledby', header.id);\n            dialog.removeAttribute('aria-label');\n        } else {\n            dialog.removeAttribute('aria-labelledby');\n            if (this.headline) {\n                dialog.setAttribute('aria-label', this.headline);\n            } else {\n                dialog.removeAttribute('aria-label');\n            }\n        }\n\n        Promise.resolve().then(() => this.updateHasFooter());\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\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.onNativeDialogClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\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) return;\n        this.dialog.innerHTML = '';\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                if (!this.dialog) return;\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n                this.syncHostOpenState();\n                this.dialog.setAttribute('aria-modal', 'true');\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 0);\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            if (!this.dialog || typeof this.dialog.close !== 'function') return;\n\n            if (this.dialog.open) {\n                this.dialog.close(); // Now close the dialog\n            }\n            this.dialog.removeAttribute('aria-modal');\n            this.syncHostOpenState();\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    onNativeDialogClose = () => {\n        this.dialog?.removeAttribute('aria-modal');\n        this.removeAttribute('open');\n    };\n\n    syncHostOpenState = () => {\n        this.toggleAttribute('open', !!this.dialog?.open);\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            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    updateHasFooter() {\n        // If footer is intentionally hidden, ensure it doesn't reserve space\n        if (this.hiddenFooter) {\n            const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n            if (footerEl) footerEl.setAttribute('hidden', '');\n            this.removeAttribute('has-footer');\n            return;\n        }\n        const slot = this.shadowRoot?.getElementById('footerSlot');\n        if (!slot) {\n            this.removeAttribute('has-footer');\n            return;\n        }\n\n        const assigned = slot.assignedNodes({ flatten: true });\n        const hasContent = assigned.some((n) => {\n            if (n.nodeType === Node.ELEMENT_NODE) return true;\n            if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n            return false;\n        });\n\n        // Prefer toggling the actual footer element so CSS/spacing is always correct\n        const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n        if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n        // Keep host attribute too (harmless, may be used elsewhere)\n        this.toggleAttribute('has-footer', hasContent);\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"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    static _instanceId = 0;\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n        this._instanceId = ++Dialog._instanceId;\n        this._opening = false;\n    }\n\n    /**\n     * Sets the value of the 'headline' attribute.\n     * @param {string} value The new value for the 'headline' attribute.\n     */\n    set headline(value) {\n        this.setAttribute('headline', value);\n    }\n\n    /**\n     * Retrieves the value of the \"headline\" attribute from the element.\n     * If the \"headline\" attribute is not present, returns an empty string.\n     * @returns {string} The headline attribute value or an empty string if not set.\n     */\n    get headline() {\n        return this.getAttribute('headline') || '';\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    set hiddenHeader(value) {\n        if (value) this.setAttribute('hidden-header', '');\n    }\n\n    get hiddenHeader() {\n        return !!this.hasAttribute('hidden-header');\n    }\n\n    set hiddenFooter(value) {\n        if (value) this.setAttribute('hidden-footer', '');\n    }\n\n    get hiddenFooter() {\n        return !!this.hasAttribute('hidden-footer');\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.setAttribute('part', 'dialog');\n        dialog.classList.add('modal-dialog');\n        dialog.addEventListener('close', this.onNativeDialogClose);\n\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\n        this.syncHostOpenState();\n\n        return fragment;\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\n    /**\n     * Creates the dialog body.\n     * @param dialog\n     */\n    htmlDialogBody(dialog) {\n        const dialogId = this.id || `wje-dialog-${this._instanceId}`;\n        dialog.replaceChildren();\n\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.setAttribute('aria-label', 'Close dialog');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        header.id = `${dialogId}-header`;\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.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        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.id = `${dialogId}-body`;\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        slotFooter.id = 'footerSlot';\n        slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n        close.appendChild(icon);\n\n        if (!this.closeHidden) header.appendChild(close);\n\n        header.appendChild(headerActions);\n        body.appendChild(contentSlot);\n        footer.appendChild(slotFooter);\n\n        if (!this.hiddenHeader) dialog.appendChild(header);\n        dialog.appendChild(body);\n        if (!this.hiddenFooter) dialog.appendChild(footer);\n\n        dialog.setAttribute('role', 'dialog');\n        dialog.setAttribute('aria-describedby', body.id);\n        if (!this.hiddenHeader) {\n            dialog.setAttribute('aria-labelledby', header.id);\n            dialog.removeAttribute('aria-label');\n        } else {\n            dialog.removeAttribute('aria-labelledby');\n            if (this.headline) {\n                dialog.setAttribute('aria-label', this.headline);\n            } else {\n                dialog.removeAttribute('aria-label');\n            }\n        }\n\n        Promise.resolve().then(() => this.updateHasFooter());\n    }\n\n    /**\n     * Closes the dialog.\n     * @param e\n     */\n    close(e) {\n        this.onClose(e);\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.onNativeDialogClose);\n    }\n\n    /**\n     * Before the dialog opens.\n     */\n    beforeOpen(dialog, trigger) {\n        // Hook for extending behavior before the dialog opens\n    }\n\n    /**\n     * After the dialog opens.\n     */\n    afterOpen(dialog, trigger) {\n        // Hook for extending behavior after the dialog opens\n    }\n\n    /**\n     * Before the dialog closes.\n     */\n    beforeClose(dialog, trigger) {\n        // Hook for extending behavior before the dialog closes\n    }\n\n    /**\n     * After the dialog closes.\n     */\n    afterClose(dialog, trigger) {\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 || this.dialog.open || this._opening) return;\n        this._opening = true;\n\n        setTimeout(() => {\n            Promise.resolve().then(() => this.beforeOpen(this, e)).then(() => {\n                if (!this.dialog || this.dialog.open) return;\n                this.dialog.replaceChildren();\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n                this.syncHostOpenState();\n                this.dialog.setAttribute('aria-modal', 'true');\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            }).catch((err) => {\n                console.error(err);\n            }).finally(() => {\n                this._opening = false;\n            });\n        }, 0);\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            if (!this.dialog || typeof this.dialog.close !== 'function') return;\n\n            if (this.dialog.open) {\n                this.dialog.close(); // Now close the dialog\n            }\n            this.dialog.removeAttribute('aria-modal');\n            this.syncHostOpenState();\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    onNativeDialogClose = () => {\n        this.dialog?.removeAttribute('aria-modal');\n        this.removeAttribute('open');\n    };\n\n    syncHostOpenState = () => {\n        this.toggleAttribute('open', !!this.dialog?.open);\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            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    updateHasFooter() {\n        // If footer is intentionally hidden, ensure it doesn't reserve space\n        if (this.hiddenFooter) {\n            const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n            if (footerEl) footerEl.setAttribute('hidden', '');\n            this.removeAttribute('has-footer');\n            return;\n        }\n        const slot = this.shadowRoot?.getElementById('footerSlot');\n        if (!slot) {\n            this.removeAttribute('has-footer');\n            return;\n        }\n\n        const assigned = slot.assignedNodes({ flatten: true });\n        const hasContent = assigned.some((n) => {\n            if (n.nodeType === Node.ELEMENT_NODE) return true;\n            if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n            return false;\n        });\n\n        // Prefer toggling the actual footer element so CSS/spacing is always correct\n        const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n        if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n        // Keep host attribute too (harmless, may be used elsewhere)\n        this.toggleAttribute('has-footer', hasContent);\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}

package/dist/wje-dropdown.js

@@ -9,7 +9,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _onMenuItemCustom;
 import WJElement from "./wje-element.js";
-import { P as Popup } from "./popup.element-C8-g3WLs.js";
+import { P as Popup } from "./popup.element-B1HZhDZJ.js";
 import { event } from "./event.js";
 const _Dropdown = class _Dropdown extends WJElement {
   /**

package/dist/wje-master.js

@@ -105,7 +105,7 @@ import { default as default89 } from "./wje-tooltip.js";
 import { default as default90 } from "./wje-tree.js";
 import { default as default91 } from "./wje-tree-item.js";
 import { default as default92 } from "./wje-visually-hidden.js";
-import { P } from "./popup.element-C8-g3WLs.js";
+import { P } from "./popup.element-B1HZhDZJ.js";
 const skSk = {
   code: "sk-sk",
   name: "Slovak",

package/dist/wje-orgchart-group.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import { event } from "./event.js";
-const styles = ":host {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: var(--wje-orgchart-group-padding);\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}\n";
+const styles = ":host {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: var(--wje-orgchart-group-padding);\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n\n:host(:first-child)::after {\n    border-radius: 0;\n}\n\n:host(.flat-child:only-child) {\n    padding-top: var(--wje-orgchart-group-height-line);\n}\n\n:host(.flat-child:only-child)::before {\n    display: none;\n}\n\n:host(.flat-child:only-child)::after {\n    display: block;\n    right: auto;\n    left: 50%;\n    width: 0;\n    height: var(--wje-orgchart-group-height-line);\n    border-top: 0 none;\n    border-left: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n";
 class OrgchartGroup extends WJElement {
   /**
    * Creates an instance of OrgchartGroup.

package/dist/wje-orgchart-item.js

@@ -2,7 +2,8 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = ":host {\n    width: var(--wje-orgchart-item-width);\n    box-sizing: border-box;\n\n    .orgchart-item {\n        display: flex;\n        flex-direction: column;\n\n        wje-card {\n            margin: 0 auto;\n            padding-inline: 0.25rem;\n            width: var(--wje-orgchart-item-width);\n            box-sizing: border-box;\n            &::part(native) {\n                border-radius: var(--wje-orgchart-border-radius) !important;\n                box-sizing: border-box;\n                overflow: visible;\n                padding-block: 0.125rem;\n                background: var(--wje-orgchart-item-background);\n            }\n        }\n    }\n\n    .expander {\n        position: absolute;\n        left: calc(50% + 1px / 2);\n        border: 1px solid var(--wje-border-color);\n        border-radius: 50%;\n        width: var(--wje-orgchart-item-expander-size);\n        height: var(--wje-orgchart-item-expander-size);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--wje-color-contrast-0);\n        font-size: 8px;\n        line-height: 1;\n        box-sizing: border-box;\n        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));\n        padding-bottom: 1px;\n        cursor: pointer;\n        z-index: 999;\n        bottom: 0;\n        &.collapse {\n            content: '+';\n            wje-orgchart {\n                display: none;\n            }\n        }\n        &:hover {\n            background: var(--wje-color-contrast-1);\n        }\n    }\n}\n\n:host(.collapse) {\n    .expander {\n        content: '+';\n    }\n    slot[name='child'] {\n        display: none;\n    }\n}\n/* ak nie je parent-group */\n:host(:not(.parent-group)) {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-item-height-line) 0 0 0;\n    transition: all 0.5s;\n    width: auto;\n    box-sizing: border-box;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n    }\n}\n\n:host([boss]) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-boss-background);\n        border: var(--wje-orgchart-item-boss-border);\n    }\n}\n\n:host {\n    .orgchart-item:hover {\n        wje-card::part(native) {\n            background: var(--wje-orgchart-item-hover-background);\n            border: var(--wje-orgchart-item-hover-border);\n        }\n    }\n}\n\n:host(.highlight) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-highlight-background);\n        border: var(--wje-orgchart-item-highlight-border);\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-item-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-item-border-radius) 0 0 0;\n}\n";
+import { event } from "./event.js";
+const styles = ":host {\n    width: var(--wje-orgchart-item-width);\n    box-sizing: border-box;\n\n    .orgchart-item {\n        display: flex;\n        flex-direction: column;\n\n        wje-card {\n            margin: 0 auto;\n            padding-inline: 0.25rem;\n            width: var(--wje-orgchart-item-width);\n            box-sizing: border-box;\n            &::part(native) {\n                border-radius: var(--wje-orgchart-border-radius) !important;\n                box-sizing: border-box;\n                overflow: visible;\n                padding-block: 0.125rem;\n                background: var(--wje-orgchart-item-background);\n            }\n        }\n    }\n\n    .expander {\n        position: absolute;\n        left: calc(50% + 1px / 2);\n        border: 1px solid var(--wje-border-color);\n        border-radius: 50%;\n        width: var(--wje-orgchart-item-expander-size);\n        height: var(--wje-orgchart-item-expander-size);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--wje-color-contrast-0);\n        font-size: 8px;\n        line-height: 1;\n        box-sizing: border-box;\n        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));\n        padding-bottom: 1px;\n        cursor: pointer;\n        z-index: 999;\n        bottom: 0;\n        &.collapse {\n            content: '+';\n            wje-orgchart {\n                display: none;\n            }\n        }\n        &:hover {\n            background: var(--wje-color-contrast-1);\n        }\n    }\n}\n\n:host(.collapse) {\n    .expander {\n        content: '+';\n    }\n    slot[name='child'] {\n        display: none;\n    }\n}\n/* ak nie je parent-group */\n:host(:not(.parent-group)) {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-item-height-line) 0 0 0;\n    transition: all 0.5s;\n    width: auto;\n    box-sizing: border-box;\n\n    &::before,\n    &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n    }\n}\n\n:host([virtual]:not(.parent-group)) {\n    padding-top: 0;\n}\n\n:host([boss]) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-boss-background);\n        border: var(--wje-orgchart-item-boss-border);\n    }\n}\n\n:host {\n    .orgchart-item:hover {\n        wje-card::part(native) {\n            background: var(--wje-orgchart-item-hover-background);\n            border: var(--wje-orgchart-item-hover-border);\n        }\n    }\n}\n\n:host(.highlight) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-highlight-background);\n        border: var(--wje-orgchart-item-highlight-border);\n    }\n}\n\n:host(:only-child)::after,\n:host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n\n:host(:first-child)::after {\n    border-radius: 0;\n}\n\n:host([virtual]:not(.parent-group))::before {\n    border-right: 0 none;\n    border-radius: 0;\n}\n\n:host([virtual]:not(.parent-group))::after {\n    border-left: 0 none;\n    border-radius: 0;\n}\n\n:host(.flat-child:only-child) {\n    padding-top: var(--wje-orgchart-item-height-line);\n}\n\n:host(.flat-child:only-child)::before {\n    display: none;\n}\n\n:host(.flat-child:only-child)::after {\n    display: block;\n    right: auto;\n    left: 50%;\n    width: 0;\n    height: calc(var(--wje-orgchart-item-height-line) - 1px);\n    border-top: 0 none;\n    border-left: 1px solid var(--wje-border-color);\n    border-radius: 0;\n}\n";
 class OrgchartItem extends WJElement {
   /**
    * Creates an instance of OrgchartItem.
@@ -11,11 +12,20 @@ class OrgchartItem extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "OrgchartItem");
+    __publicField(this, "handleItemClick", (e) => {
+      if (e.composedPath().includes(this.expander)) return;
+      e.stopPropagation();
+      event.dispatchCustomEvent(this, "wje-orgchart-item:click", {
+        target: this,
+        originalEvent: e
+      });
+    });
     /**
      * Toggles the children of the orgchart item.
      * @param e The event object.
      */
     __publicField(this, "toggleChildren", (e) => {
+      e.stopPropagation();
       this.classList.toggle("collapse");
       if (this.classList.contains("collapse")) e.target.innerHTML = "+";
       else e.target.innerHTML = "-";
@@ -35,6 +45,20 @@ class OrgchartItem extends WJElement {
   get boss() {
     return this.hasAttribute("boss");
   }
+  /**
+   * Sets whether the item should render only as a structural connector.
+   * @param {boolean} value True when the item should not render its own card.
+   */
+  set virtual(value) {
+    this.toggleAttribute("virtual", Boolean(value));
+  }
+  /**
+   * Gets whether the item renders only as a structural connector.
+   * @returns {boolean} True when the item has the virtual attribute.
+   */
+  get virtual() {
+    return this.hasAttribute("virtual");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -43,6 +67,13 @@ class OrgchartItem extends WJElement {
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Returns attributes that trigger a redraw when they change.
+   * @returns {Array<string>} Attribute names that require a new template render.
+   */
+  static get observedAttributes() {
+    return ["virtual"];
+  }
   /**
    * Sets up the attributes for the component.
    */
@@ -73,23 +104,22 @@ class OrgchartItem extends WJElement {
     expander.classList.add("expander");
     expander.innerHTML = "-";
     card.appendChild(slot);
-    if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
+    if (!this.virtual && this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
       card.appendChild(expander);
-    native.appendChild(card);
+    if (!this.virtual) native.appendChild(card);
     native.appendChild(child);
     fragment.appendChild(native);
     this.expander = expander;
+    this.card = card;
     return fragment;
   }
   /**
    * After Draws the component for the org chart item.
    */
   afterDraw() {
+    if (!this.virtual) this.card.addEventListener("click", this.handleItemClick);
     this.expander.addEventListener("click", this.toggleChildren);
   }
-  dispatchEvent(e) {
-    return false;
-  }
 }
 OrgchartItem.define("wje-orgchart-item", OrgchartItem);
 export {

package/dist/wje-orgchart-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-orgchart-item.js","sources":["../packages/wje-orgchart-item/orgchart-item.element.js","../packages/wje-orgchart-item/orgchart-item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @attribute {boolean} boss - The boss of the orgchart item (default: false).\n * @slot - The default slot for the orgchart item.\n * @slot child - The child slot for the orgchart item.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @csspart expander - Styles the expander element.\n * @tag wje-orgchart-item\n */\nexport default class OrgchartItem extends WJElement {\n    /**\n     * Creates an instance of OrgchartItem.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the boss of the orgchart item.\n     * @param value\n     */\n\n    set boss(value) {\n        if (value) this.setAttribute('boss', value);\n    }\n\n    /**\n     * Gets the boss of the orgchart item.\n     * @returns {boolean}\n     */\n\n    get boss() {\n        return this.hasAttribute('boss');\n    }\n\n    className = 'OrgchartItem';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    beforeDraw() {\n        if (this.parentElement && this.parentElement.tagName === 'WJE-ORGCHART-GROUP') {\n            this.classList.add('parent-group');\n        }\n    }\n\n    /**\n     * Draws the component for the org chart item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('orgchart-item');\n\n        let card = document.createElement('wje-card');\n        card.setAttribute('part', 'card');\n\n        let slot = document.createElement('slot');\n\n        let child = document.createElement('slot');\n        child.setAttribute('name', 'child');\n\n        let expander = document.createElement('div');\n        expander.setAttribute('part', 'expander');\n        expander.classList.add('expander');\n        expander.innerHTML = '-';\n\n        card.appendChild(slot);\n        if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === 'WJE-ORGCHART'))\n            card.appendChild(expander); // if the orgchart item has children and\n\n        native.appendChild(card);\n        native.appendChild(child);\n\n        fragment.appendChild(native);\n\n        this.expander = expander;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart item.\n     */\n    afterDraw() {\n        this.expander.addEventListener('click', this.toggleChildren);\n    }\n\n    /**\n     * Toggles the children of the orgchart item.\n     * @param e The event object.\n     */\n    toggleChildren = (e) => {\n        this.classList.toggle('collapse');\n        if (this.classList.contains('collapse')) e.target.innerHTML = '+';\n        else e.target.innerHTML = '-';\n    };\n\n    dispatchEvent(e) {\n        return false;\n    }\n}\n","import OrgchartItem from './orgchart-item.element.js';\n\nexport default OrgchartItem;\n\nOrgchartItem.define('wje-orgchart-item', OrgchartItem);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAK;AAqBT,qCAAY;AAyEZ;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,WAAK,UAAU,OAAO,UAAU;AAChC,UAAI,KAAK,UAAU,SAAS,UAAU,EAAG,GAAE,OAAO,YAAY;AAAA,UACzD,GAAE,OAAO,YAAY;AAAA,IAC9B;AAAA,EAjGA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,KAAK,OAAO;AACZ,QAAI,MAAO,MAAK,aAAa,QAAQ,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA,EAEA,aAAa;AACT,QAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,sBAAsB;AAC3E,WAAK,UAAU,IAAI,cAAc;AAAA,IACrC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,MAAM;AAEhC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AACjC,aAAS,YAAY;AAErB,SAAK,YAAY,IAAI;AACrB,QAAI,KAAK,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAG,YAAY,cAAc;AAChG,WAAK,YAAY,QAAQ;AAE7B,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAEhB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,SAAS,iBAAiB,SAAS,KAAK,cAAc;AAAA,EAC/D;AAAA,EAYA,cAAc,GAAG;AACb,WAAO;AAAA,EACX;AACJ;ACzHA,aAAa,OAAO,qBAAqB,YAAY;"}
+{"version":3,"file":"wje-orgchart-item.js","sources":["../packages/wje-orgchart-item/orgchart-item.element.js","../packages/wje-orgchart-item/orgchart-item.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @attribute {boolean} boss - The boss of the orgchart item (default: false).\n * @attribute {boolean} virtual - Renders the item as a structural connector without its own card or expander.\n * @slot - The default slot for the orgchart item.\n * @slot child - The child slot for the orgchart item.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @csspart expander - Styles the expander element.\n * // @fires wje-orgchart-item:click - Emitted when the item card is clicked.\n * @tag wje-orgchart-item\n */\nexport default class OrgchartItem extends WJElement {\n    /**\n     * Creates an instance of OrgchartItem.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the boss of the orgchart item.\n     * @param value\n     */\n\n    set boss(value) {\n        if (value) this.setAttribute('boss', value);\n    }\n\n    /**\n     * Gets the boss of the orgchart item.\n     * @returns {boolean}\n     */\n\n    get boss() {\n        return this.hasAttribute('boss');\n    }\n\n    /**\n     * Sets whether the item should render only as a structural connector.\n     * @param {boolean} value True when the item should not render its own card.\n     */\n    set virtual(value) {\n        this.toggleAttribute('virtual', Boolean(value));\n    }\n\n    /**\n     * Gets whether the item renders only as a structural connector.\n     * @returns {boolean} True when the item has the virtual attribute.\n     */\n    get virtual() {\n        return this.hasAttribute('virtual');\n    }\n\n    className = 'OrgchartItem';\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 attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['virtual'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    beforeDraw() {\n        if (this.parentElement && this.parentElement.tagName === 'WJE-ORGCHART-GROUP') {\n            this.classList.add('parent-group');\n        }\n    }\n\n    /**\n     * Draws the component for the org chart item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('orgchart-item');\n\n        let card = document.createElement('wje-card');\n        card.setAttribute('part', 'card');\n\n        let slot = document.createElement('slot');\n\n        let child = document.createElement('slot');\n        child.setAttribute('name', 'child');\n\n        let expander = document.createElement('div');\n        expander.setAttribute('part', 'expander');\n        expander.classList.add('expander');\n        expander.innerHTML = '-';\n\n        card.appendChild(slot);\n        if (!this.virtual && this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === 'WJE-ORGCHART'))\n            card.appendChild(expander); // if the orgchart item has children and\n\n        if (!this.virtual) native.appendChild(card);\n        native.appendChild(child);\n\n        fragment.appendChild(native);\n\n        this.expander = expander;\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart item.\n     */\n    afterDraw() {\n        if (!this.virtual) this.card.addEventListener('click', this.handleItemClick);\n        this.expander.addEventListener('click', this.toggleChildren);\n    }\n\n    handleItemClick = (e) => {\n        if (e.composedPath().includes(this.expander)) return;\n\n        e.stopPropagation();\n        event.dispatchCustomEvent(this, 'wje-orgchart-item:click', {\n            target: this,\n            originalEvent: e,\n        });\n    };\n\n    /**\n     * Toggles the children of the orgchart item.\n     * @param e The event object.\n     */\n    toggleChildren = (e) => {\n        e.stopPropagation();\n        this.classList.toggle('collapse');\n        if (this.classList.contains('collapse')) e.target.innerHTML = '+';\n        else e.target.innerHTML = '-';\n    };\n}\n","import OrgchartItem from './orgchart-item.element.js';\n\nexport default OrgchartItem;\n\nOrgchartItem.define('wje-orgchart-item', OrgchartItem);\n"],"names":[],"mappings":";;;;;;AAkBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAK;AAqCT,qCAAY;AA+EZ,2CAAkB,CAAC,MAAM;AACrB,UAAI,EAAE,aAAY,EAAG,SAAS,KAAK,QAAQ,EAAG;AAE9C,QAAE,gBAAe;AACjB,YAAM,oBAAoB,MAAM,2BAA2B;AAAA,QACvD,QAAQ;AAAA,QACR,eAAe;AAAA,MAC3B,CAAS;AAAA,IACL;AAMA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,QAAE,gBAAe;AACjB,WAAK,UAAU,OAAO,UAAU;AAChC,UAAI,KAAK,UAAU,SAAS,UAAU,EAAG,GAAE,OAAO,YAAY;AAAA,UACzD,GAAE,OAAO,YAAY;AAAA,IAC9B;AAAA,EAtIA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,KAAK,OAAO;AACZ,QAAI,MAAO,MAAK,aAAa,QAAQ,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,gBAAgB,WAAW,QAAQ,KAAK,CAAC;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,SAAS;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AAAA,EACxB;AAAA,EAEA,aAAa;AACT,QAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,sBAAsB;AAC3E,WAAK,UAAU,IAAI,cAAc;AAAA,IACrC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,MAAM;AAEhC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AACjC,aAAS,YAAY;AAErB,SAAK,YAAY,IAAI;AACrB,QAAI,CAAC,KAAK,WAAW,KAAK,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAG,YAAY,cAAc;AACjH,WAAK,YAAY,QAAQ;AAE7B,QAAI,CAAC,KAAK,QAAS,QAAO,YAAY,IAAI;AAC1C,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,OAAO;AAEZ,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,QAAI,CAAC,KAAK,QAAS,MAAK,KAAK,iBAAiB,SAAS,KAAK,eAAe;AAC3E,SAAK,SAAS,iBAAiB,SAAS,KAAK,cAAc;AAAA,EAC/D;AAsBJ;AC5JA,aAAa,OAAO,qBAAqB,YAAY;"}

package/dist/wje-orgchart.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "* {\n    margin: 0;\n    padding: 0;\n}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n";
+const styles = "* {\n    margin: 0;\n    padding: 0;\n}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n\n:host([flat]) {\n    .native-orgchart {\n        padding-top: 0;\n    }\n\n    &::before {\n        display: none;\n    }\n}\n";
 class Orgchart extends WJElement {
   /**
    * Creates an instance of Orgchart.
@@ -11,6 +11,32 @@ class Orgchart extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Orgchart");
+    /**
+     * Marks direct children that are rendered inside a flat chart.
+     */
+    __publicField(this, "syncFlatChildren", () => {
+      var _a, _b;
+      let children = new Set(((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || []);
+      (_b = this.flatChildren) == null ? void 0 : _b.forEach((child) => {
+        if (!children.has(child)) child.classList.remove("flat-child");
+      });
+      children.forEach((child) => child.classList.toggle("flat-child", this.flat));
+      this.flatChildren = children;
+    });
+  }
+  /**
+   * Sets whether the chart should omit its incoming connector spacing.
+   * @param {boolean} value True when the chart should render without top connector spacing.
+   */
+  set flat(value) {
+    this.toggleAttribute("flat", Boolean(value));
+  }
+  /**
+   * Gets whether the chart omits its incoming connector spacing.
+   * @returns {boolean} True when the chart has the flat attribute.
+   */
+  get flat() {
+    return this.hasAttribute("flat");
   }
   /**
    * Returns the CSS styles for the component.
@@ -20,6 +46,13 @@ class Orgchart extends WJElement {
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Returns attributes that trigger a redraw when they change.
+   * @returns {Array<string>} Attribute names that require a new template render.
+   */
+  static get observedAttributes() {
+    return ["flat"];
+  }
   /**
    * Sets up the attributes for the component.
    */
@@ -40,8 +73,16 @@ class Orgchart extends WJElement {
     native.appendChild(slot);
     fragment.appendChild(native);
     this.native = native;
+    this.defaultSlot = slot;
     return fragment;
   }
+  /**
+   * Syncs flat chart state to direct slotted children.
+   */
+  afterDraw() {
+    this.defaultSlot.addEventListener("slotchange", this.syncFlatChildren);
+    this.syncFlatChildren();
+  }
   /**
    * Sync ARIA attributes on host.
    */

package/dist/wje-orgchart.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-orgchart.js","sources":["../packages/wje-orgchart/orgchart.element.js","../packages/wje-orgchart/orgchart.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Orgchart is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/Orgchart\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-orgchart\n * @example\n */\nexport default class Orgchart extends WJElement {\n    /**\n     * Creates an instance of Orgchart.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Orgchart';\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     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the org chart.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-orgchart');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'tree' });\n        }\n    }\n}\n","import Orgchart from './orgchart.element.js';\n\nexport default Orgchart;\n\nOrgchart.define('wje-orgchart', Orgchart);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAK;AAGT,qCAAY;AAAA,EAFZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AAEd,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,IACtC;AAAA,EACJ;AACJ;AClEA,SAAS,OAAO,gBAAgB,QAAQ;"}
+{"version":3,"file":"wje-orgchart.js","sources":["../packages/wje-orgchart/orgchart.element.js","../packages/wje-orgchart/orgchart.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Orgchart is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/Orgchart\n * @status stable\n * @augments WJElement\n * @attribute {boolean} flat - Removes the incoming connector spacing for nested charts that should visually continue on the same level.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @tag wje-orgchart\n * @example\n */\nexport default class Orgchart extends WJElement {\n    /**\n     * Creates an instance of Orgchart.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets whether the chart should omit its incoming connector spacing.\n     * @param {boolean} value True when the chart should render without top connector spacing.\n     */\n    set flat(value) {\n        this.toggleAttribute('flat', Boolean(value));\n    }\n\n    /**\n     * Gets whether the chart omits its incoming connector spacing.\n     * @returns {boolean} True when the chart has the flat attribute.\n     */\n    get flat() {\n        return this.hasAttribute('flat');\n    }\n\n    className = 'Orgchart';\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 attributes that trigger a redraw when they change.\n     * @returns {Array<string>} Attribute names that require a new template render.\n     */\n    static get observedAttributes() {\n        return ['flat'];\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draws the component for the org chart.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-orgchart');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n        this.defaultSlot = slot;\n\n        return fragment;\n    }\n\n    /**\n     * Syncs flat chart state to direct slotted children.\n     */\n    afterDraw() {\n        this.defaultSlot.addEventListener('slotchange', this.syncFlatChildren);\n        this.syncFlatChildren();\n    }\n\n    /**\n     * Marks direct children that are rendered inside a flat chart.\n     */\n    syncFlatChildren = () => {\n        let children = new Set(this.defaultSlot?.assignedElements({ flatten: true }) || []);\n\n        this.flatChildren?.forEach((child) => {\n            if (!children.has(child)) child.classList.remove('flat-child');\n        });\n\n        children.forEach((child) => child.classList.toggle('flat-child', this.flat));\n        this.flatChildren = children;\n    };\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'tree' });\n        }\n    }\n}\n","import Orgchart from './orgchart.element.js';\n\nexport default Orgchart;\n\nOrgchart.define('wje-orgchart', Orgchart);\n"],"names":[],"mappings":";;;;;AAce,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAK;AAmBT,qCAAY;AA6DZ;AAAA;AAAA;AAAA,4CAAmB,MAAM;;AACrB,UAAI,WAAW,IAAI,MAAI,UAAK,gBAAL,mBAAkB,iBAAiB,EAAE,SAAS,YAAW,EAAE;AAElF,iBAAK,iBAAL,mBAAmB,QAAQ,CAAC,UAAU;AAClC,YAAI,CAAC,SAAS,IAAI,KAAK,EAAG,OAAM,UAAU,OAAO,YAAY;AAAA,MACjE;AAEA,eAAS,QAAQ,CAAC,UAAU,MAAM,UAAU,OAAO,cAAc,KAAK,IAAI,CAAC;AAC3E,WAAK,eAAe;AAAA,IACxB;AAAA,EAxFA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,KAAK,OAAO;AACZ,SAAK,gBAAgB,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,MAAM;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AACd,SAAK,cAAc;AAEnB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,YAAY;AACR,SAAK,YAAY,iBAAiB,cAAc,KAAK,gBAAgB;AACrE,SAAK,iBAAgB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA,EAmBA,WAAW;AACP,QAAI,CAAC,KAAK,aAAa,MAAM,GAAG;AAC5B,WAAK,aAAa,EAAE,MAAM,OAAM,CAAE;AAAA,IACtC;AAAA,EACJ;AACJ;ACnHA,SAAS,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-popup.js

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

package/dist/wje-relative-time.js

@@ -106,7 +106,7 @@ class RelativeTime extends WJElement {
     const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
     return this.localizer.relativeTime(
       this.getAttribute("lang"),
-      Math.floor(deltaSeconds / divisor),
+      Math.trunc(deltaSeconds / divisor),
       units[unitIndex],
       { numeric: "auto" }
     );

package/dist/wje-relative-time.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 ['date', 'lang'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.native) {\n            this.native.innerText = this.getRelativeTimeString();\n            if (this.date) this.native.setAttribute('datetime', this.date);\n            else this.native.removeAttribute('datetime');\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n        if (this.date) element.setAttribute('datetime', this.date);\n\n        fragment.appendChild(element);\n        this.native = element;\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.floor(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-relative-time.js","sources":["../packages/wje-relative-time/relative-time.element.js","../packages/wje-relative-time/relative-time.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\nimport { default as WJElement } from '../wje-element/element.js';\n\n/**\n * `RelativeTime` is a custom web component that represents a relative time component.\n * @summary This element represents a relative time component.\n * @documentation https://elements.webjet.sk/components/relative-time\n * @status stable\n * @augments WJElement\n * @csspart native - The native part of the relative time component.\n * @tag wje-relative-time\n */\n\nexport default class RelativeTime extends WJElement {\n    /**\n     * Creates an instance of RelativeTime.\n     * @class\n     */\n    constructor() {\n        super();\n        this.localizer = new Localizer(this);\n    }\n\n    /**\n     * Sets the date of the relative time component.\n     * @param value\n     */\n    set date(value) {\n        this.setAttribute('date', value);\n    }\n\n    /**\n     * Gets the date of the relative time component.\n     * @returns {string}\n     */\n    get date() {\n        return this.getAttribute('date');\n    }\n\n    /**\n     * Sets the object date of the relative time component.\n     * @param value\n     */\n    set objectDate(value) {\n        this.setAttribute('object-date', value);\n    }\n\n    /**\n     * Gets the object date of the relative time component.\n     * @returns {Date}\n     */\n    get objectDate() {\n        let date = new Date();\n        let inputDate = this.date;\n\n        if (!!inputDate && inputDate !== '') {\n            inputDate = this.isISODate(inputDate) ? inputDate : +inputDate * 1000;\n\n            date = new Date(inputDate);\n        }\n\n        return date;\n    }\n\n    /**\n     * Sets the lang of the relative time component.\n     * @type {string}\n     */\n    className = 'RelativeTime';\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 ['date', 'lang'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (this.native) {\n            this.native.innerText = this.getRelativeTimeString();\n            if (this.date) this.native.setAttribute('datetime', this.date);\n            else this.native.removeAttribute('datetime');\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'status' });\n    }\n\n    /**\n     * Draws the component for the relative time.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-relative-time');\n        element.innerText = this.getRelativeTimeString();\n        if (this.date) element.setAttribute('datetime', this.date);\n\n        fragment.appendChild(element);\n        this.native = element;\n\n        return fragment;\n    }\n\n    /**\n     * Returns the relative time string for the given date.\n     */\n    getRelativeTimeString(lang = navigator.language) {\n        if (this.objectDate.toString() === 'Invalid Date' || this.objectDate.toString() === 'NaN') {\n            return '';\n        }\n\n        const timeMs = this.objectDate.getTime();\n\n        const deltaSeconds = Math.round((timeMs - Date.now()) / 1000);\n\n        const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];\n\n        const units = ['second', 'minute', 'hour', 'day', 'week', 'month', 'year'];\n        const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(deltaSeconds));\n        const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;\n\n        return this.localizer.relativeTime(\n            this.getAttribute('lang'),\n            Math.trunc(deltaSeconds / divisor),\n            units[unitIndex],\n            { numeric: 'auto' }\n        );\n    }\n\n    /**\n     * Checks if the given string is an ISO date.\n     * @param {string} str The string to check.\n     * @returns {boolean} True if the string is an ISO date, false otherwise.\n     */\n    isISODate(str) {\n        const date = new Date(str);\n        return !isNaN(date.getTime());\n    }\n}\n","import RelativeTime from './relative-time.element.js';\n\nexport default RelativeTime;\n\nRelativeTime.define('wje-relative-time', RelativeTime);\n"],"names":[],"mappings":"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"}

package/dist/wje-select.js

@@ -22,7 +22,7 @@ import Input from "./wje-input.js";
 import Option from "./wje-option.js";
 import Options from "./wje-options.js";
 import Checkbox from "./wje-checkbox.js";
-import { P as Popup } from "./popup.element-C8-g3WLs.js";
+import { P as Popup } from "./popup.element-B1HZhDZJ.js";
 const styles = "/*\n[ WJ Select ]\n*/\n\n:host {\n    margin-bottom: var(--wje-select-margin-bottom);\n    width: 100%;\n    display: block;\n    [slot='arrow'] {\n        transform: rotate(0deg);\n        transition: all 0.2s ease-in;\n    }\n    label {\n        margin: var(--wje-select-label-margin);\n        padding: var(--wje-select-label-padding);\n        display: var(--wje-select-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-select-label-line-height);\n        font-size: var(--wje-select-label-font-size);\n    }\n}\n\n.native-select {\n    position: relative;\n    &.default {\n        .wrapper {\n            display: block;\n						background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n            padding-inline: 0.5rem;\n            padding-top: 0.125rem;\n            padding-bottom: 0.125rem;\n        }\n        .input-wrapper {\n            padding: 0;\n            min-height: 28px;\n            margin-top: -4px;\n        }\n        &.focused {\n            wje-label {\n                opacity: 0.67;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n        label {\n            &.fade {\n                opacity: 0.5;\n                font-size: 12px;\n                letter-spacing: normal;\n            }\n        }\n    }\n    &.standard {\n        .wrapper {\n            height: var(--wje-select-height);\n            box-sizing: border-box;\n            background-color: var(--wje-select-background);\n            border-width: var(--wje-select-border-width);\n            border-style: var(--wje-select-border-style);\n            border-color: var(--wje-select-border-color);\n            border-radius: var(--wje-select-border-radius);\n        }\n        .input-wrapper {\n            background: transparent;\n            width: 100%;\n        }\n        slot[name='error'] {\n            position: static;\n\n            background: transparent;\n            padding: 0.25rem 0;\n            left: auto;\n            transform: none;\n            color: var(--wje-input-color-invalid);\n            font-size: 12px;\n            line-height: normal;\n        }\n    }\n}\n\n.wrapper {\n    display: flex;\n    width: 100%;\n}\n\n.input-wrapper {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) auto auto auto;\n    align-items: center;\n    background-color: var(--wje-select-background);\n    /*min-height: 28px;*/\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    appearance: none;\n    padding: 2px 0.5rem;\n    font-size: 14px !important;\n    font-weight: normal;\n    vertical-align: middle;\n    input[readonly] {\n        pointer-events: none;\n        caret-color: transparent;\n    }\n}\n\ninput {\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n    border: medium;\n    height: 25px;\n    min-height: 25px;\n    padding: 0;\n    background: none;\n    box-shadow: none;\n    width: 100%;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    outline: 0;\n    font-size: 14px !important;\n}\n\n.display-wrapper {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    position: relative;\n}\n\n.display-input {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    pointer-events: none;\n}\n\n.display-text {\n    display: block;\n    min-width: 0;\n    width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    color: var(--wje-select-color);\n    line-height: var(--wje-select-line-height);\n    font-size: 14px !important;\n    font-weight: 400;\n    letter-spacing: 0.01em;\n}\n\n.display-text[data-placeholder-visible]::before {\n    content: attr(data-placeholder);\n}\n\n::placeholder {\n    opacity: 1;\n}\n\n:host [active] {\n    .wrapper {\n        border-radius: var(--wje-select-border-radius);\n    }\n    [slot='arrow'] {\n        transform: rotate(180deg);\n        transition: all 0.2s ease-in;\n    }\n}\n\n.options-wrapper {\n    border-width: var(--wje-select-options-border-width);\n    border-style: var(--wje-select-options-border-style);\n    border-color: var(--wje-select-options-border-color);\n    border-radius: var(--wje-select-options-border-radius);\n    margin-top: calc(0px - var(--wje-select-border-width));\n    background-color: var(--wje-select-options-background-color);\n    overflow: hidden;\n}\n\n.find {\n    margin-block: var(--wje-select-find-margin-block);\n    margin-inline: var(--wje-select-find-margin-inline);\n    width: var(--wje-select-find-width);\n}\n\n.list {\n    overflow: auto;\n    height: 100%;\n    position: relative;\n}\n\n.list:has(.empty:not([hidden])) {\n    min-height: 44px;\n}\n\n.empty {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wje-spacing-small);\n    color: var(--wje-select-color);\n    text-align: center;\n    background-color: var(--wje-select-options-background-color);\n    pointer-events: none;\n}\n\n.empty[hidden] {\n    display: none;\n}\n\n.options-wrapper:has(.find) .list {\n    height: calc(100% - 32px - 2 * var(--wje-select-find-margin-block));\n}\n\n:host([multiple]) input {\n    position: absolute;\n    z-index: -1;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    opacity: 0;\n}\n\n:host([multiple]) .display-wrapper {\n    display: none;\n}\n\n:host([multiple]) .chips {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--wje-spacing-3x-small);\n}\n\n:host([disabled]) .input-wrapper {\n    opacity: 0.5;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n.counter {\n    padding-inline: 0.5rem;\n}\n\nwje-chip {\n    --wje-chip-margin: 0 0.25rem 0 0;\n}\n\nwje-button {\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n.slot-start,\n.slot-end {\n    &:not(:empty) {\n        margin-right: 0.5rem;\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-select-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-select-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n.input-hidden{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n";
 const _Select = class _Select extends FormAssociatedElement {
   constructor() {

package/dist/wje-tooltip.js

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 import "./wje-popup.js";
-import { P as Popup } from "./popup.element-C8-g3WLs.js";
+import { P as Popup } from "./popup.element-B1HZhDZJ.js";
 import { event } from "./event.js";
 const styles = "/*\n[ WJ Tooltip ]\n*/\n\n.native-tooltip {\n    display: flex;\n    align-items: center;\n    padding: var(--wje-tooltip-spacing);\n    color: var(--wje-tooltip-color);\n    background-color: var(--wje-tooltip-background);\n    font-weight: var(--wje-tooltip-font-weight);\n    font-size: var(--wje-tooltip-font-size);\n    border-radius: var(--wje-tooltip-border-radius);\n    line-height: var(--wje-tooltip-line-height);\n    box-sizing: border-box;\n    box-shadow: var(--wje-tooltip-shadow);\n}\n\n::slotted([slot='start']) {\n    margin: 0 0.3rem 0 0;\n}\n\n::slotted([slot='end']) {\n    margin: 0 0 0 0.3rem;\n}\n\n.arrow {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    background: var(--wje-tooltip-arrow-color);\n    transform: rotate(45deg);\n}\n";
 const _Tooltip = class _Tooltip extends WJElement {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",