wj-elements 0.1.254 → 0.2.0-alpha.1

package/dist/wje-breadcrumb.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n}\n\n:host(.collapsed) {\n    display: none;\n}\n.native-breadcrumb {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    outline: none;\n    background: inherit;\n    padding: 0.25rem 0.75rem;\n    color: var(--wje-breadcrumb-a);\n    text-decoration: none;\n    &.hidden {\n        display: none;\n    }\n    &.active {\n        font-weight: bold;\n    }\n    &:hover {\n        color: var(--wje-breadcrumb-a-hover);\n    }\n}\n\nbutton {\n    margin-inline: 0.75rem;\n    border: 0 solid transparent;\n    border-radius: 3px;\n    background-color: transparent;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n}\n\n.separator {\n    display: inline-flex;\n    align-items: center;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
+const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n\n    .native-breadcrumb {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        background: inherit;\n        padding: 0.25rem 0.75rem;\n        color: var(--wje-breadcrumb-a);\n        text-decoration: none;\n        font-size: var(--wje-breadcrumb-font-size);\n        &.hidden {\n            display: none;\n        }\n        &.active {\n            font-weight: var(--wje-breadcrumb-active-font-weight);\n            font-size: var(--wje-breadcrumb-active-font-size);\n        }\n        &:hover {\n            color: var(--wje-breadcrumb-a-hover);\n        }\n    }\n\n    button {\n        margin-inline: 0.75rem;\n        border: 0 solid transparent;\n        border-radius: 3px;\n        background-color: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n    }\n\n    .separator {\n        display: inline-flex;\n        align-items: center;\n    }\n}\n\n:host(.collapsed) {\n    display: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
 class Breadcrumb extends WJElement {
   /**
    * Breadcrumb constructor method.
@@ -17,7 +17,7 @@ class Breadcrumb extends WJElement {
      */
     __publicField(this, "className", "Breadcrumb");
     this._showSeparator = true;
-    this.showCollapsedIndicator = false;
+    this._showCollapsedIndicator = false;
   }
   /**
    * Get show separator flag.
@@ -45,7 +45,8 @@ class Breadcrumb extends WJElement {
    * @returns {string} The collapsed variant value in uppercase.
    */
   get collapsedVariant() {
-    let variant = this.parentElement.variant || this._collapsedVariant;
+    var _a;
+    let variant = ((_a = this.parentElement) == null ? void 0 : _a.variant) || this._collapsedVariant;
     return variant.toUpperCase();
   }
   /**
@@ -65,24 +66,28 @@ class Breadcrumb extends WJElement {
     return ["show-collapsed-indicator", "collapsed", "last"];
   }
   /**
-   * Attribute changed callback method.
-   * @returns {boolean} false - Always returns false
+   * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
+   * @param {string} name The name of the attribute that was changed.
+   * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.
+   * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
+   * @returns {boolean} Returns false to signal no default behavior is implemented.
    */
   attributeChangedCallback(name, oldValue, newValue) {
+    var _a;
+    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
     if (name === "collapsed") {
-      if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute("show-collapsed-indicator"))
-        this.classList.add("collapsed");
+      const isCollapsed = WjElementUtils.stringToBoolean(newValue);
+      this.classList.toggle("collapsed", isCollapsed && !this.hasAttribute("show-collapsed-indicator"));
     } else if (name === "show-collapsed-indicator") {
-      if (WjElementUtils.stringToBoolean(newValue)) {
-        this.showCollapsedIndicator = true;
-        this.refresh();
-      }
+      const isOn = WjElementUtils.stringToBoolean(newValue);
+      this._showCollapsedIndicator = isOn;
+      this.refresh();
     } else if (name === "last") {
-      this.active = WjElementUtils.stringToBoolean(newValue);
-      this.showSeparator = !WjElementUtils.stringToBoolean(newValue);
+      const isLast = WjElementUtils.stringToBoolean(newValue);
+      this.active = isLast;
+      this.showSeparator = !isLast;
       this.refresh();
     }
-    return false;
   }
   /**
    * Setup attributes for the Breadcrumb element.
@@ -105,12 +110,10 @@ class Breadcrumb extends WJElement {
     start.setAttribute("name", "start");
     let end = document.createElement("slot");
     end.setAttribute("name", "end");
-    native.appendChild(start);
-    native.appendChild(slot);
-    native.appendChild(end);
-    fragment.appendChild(native);
-    if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {
-      fragment.appendChild(this.drawCollapsedIndicator());
+    native.append(start, slot, end);
+    fragment.append(native);
+    if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {
+      fragment.append(this.drawCollapsedIndicator());
       native.classList.add("hidden");
     }
     if (this.showSeparator) {
@@ -120,18 +123,20 @@ class Breadcrumb extends WJElement {
       if (WjElementUtils.hasSlot(this, "separator")) {
         let slotSeparator = document.createElement("slot");
         slotSeparator.setAttribute("name", "separator");
-        separator.appendChild(slotSeparator);
+        separator.append(slotSeparator);
       } else {
         separator.innerHTML = `<wje-icon name=${this.separator || "chevron-right"}></wje-icon>`;
       }
-      fragment.appendChild(separator);
+      fragment.append(separator);
     }
     this.native = native;
     return fragment;
   }
   /**
-   * Draw collapsed indicator method.
-   * @returns {object} - The collapsed indicator element.
+   * Renders the collapsed indicator based on the current collapsed variant.
+   * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.
+   * Otherwise, it invokes the collapseButton method.
+   * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.
    */
   drawCollapsedIndicator() {
     let collapsedIndicator = null;
@@ -143,8 +148,12 @@ class Breadcrumb extends WJElement {
     return collapsedIndicator;
   }
   /**
-   * Collapse dropdown button.
-   * @returns {object} dropdown - The dropdown button.
+   * Creates and returns a dropdown UI component for collapsed breadcrumbs.
+   * This method generates a dropdown element with a button trigger and a menu populated with items corresponding
+   * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that
+   * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding
+   * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.
+   * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.
    */
   collapseDropdown() {
     let dropdown = document.createElement("wje-dropdown");
@@ -156,21 +165,49 @@ class Breadcrumb extends WJElement {
     button.innerHTML = `<wje-icon name="dots"></wje-icon>`;
     let menu = document.createElement("wje-menu");
     menu.setAttribute("variant", "context");
-    dropdown.appendChild(button);
-    dropdown.appendChild(menu);
-    dropdown.innerHTML = `<wje-button slot="trigger" fill="link">
-            <wje-icon name="dots"></wje-icon>
-        </wje-button>
-        <wje-menu variant="context">
-            <wje-menu-item>Test 0</wje-menu-item>
-            <wje-menu-item>Test 1</wje-menu-item>
-            <wje-menu-item>Test 2</wje-menu-item>
-        </wje-menu>`;
+    menu.addEventListener("click", (e) => {
+      var _a;
+      e.stopPropagation();
+      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+    });
+    this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {
+      let menuItem = document.createElement("wje-menu-item");
+      menuItem.innerHTML = b.innerHTML;
+      menuItem.__breadcrumb = b;
+      menuItem.addEventListener("wje-menu-item:click", (e) => {
+        var _a, _b, _c;
+        (_a = e.preventDefault) == null ? void 0 : _a.call(e);
+        e.stopPropagation();
+        (_b = e.stopImmediatePropagation) == null ? void 0 : _b.call(e);
+        const breadcrumb = e.currentTarget.__breadcrumb;
+        if (!breadcrumb) return;
+        const native = breadcrumb.native || ((_c = breadcrumb.shadowRoot) == null ? void 0 : _c.querySelector("a.native-breadcrumb"));
+        if (native && typeof native.click === "function") {
+          native.click();
+        } else if (typeof breadcrumb.click === "function") {
+          breadcrumb.click();
+        } else {
+          breadcrumb.dispatchEvent(
+            new MouseEvent("click", {
+              bubbles: true,
+              composed: true,
+              cancelable: true
+            })
+          );
+        }
+      });
+      menu.append(menuItem);
+    });
+    dropdown.append(button, menu);
     return dropdown;
   }
   /**
-   * Collapse button method.
-   * @returns {object} - The button element.
+   * Creates a button element that expands hidden breadcrumbs when clicked.
+   * The button is set with appropriate attributes and event listeners to handle
+   * the expanding of hidden breadcrumb elements. Clicking the button will remove
+   * the button itself, reveal hidden breadcrumbs, and stop the current event
+   * propagation.
+   * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.
    */
   collapseButton() {
     let button = document.createElement("button");
@@ -180,13 +217,20 @@ class Breadcrumb extends WJElement {
     event.addListener(button, "click", null, (e) => {
       this.native.classList.remove("hidden");
       button.remove();
-      this.parentElement.querySelectorAll("wje-breadcrumb").forEach((el) => {
+      this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {
         el.classList.remove("collapsed");
       });
       e.stopPropagation();
     });
     return button;
   }
+  /**
+   * Retrieves the breadcrumb trail for the current element by returning its parent element.
+   * @returns {Element} The parent element representing the breadcrumb trail.
+   */
+  getBreadcrumbs() {
+    return this.parentElement;
+  }
 }
 Breadcrumb.define("wje-breadcrumb", Breadcrumb);
 export {

package/dist/wje-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this.showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Attribute changed callback method.\n     * @returns {boolean} false - Always returns false\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (name === 'collapsed') {\n            if (WjElementUtils.stringToBoolean(newValue) && !this.hasAttribute('show-collapsed-indicator'))\n                this.classList.add('collapsed');\n        } else if (name === 'show-collapsed-indicator') {\n            if (WjElementUtils.stringToBoolean(newValue)) {\n                this.showCollapsedIndicator = true;\n                this.refresh();\n            }\n        } else if (name === 'last') {\n            this.active = WjElementUtils.stringToBoolean(newValue);\n            this.showSeparator = !WjElementUtils.stringToBoolean(newValue);\n            this.refresh();\n        }\n\n        return false;\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.appendChild(start);\n        native.appendChild(slot);\n        native.appendChild(end);\n\n        fragment.appendChild(native);\n        if (WjElementUtils.stringToBoolean(this.showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.appendChild(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.appendChild(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.appendChild(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Draw collapsed indicator method.\n     * @returns {object} - The collapsed indicator element.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Collapse dropdown button.\n     * @returns {object} dropdown - The dropdown button.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        dropdown.appendChild(button);\n        dropdown.appendChild(menu);\n\n        dropdown.innerHTML = `<wje-button slot=\"trigger\" fill=\"link\">\n            <wje-icon name=\"dots\"></wje-icon>\n        </wje-button>\n        <wje-menu variant=\"context\">\n            <wje-menu-item>Test 0</wje-menu-item>\n            <wje-menu-item>Test 1</wje-menu-item>\n            <wje-menu-item>Test 2</wje-menu-item>\n        </wje-menu>`;\n\n        return dropdown;\n    }\n\n    /**\n     * Collapse button method.\n     * @returns {object} - The button element.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.parentElement.querySelectorAll('wje-breadcrumb').forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-breadcrumb.js","sources":["../packages/wje-breadcrumb/breadcrumb.element.js","../packages/wje-breadcrumb/breadcrumb.js"],"sourcesContent":["import { default as WJElement, event, WjElementUtils } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumb element, extending the WJElement class. It provides a navigational aid in user interfaces, displaying the current location within a hierarchy.\n * @documentation https://elements.webjet.sk/components/breadcrumb\n * @status stable\n * @augments WJElement\n * @slot - The main content of the breadcrumb.\n * @slot start - Slot for content at the start of the breadcrumb.\n * @slot end - Slot for content at the end of the breadcrumb.\n * @slot separator - Slot for a custom separator between breadcrumb items.\n * @csspart native - The native wrapper of the breadcrumb component.\n * @csspart separator - The separator between breadcrumb items.\n * @cssproperty [--wje-breadcrumb-a=var(--wje-color-contrast-8)] - The color of the breadcrumb text.\n * @cssproperty [--wje-breadcrumb-a-hover=var(--wje-color-contrast-6)] - The color of the breadcrumb separator line.\n * @tag wje-breadcrumb\n */\nexport default class Breadcrumb extends WJElement {\n    /**\n     * Breadcrumb constructor method.\n     */\n    constructor() {\n        super();\n\n        this._showSeparator = true;\n        this._showCollapsedIndicator = false;\n    }\n\n    /**\n     * Get show separator flag.\n     * @returns {boolean} showSeparator - The show separator flag\n     */\n    get showSeparator() {\n        return this._showSeparator;\n    }\n\n    /**\n     * Set show separator flag.\n     * @param {boolean} value The value to set\n     */\n    set showSeparator(value) {\n        this._showSeparator = value;\n    }\n\n    /**\n     * Set collapsed variant.\n     * @param {string} value The value to set\n     */\n    set collapsedVariant(value) {\n        this._collapsedVariant = value;\n    }\n\n    /**\n     * Get collapsed variant.\n     * @returns {string} The collapsed variant value in uppercase.\n     */\n    get collapsedVariant() {\n        let variant = this.parentElement?.variant || this._collapsedVariant;\n        return variant.toUpperCase();\n    }\n\n    /**\n     * Class name for the Breadcrumb element.\n     * @type {string}\n     */\n    className = 'Breadcrumb';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumb element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['show-collapsed-indicator', 'collapsed', 'last'];\n    }\n\n    /**\n     * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.\n     * @param {string} name The name of the attribute that was changed.\n     * @param {string|null} oldValue The previous value of the attribute before it was changed. Null if the attribute was not previously set.\n     * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.\n     * @returns {boolean} Returns false to signal no default behavior is implemented.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'collapsed') {\n            const isCollapsed = WjElementUtils.stringToBoolean(newValue);\n\n            // toggle class podľa stavu\n            this.classList.toggle('collapsed', isCollapsed && !this.hasAttribute('show-collapsed-indicator'));\n\n        } else if (name === 'show-collapsed-indicator') {\n            const isOn = WjElementUtils.stringToBoolean(newValue);\n            this._showCollapsedIndicator = isOn;\n            this.refresh();\n\n        } else if (name === 'last') {\n            const isLast = WjElementUtils.stringToBoolean(newValue);\n            this.active = isLast;\n            this.showSeparator = !isLast;\n            this.refresh();\n        }\n    }\n\n    /**\n     * Setup attributes for the Breadcrumb element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumb element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('a');\n        native.classList.add('native-breadcrumb');\n        native.setAttribute('part', 'native');\n\n        if (this.active) native.classList.add('active');\n\n        let slot = document.createElement('slot');\n\n        let start = document.createElement('slot');\n        start.setAttribute('name', 'start');\n\n        let end = document.createElement('slot');\n        end.setAttribute('name', 'end');\n\n        native.append(start, slot, end);\n\n        // APPEND\n        fragment.append(native);\n\n        if (WjElementUtils.stringToBoolean(this._showCollapsedIndicator)) {\n            // pridame button za native element\n            fragment.append(this.drawCollapsedIndicator());\n\n            // skryjeme native element\n            native.classList.add('hidden');\n        }\n\n        if (this.showSeparator) {\n            let separator = document.createElement('span');\n            separator.classList.add('separator');\n            separator.setAttribute('part', 'separator');\n\n            if (WjElementUtils.hasSlot(this, 'separator')) {\n                let slotSeparator = document.createElement('slot');\n                slotSeparator.setAttribute('name', 'separator');\n\n                separator.append(slotSeparator);\n            } else {\n                separator.innerHTML = `<wje-icon name=${this.separator || 'chevron-right'}></wje-icon>`;\n            }\n\n            fragment.append(separator);\n        }\n\n        this.native = native;\n\n        return fragment;\n    }\n\n    /**\n     * Renders the collapsed indicator based on the current collapsed variant.\n     * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.\n     * Otherwise, it invokes the collapseButton method.\n     * @returns {any} The rendered collapsed indicator, either as a dropdown or a button.\n     */\n    drawCollapsedIndicator() {\n        let collapsedIndicator = null;\n\n        if (this.collapsedVariant === 'DROPDOWN') {\n            collapsedIndicator = this.collapseDropdown();\n        } else {\n            collapsedIndicator = this.collapseButton();\n        }\n\n        return collapsedIndicator;\n    }\n\n    /**\n     * Creates and returns a dropdown UI component for collapsed breadcrumbs.\n     * This method generates a dropdown element with a button trigger and a menu populated with items corresponding\n     * to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that\n     * events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding\n     * breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.\n     * @returns {HTMLElement} A configured dropdown element containing a button as trigger and a menu with breadcrumb items.\n     */\n    collapseDropdown() {\n        let dropdown = document.createElement('wje-dropdown');\n        dropdown.setAttribute('placement', 'bottom');\n        dropdown.setAttribute('offset', '10');\n\n        let button = document.createElement('wje-button');\n        button.setAttribute('slot', 'trigger');\n        button.setAttribute('fill', 'link');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        let menu = document.createElement('wje-menu');\n        menu.setAttribute('variant', 'context');\n\n        menu.addEventListener('click', (e) => {\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n        });\n\n        this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((b) => {\n            let menuItem = document.createElement('wje-menu-item');\n            menuItem.innerHTML = b.innerHTML;\n\n            menuItem.__breadcrumb = b;\n\n            menuItem.addEventListener('wje-menu-item:click', (e) => {\n                e.preventDefault?.();\n                e.stopPropagation();\n                e.stopImmediatePropagation?.();\n\n                const breadcrumb = e.currentTarget.__breadcrumb;\n                if (!breadcrumb) return;\n\n                // Prefer clicking the internal anchor (same behavior as real user click), fallback to host click.\n                const native = breadcrumb.native || breadcrumb.shadowRoot?.querySelector('a.native-breadcrumb');\n                if (native && typeof native.click === 'function') {\n                    native.click();\n                } else if (typeof breadcrumb.click === 'function') {\n                    breadcrumb.click();\n                } else {\n                    breadcrumb.dispatchEvent(\n                        new MouseEvent('click', {\n                            bubbles: true,\n                            composed: true,\n                            cancelable: true\n                        })\n                    );\n                }\n            });\n\n            menu.append(menuItem);\n        });\n\n        dropdown.append(button, menu);\n\n        return dropdown;\n    }\n\n    /**\n     * Creates a button element that expands hidden breadcrumbs when clicked.\n     * The button is set with appropriate attributes and event listeners to handle\n     * the expanding of hidden breadcrumb elements. Clicking the button will remove\n     * the button itself, reveal hidden breadcrumbs, and stop the current event\n     * propagation.\n     * @returns {HTMLButtonElement} The created button configured to expand breadcrumbs.\n     */\n    collapseButton() {\n        let button = document.createElement('button');\n        button.setAttribute('aria-label', 'Show more breadcrumbs');\n        button.setAttribute('part', 'collapsed-indicator');\n        button.innerHTML = `<wje-icon name=\"dots\"></wje-icon>`;\n\n        event.addListener(button, 'click', null, (e) => {\n            this.native.classList.remove('hidden');\n            button.remove();\n            this.getBreadcrumbs().getBreadcrumbsCollapsed().forEach((el) => {\n                el.classList.remove('collapsed');\n            });\n            e.stopPropagation();\n        });\n\n        return button;\n    }\n\n    /**\n     * Retrieves the breadcrumb trail for the current element by returning its parent element.\n     * @returns {Element} The parent element representing the breadcrumb trail.\n     */\n    getBreadcrumbs() {\n        return this.parentElement;\n    }\n}\n","import Breadcrumb from './breadcrumb.element.js';\n\n// export * from \"./breadcrumb.element.js\";\nexport default Breadcrumb;\n\nBreadcrumb.define('wje-breadcrumb', Breadcrumb);\n"],"names":[],"mappings":"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"}

package/dist/wje-breadcrumbs.js

@@ -106,7 +106,10 @@ class Breadcrumbs extends WJElement {
     return fragment;
   }
   /**
-   * After draw method for the Breadcrumbs element.
+   * Updates the breadcrumb elements after they are drawn on the page.
+   * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs
+   * if the total exceeds the specified maximum items.
+   * @returns {void} This method does not return a value.
    */
   afterDraw() {
     let breadcrumbs = this.getBreadcrumbs();
@@ -126,12 +129,19 @@ class Breadcrumbs extends WJElement {
     }
   }
   /**
-   * Get breadcrumbs method.
-   * @returns {Array} - The breadcrumbs array
+   * Retrieves all breadcrumb elements within the current instance.
+   * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
    */
   getBreadcrumbs() {
     return Array.from(this.querySelectorAll("wje-breadcrumb")) || [];
   }
+  /**
+   * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
+   * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.
+   */
+  getBreadcrumbsCollapsed() {
+    return Array.from(this.querySelectorAll("wje-breadcrumb[collapsed]")) || [];
+  }
 }
 Breadcrumbs.define("wje-breadcrumbs", Breadcrumbs);
 export {

package/dist/wje-breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        return +this.getAttribute('items-after-collapse') || 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the Breadcrumbs element.\n     */\n    afterDraw() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        let breadcrumb = breadcrumbs.findLast((e) => e);\n\n        breadcrumb.setAttribute('last', true);\n\n        const shouldCollapse =\n            this.maxItems !== undefined &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n        if (shouldCollapse) {\n            breadcrumbs.forEach((b, index) => {\n                if (index === this.itemsBeforeCollapse) {\n                    b.setAttribute('show-collapsed-indicator', true);\n                }\n\n                if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n                    b.setAttribute('collapsed', true);\n                }\n            });\n        }\n    }\n\n    /**\n     * Get breadcrumbs method.\n     * @returns {Array} - The breadcrumbs array\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AACA;ACxLA,YAAY,OAAO,mBAAmB,WAAW;"}
+{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        return +this.getAttribute('items-after-collapse') || 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        let breadcrumb = breadcrumbs.findLast((e) => e);\n\n        breadcrumb.setAttribute('last', true);\n\n        const shouldCollapse =\n            this.maxItems !== undefined &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + this.itemsAfterCollapse <= this.maxItems;\n\n        if (shouldCollapse) {\n            breadcrumbs.forEach((b, index) => {\n                if (index === this.itemsBeforeCollapse) {\n                    b.setAttribute('show-collapsed-indicator', true);\n                }\n\n                if (index >= this.itemsBeforeCollapse && index < breadcrumbs.length - this.itemsAfterCollapse) {\n                    b.setAttribute('collapsed', true);\n                }\n            });\n        }\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AA2Be,MAAM,oBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK/C,cAAc;AACV,UAAO;AA6EX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAvER,SAAK,OAAO;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EACjD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,EAC7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,WAAW,qBAAqB;AAC5B,WAAO,CAAE;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAE5B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,YAAY;AACR,QAAI,cAAc,KAAK,eAAgB;AAEvC,QAAI,YAAY,WAAW,EAAG;AAE9B,QAAI,aAAa,YAAY,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAW,aAAa,QAAQ,IAAI;AAEpC,UAAM,iBACF,KAAK,aAAa,UAClB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,KAAK,sBAAsB,KAAK;AAE/D,QAAI,gBAAgB;AAChB,kBAAY,QAAQ,CAAC,GAAG,UAAU;AAC9B,YAAI,UAAU,KAAK,qBAAqB;AACpC,YAAE,aAAa,4BAA4B,IAAI;AAAA,QACnE;AAEgB,YAAI,SAAS,KAAK,uBAAuB,QAAQ,YAAY,SAAS,KAAK,oBAAoB;AAC3F,YAAE,aAAa,aAAa,IAAI;AAAA,QACpD;AAAA,MACA,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAE;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAE;AAAA,EACnF;AACA;ACnMA,YAAY,OAAO,mBAAmB,WAAW;"}

package/dist/wje-dialog.js

@@ -82,6 +82,13 @@ const styles = `/*
         padding-inline: var(--wje-dialog-footer-padding-inline);
         padding-block: var(--wje-dialog-footer-padding-block);
     }
+
+    /* Footer should not take space when nothing is slotted */
+    .dialog-footer[hidden] {
+        display: none;
+        padding-inline: 0;
+        padding-block: 0;
+    }
 }
 
 .blocking-element {
@@ -267,6 +274,8 @@ dialog[open] {
     }
     .dialog-content {
         overflow: auto;
+        padding-block: 0;
+        margin-block: var(--wje-dialog-content-padding-block);
     }
 }
 `;
@@ -465,6 +474,8 @@ class Dialog extends WJElement {
     footer.innerHTML = "";
     let slotFooter = document.createElement("slot");
     slotFooter.setAttribute("name", "footer");
+    slotFooter.id = "footerSlot";
+    slotFooter.addEventListener("slotchange", () => this.updateHasFooter());
     close.appendChild(icon);
     if (!this.closeHidden) header.appendChild(close);
     header.appendChild(headerActions);
@@ -473,6 +484,7 @@ class Dialog extends WJElement {
     if (!this.hiddenHeader) dialog.appendChild(header);
     dialog.appendChild(body);
     if (!this.hiddenFooter) dialog.appendChild(footer);
+    Promise.resolve().then(() => this.updateHasFooter());
   }
   /**
    * Closes the dialog.
@@ -537,6 +549,29 @@ class Dialog extends WJElement {
       });
     });
   }
+  updateHasFooter() {
+    var _a, _b, _c;
+    if (this.hiddenFooter) {
+      const footerEl2 = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".dialog-footer");
+      if (footerEl2) footerEl2.setAttribute("hidden", "");
+      this.removeAttribute("has-footer");
+      return;
+    }
+    const slot = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById("footerSlot");
+    if (!slot) {
+      this.removeAttribute("has-footer");
+      return;
+    }
+    const assigned = slot.assignedNodes({ flatten: true });
+    const hasContent = assigned.some((n) => {
+      if (n.nodeType === Node.ELEMENT_NODE) return true;
+      if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;
+      return false;
+    });
+    const footerEl = (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".dialog-footer");
+    if (footerEl) footerEl.toggleAttribute("hidden", !hasContent);
+    this.toggleAttribute("has-footer", hasContent);
+  }
 }
 Dialog.define("wje-dialog", Dialog);
 export {

package/dist/wje-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the 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\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\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        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.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\n        let footer = document.createElement('div');\n        footer.setAttribute('part', 'footer');\n        footer.classList.add('dialog-footer');\n        footer.innerHTML = '';\n\n        let slotFooter = document.createElement('slot');\n        slotFooter.setAttribute('name', 'footer');\n\n        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\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.onClose);\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) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 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            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            let blockingElement = document.createElement('div');\n            blockingElement.classList.add('blocking-element');\n\n            let icon = document.createElement('wje-icon');\n            icon.setAttribute('name', 'loader-2');\n            icon.setAttribute('size', '2x-large');\n\n            blockingElement.appendChild(icon);\n\n            let scrollOffset = this.dialog.scrollTop;\n            blockingElement.style.top = `${scrollOffset}px`;\n            blockingElement.style.bottom = `-${scrollOffset}px`;\n\n            this.dialog.appendChild(blockingElement);\n\n            await promise()\n                .then((res) => {\n                    this.close();\n                    blockingElement.remove();\n                })\n                .catch((err) => {\n                    console.error(err);\n                    blockingElement.remove();\n                });\n        });\n    }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n */\n\nexport default class Dialog extends WJElement {\n    /**\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the 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\n        fragment.appendChild(dialog);\n\n        this.dialog = dialog;\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        let icon = document.createElement('wje-icon');\n        icon.setAttribute('name', 'x');\n        icon.setAttribute('slot', 'icon-only');\n\n        let close = document.createElement('wje-button');\n        close.setAttribute('fill', 'link');\n        close.setAttribute('size', 'small');\n        close.setAttribute('part', 'close');\n        close.addEventListener('click', (e) => {\n            this.close(e);\n        });\n\n        let header = document.createElement('div');\n        header.setAttribute('part', 'header');\n        header.classList.add('dialog-header');\n        if (this.hasAttribute('headline'))\n            header.innerHTML = `<span part=\"headline\">${this.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\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        // Slot assignment may not be reflected synchronously on first render.\n        // Run in a microtask to ensure assignedNodes() sees slotted content.\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.onClose);\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) {\n            this.dialog.innerHTML = '';\n        }\n\n        setTimeout(() => {\n            Promise.resolve(this.beforeOpen(this, e)).then((res) => {\n                this.htmlDialogBody(this.dialog);\n\n                this.dialog.showModal(); // Now open the dialog\n\n                if (this.dialog.open) {\n                    Promise.resolve(this.afterOpen(this, e));\n                }\n            });\n        }, 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            this.dialog.close(); // Now close the dialog\n\n            if (!this.dialog.open) {\n                Promise.resolve(this.afterClose(this, e));\n            }\n        });\n    };\n\n    /**\n     * Registers an event listener on the provided button that triggers a blocking UI element\n     * and executes a given promise when the button is clicked.\n     * @param {HTMLElement} button The button element to attach the event listener to.\n     * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n     */\n    registerBlockingEvent(button, promise) {\n        button.addEventListener('wje-button:click', async (e) => {\n            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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"}