wj-elements 0.5.2 → 0.6.0

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

@@ -33,6 +33,7 @@ export default class Dialog extends WJElement {
      */
     static get observedAttributes(): any[];
     _instanceId: number;
+    _opening: boolean;
     /**
      * Sets the value of the 'headline' attribute.
      * @param {string} value The new value for the 'headline' attribute.

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

@@ -4,7 +4,9 @@ import { default as WJElement } from '../wje-element/element.js';
  * @documentation https://elements.webjet.sk/components/Orgchart
  * @status stable
  * @augments WJElement
+ * @attribute {boolean} flat - Removes the incoming connector spacing for nested charts that should visually continue on the same level.
  * @csspart - Styles the element.
+ * @csspart native - Styles the native element.
  * @tag wje-orgchart
  * @example
  */
@@ -15,6 +17,16 @@ export default class Orgchart extends WJElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * 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: boolean);
+    /**
+     * Gets whether the chart omits its incoming connector spacing.
+     * @returns {boolean} True when the chart has the flat attribute.
+     */
+    get flat(): boolean;
     /**
      * Draws the component for the org chart.
      * @returns {DocumentFragment}

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

@@ -5,6 +5,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @status stable
  * @augments WJElement
  * @attribute {boolean} boss - The boss of the orgchart item (default: false).
+ * @attribute {boolean} virtual - Renders the item as a structural connector without its own card or expander.
  * @slot - The default slot for the orgchart item.
  * @slot child - The child slot for the orgchart item.
  * @csspart - Styles the element.
@@ -19,6 +20,11 @@ export default class OrgchartItem extends WJElement {
      * @returns {CSSStyleSheet}
      */
     static get cssStyleSheet(): CSSStyleSheet;
+    /**
+     * Returns attributes that trigger a redraw when they change.
+     * @returns {Array<string>} Attribute names that require a new template render.
+     */
+    static get observedAttributes(): Array<string>;
     /**
      * Sets the boss of the orgchart item.
      * @param value
@@ -29,6 +35,16 @@ export default class OrgchartItem extends WJElement {
      * @returns {boolean}
      */
     get boss(): boolean;
+    /**
+     * 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: boolean);
+    /**
+     * Gets whether the item renders only as a structural connector.
+     * @returns {boolean} True when the item has the virtual attribute.
+     */
+    get virtual(): boolean;
     beforeDraw(): void;
     /**
      * Draws the component for the org chart item.

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-orgchart-item.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 = ":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";
+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 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\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";
 class OrgchartItem extends WJElement {
   /**
    * Creates an instance of OrgchartItem.
@@ -35,6 +35,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 +57,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,9 +94,9 @@ 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;

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 } 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 * @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\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":";;;;;AAiBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAK;AAqCT,qCAAY;AAiFZ;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,EAzHA;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;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;AClJA,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.
@@ -12,6 +12,20 @@ class Orgchart extends WJElement {
     super();
     __publicField(this, "className", "Orgchart");
   }
+  /**
+   * 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.
    * @static

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     * 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":";;;;;AAce,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAK;AAmBT,qCAAY;AAAA,EAlBZ;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,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;ACpFA,SAAS,OAAO,gBAAgB,QAAQ;"}

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/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.0",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",