npm - wj-elements - Versions diffs - 0.2.0-alpha.8 → 0.3.0 - Mend

wj-elements 0.2.0-alpha.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/dist/{packages/wje-dialog → wje-dialog}/dialog.element.d.ts RENAMED Viewed

@@ -21,6 +21,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @tag wje-dialog
  */
 export default class Dialog extends WJElement {
+    static _instanceId: number;
     /**
      * Returns the CSS styles for the component.
      * @returns {*}
@@ -31,6 +32,7 @@ export default class Dialog extends WJElement {
      * @returns {*[]}
      */
     static get observedAttributes(): any[];
+    _instanceId: number;
     /**
      * Sets the value of the 'headline' attribute.
      * @param {string} value The new value for the 'headline' attribute.

package/dist/wje-dialog.js CHANGED Viewed

@@ -140,6 +140,7 @@ dialog:focus-visible {
 :host {
     dialog {
+        background: var(--wje-dialog-background);
         box-sizing: border-box;
         transition: all 0.2s !important;
         width: var(--wje-dialog-width);
@@ -279,7 +280,7 @@ dialog[open] {
     }
 }
 `;
-class Dialog extends WJElement {
+const _Dialog = class _Dialog extends WJElement {
   /**
    * @class
    */
@@ -320,6 +321,7 @@ class Dialog extends WJElement {
         }
       });
     });
+    this._instanceId = ++_Dialog._instanceId;
   }
   /**
    * Sets the value of the 'headline' attribute.
@@ -443,6 +445,7 @@ class Dialog extends WJElement {
    * @param dialog
    */
   htmlDialogBody(dialog) {
+    const dialogId = this.id || `wje-dialog-${this._instanceId}`;
     let icon = document.createElement("wje-icon");
     icon.setAttribute("name", "x");
     icon.setAttribute("slot", "icon-only");
@@ -450,12 +453,14 @@ class Dialog extends WJElement {
     close.setAttribute("fill", "link");
     close.setAttribute("size", "small");
     close.setAttribute("part", "close");
+    close.setAttribute("aria-label", "Close dialog");
     close.addEventListener("click", (e) => {
       this.close(e);
     });
     let header = document.createElement("div");
     header.setAttribute("part", "header");
     header.classList.add("dialog-header");
+    header.id = `${dialogId}-header`;
     if (this.hasAttribute("headline"))
       header.innerHTML = `<span part="headline">${this.headline}</span>`;
     let slotHeader = document.createElement("slot");
@@ -468,6 +473,7 @@ class Dialog extends WJElement {
     let body = document.createElement("div");
     body.setAttribute("part", "body");
     body.classList.add("dialog-content");
+    body.id = `${dialogId}-body`;
     let footer = document.createElement("div");
     footer.setAttribute("part", "footer");
     footer.classList.add("dialog-footer");
@@ -484,6 +490,31 @@ class Dialog extends WJElement {
     if (!this.hiddenHeader) dialog.appendChild(header);
     dialog.appendChild(body);
     if (!this.hiddenFooter) dialog.appendChild(footer);
+    dialog.setAttribute("role", "dialog");
+    dialog.setAttribute("aria-modal", "true");
+    dialog.setAttribute("aria-describedby", body.id);
+    if (!this.hiddenHeader) {
+      dialog.setAttribute("aria-labelledby", header.id);
+    } else {
+      dialog.removeAttribute("aria-labelledby");
+    }
+    const ariaState = {
+      role: "dialog",
+      modal: true,
+      describedBy: body.id
+    };
+    if (!this.hiddenHeader) {
+      ariaState.labelledBy = header.id;
+      this.removeAttribute("aria-label");
+    } else {
+      this.removeAttribute("aria-labelledby");
+      if (this.headline) {
+        ariaState.label = this.headline;
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+    this.setAriaState(ariaState);
     Promise.resolve().then(() => this.updateHasFooter());
   }
   /**
@@ -572,7 +603,9 @@ class Dialog extends WJElement {
     if (footerEl) footerEl.toggleAttribute("hidden", !hasContent);
     this.toggleAttribute("has-footer", hasContent);
   }
-}
+};
+__publicField(_Dialog, "_instanceId", 0);
+let Dialog = _Dialog;
 Dialog.define("wje-dialog", Dialog);
 export {
   Dialog as default

package/dist/wje-dialog.js.map CHANGED Viewed

	@@ -1 +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 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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"}
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\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 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-modal', 'true');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n } else {\n dialog.removeAttribute('aria-labelledby');\n }\n\n const ariaState = {\n role: 'dialog',\n modal: true,\n describedBy: body.id,\n };\n\n if (!this.hiddenHeader) {\n ariaState.labelledBy = header.id;\n this.removeAttribute('aria-label');\n } else {\n this.removeAttribute('aria-labelledby');\n if (this.headline) {\n ariaState.label = this.headline;\n } else {\n this.removeAttribute('aria-label');\n }\n }\n\n this.setAriaState(ariaState);\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.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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"}

package/dist/{packages/wje-dropdown → wje-dropdown}/dropdown.element.d.ts RENAMED Viewed

@@ -14,11 +14,13 @@ import { default as Popup } from '../wje-popup/popup.element.js';
  * @tag wje-dropdown
  */
 export default class Dropdown extends WJElement {
+    static _instanceId: number;
     /**
      * Getter for the CSS stylesheet.
      * @returns {string[]}
      */
     static get observedAttributes(): string[];
+    _instanceId: number;
     /**
      * The placement of the dropdown.
      * @type {{"wje-popup": Popup}}
@@ -74,6 +76,7 @@ export default class Dropdown extends WJElement {
      * Adds event listeners for the mouseenter and mouseleave events.
      */
     afterDraw(): void;
+    onSlotChange: () => void;
     popupHideCallback: (e: any) => void;
     /**
      * Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.
@@ -104,5 +107,9 @@ export default class Dropdown extends WJElement {
     beforeClose: () => void;
     afterClose: () => void;
     onClose: () => void;
+    /**
+     * Syncs ARIA attributes for the trigger element.
+     */
+    syncAria(): void;
     #private;
 }

package/dist/wje-dropdown.js CHANGED Viewed

@@ -9,9 +9,9 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var _onMenuItemCustom;
 import WJElement from "./wje-element.js";
-import { P as Popup } from "./popup.element-DeajFyOQ.js";
+import { P as Popup } from "./popup.element-Cl6QeG8M.js";
 import { event } from "./event.js";
-class Dropdown extends WJElement {
+const _Dropdown = class _Dropdown extends WJElement {
   /**
    * Creates an instance of Dropdown.
    * @class
@@ -78,6 +78,7 @@ class Dropdown extends WJElement {
      */
     __publicField(this, "onOpen", (e) => {
       this.classList.add("active");
+      this.syncAria();
       Promise.resolve(this.beforeShow(this)).then((res) => {
         if (!this.classList.contains("active")) {
           throw new Error("beforeShow method returned false or not string");
@@ -100,6 +101,7 @@ class Dropdown extends WJElement {
     });
     __publicField(this, "onClose", () => {
       this.classList.remove("active");
+      this.syncAria();
       Promise.resolve(this.beforeClose(this)).then((res) => {
         if (this.classList.contains("active")) {
           throw new Error("beforeShow method returned false or not string");
@@ -126,6 +128,7 @@ class Dropdown extends WJElement {
       this.classList.remove("active");
       this.popup.hide(true);
     });
+    this._instanceId = ++_Dropdown._instanceId;
   }
   /**
    * Sets or removes the 'portaled' attribute on the element.
@@ -240,17 +243,22 @@ class Dropdown extends WJElement {
         this.onClose
       );
     }
+    this.onSlotChange = () => this.syncAria();
+    this.anchorSlot.addEventListener("slotchange", this.onSlotChange);
+    this.syncAria();
   }
   /**
    * Adds event listeners for the mouseenter and mouseleave events.
    */
   afterDisconnect() {
+    var _a;
     event.removeListener(this, "mouseenter", null, this.onOpen);
     event.removeListener(this, "mouseleave", null, this.onClose);
     event.removeListener(this.anchorSlot, "click", null, this.toggleCallback, { capture: true });
     event.removeListener(this, "wje-popup:hide", null, this.popupHideCallback);
     event.removeListener(this.popup, "click", null, this.onMenuItemClick, { capture: true });
     event.removeListener(document, "wje-menu-item:click", null, __privateGet(this, _onMenuItemCustom), false);
+    (_a = this.anchorSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
   }
   /**
    * @summary Returns the content to be displayed before showing the dropdown.
@@ -264,8 +272,24 @@ class Dropdown extends WJElement {
    */
   afterShow() {
   }
-}
+  /**
+   * Syncs ARIA attributes for the trigger element.
+   */
+  syncAria() {
+    var _a, _b, _c, _d;
+    const triggerEl = (_c = (_b = (_a = this.anchorSlot) == null ? void 0 : _a.assignedElements) == null ? void 0 : _b.call(_a, { flatten: true })) == null ? void 0 : _c[0];
+    if (!triggerEl) return;
+    const popupId = ((_d = this.popup) == null ? void 0 : _d.id) || `wje-dropdown-popup-${this._instanceId}`;
+    if (this.popup && !this.popup.id) this.popup.id = popupId;
+    const hasMenu = !!this.querySelector("wje-menu");
+    triggerEl.setAttribute("aria-haspopup", hasMenu ? "menu" : "dialog");
+    triggerEl.setAttribute("aria-expanded", this.classList.contains("active") ? "true" : "false");
+    triggerEl.setAttribute("aria-controls", popupId);
+  }
+};
 _onMenuItemCustom = new WeakMap();
+__publicField(_Dropdown, "_instanceId", 0);
+let Dropdown = _Dropdown;
 Dropdown.define("wje-dropdown", Dropdown);
 export {
   Dropdown as default

package/dist/wje-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/*\n `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n /\nexport default class Dropdown extends WJElement {\n /\n Creates an instance of Dropdown.\n * @class\n /\n constructor() {\n super();\n }\n\n /\n The placement of the dropdown.\n * @type {{\"wje-popup\": Popup}}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Sets or removes the 'portaled' attribute on the element.\n * When the value is truthy, the attribute 'portaled' is added to the element.\n * When the value is falsy, the attribute 'portaled' is removed from the element.\n * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n /\n set portaled(value) {\n if (value) {\n this.setAttribute('portaled', value);\n } else {\n this.removeAttribute('portaled');\n }\n }\n\n /\n Getter method for the `portaled` property.\n * Checks if the `portaled` attribute is present on the element.\n * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n /\n get portaled() {\n return this.getAttribute('portaled') \|\| '';\n }\n\n /\n Checks whether the element has the 'portaled' attribute.\n * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n /\n get isPortaled() {\n return this.hasAttribute('portaled');\n }\n\n /\n Sets the placement of the dropdown.\n * @param value\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Gets the placement of the dropdown.\n * @returns {string\|string}\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n /\n Sets the placement of the dropdown.\n * @type {string}\n /\n className = 'Dropdown';\n\n /\n Getter for the CSS stylesheet.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n * @param {Event} e The event object.\n /\n otherDropdownOpennedCallback = (e) => {\n if (e.detail.detail.target !== this) {\n this.classList.remove('active');\n this.popup.hide();\n }\n };\n\n /\n Sets up the attributes for the dropdown.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Removes the popup element.\n /\n beforeDraw() {\n this.popup?.remove();\n this.popup = null;\n }\n\n /\n Draws the dropdown element and returns the created document fragment.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', 'wje-' + this.placement \|\| 'wje-start');\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-dropdown');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.tooltip);\n\n let anchorSlot = document.createElement('slot');\n anchorSlot.setAttribute('name', 'trigger');\n anchorSlot.setAttribute('slot', 'anchor');\n\n let slot = document.createElement('slot');\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n popup.setAttribute('part', 'popup');\n\n if(this.isPortaled)\n popup.setAttribute('portal', this.portaled);\n\n popup.append(anchorSlot, slot);\n\n // if(this.trigger === \"click\")\n popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.anchorSlot = anchorSlot;\n\n return fragment;\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDraw() {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n if (this.trigger !== 'click') {\n event.addListener(this, 'mouseenter', null, this.onOpen);\n event.addListener(this, 'mouseleave', null, this.onClose);\n } else {\n event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n }\n\n if (this.hasAttribute('collapsible')) {\n event.addListener(\n Array.from(this.querySelectorAll('wje-menu-item')),\n 'click',\n 'wje-menu-item:click',\n this.onClose\n );\n }\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDisconnect() {\n event.removeListener(this, 'mouseenter', null, this.onOpen);\n event.removeListener(this, 'mouseleave', null, this.onClose);\n event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n }\n\n popupHideCallback = (e) => {\n if (this.classList.contains('active') && e.target.tagName === \"WJE-DROPDOWN\") {\n this.toggleCallback(e);\n }\n };\n\n /\n Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n * This works even when the menu is portaled, because we rely on the composed path.\n /\n onMenuItemClick = (e) => {\n // Find nearest wje-menu-item in the composed path\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n if (!item) return;\n\n // Ignore disabled items\n if (item.hasAttribute('disabled') \|\| item.getAttribute('aria-disabled') === 'true') return;\n\n // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n this.onClose();\n }\n\n /\n @summary Toggles the dropdown element between active and inactive states.\n * Calls the `onOpen` method if the element is currently inactive,\n * and calls the `onClose` method if the element is currently active.\n * @param {Event} e The event object.\n /\n toggleCallback = (e) => {\n if (this.classList.contains('active')) {\n e.stopPropagation();\n this.onClose();\n } else {\n e.stopPropagation();\n this.onOpen(e);\n }\n };\n\n /\n @summary Returns the content to be displayed before showing the dropdown.\n * @returns {any} The content to be displayed.\n /\n beforeShow() {\n return this.content;\n }\n\n /\n This method is called after the dropdown is shown.\n /\n afterShow() {\n // Do nothing\n }\n\n /\n Open the popup element.\n * @param {object} e\n */\n onOpen = (e) => {\n this.classList.add('active');\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.show(true); // Show tooltip\n\n event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterShow(this));\n })\n .catch((error) => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide(true);\n });\n };\n\n beforeClose = () => {\n // Do nothing\n };\n\n afterClose = () => {\n // Do nothing\n };\n\n onClose = () => {\n this.classList.remove('active');\n Promise.resolve(this.beforeClose(this))\n .then((res) => {\n if (this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.hide(true); // Show tooltip\n\n event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterClose(this));\n })\n .catch((error) => {\n this.classList.add('active');\n this.popup.show(true);\n });\n }\n\n #onMenuItemCustom = (e) => {\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n if (!this.popup \|\| !this.popup.floatingEl \|\| !path.includes(this.popup.floatingEl)) return;\n\n const item = path.find(n => n && n.tagName === 'WJE-MENU-ITEM');\n if (!item) return;\n if (item.hasAttribute('disabled') \|\| item.getAttribute('aria-disabled') === 'true') return;\n if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n // aby fungovali aj tvoje app-level listenery (riadok 480).\n this.classList.remove('active');\n this.popup.hide(true);\n }\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"wje-dropdown.js","sources":["../packages/wje-dropdown/dropdown.element.js","../packages/wje-dropdown/dropdown.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Popup from '../wje-popup/popup.element.js';\n\n/*\n `Dropdown` is a custom element that displays a dropdown menu.\n * @summary This element represents a dropdown menu.\n * @documentation https://elements.webjet.sk/components/dropdown\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the dropdown.\n * @slot trigger - The slot for the trigger of the dropdown.\n * @slot - The default slot for the dropdown.\n * // @fires wje-dropdown:open - Event fired when the dropdown is opened.\n * // @fires wje-dropdown:close - Event fired when the dropdown is closed.\n * @tag wje-dropdown\n /\nexport default class Dropdown extends WJElement {\n static _instanceId = 0;\n /\n Creates an instance of Dropdown.\n * @class\n /\n constructor() {\n super();\n this._instanceId = ++Dropdown._instanceId;\n }\n\n /\n The placement of the dropdown.\n * @type {{\"wje-popup\": Popup}}\n /\n dependencies = {\n 'wje-popup': Popup,\n };\n\n /\n Sets or removes the 'portaled' attribute on the element.\n * When the value is truthy, the attribute 'portaled' is added to the element.\n * When the value is falsy, the attribute 'portaled' is removed from the element.\n * @param {boolean} value Determines whether to add or remove the 'portaled' attribute.\n /\n set portaled(value) {\n if (value) {\n this.setAttribute('portaled', value);\n } else {\n this.removeAttribute('portaled');\n }\n }\n\n /\n Getter method for the `portaled` property.\n * Checks if the `portaled` attribute is present on the element.\n * @returns {boolean} Returns `true` if the `portaled` attribute exists, otherwise `false`.\n /\n get portaled() {\n return this.getAttribute('portaled') \|\| '';\n }\n\n /\n Checks whether the element has the 'portaled' attribute.\n * @returns {boolean} True if the element has the 'portaled' attribute, otherwise false.\n /\n get isPortaled() {\n return this.hasAttribute('portaled');\n }\n\n /\n Sets the placement of the dropdown.\n * @param value\n /\n set trigger(value) {\n this.setAttribute('trigger', value);\n }\n\n /\n Gets the placement of the dropdown.\n * @returns {string\|string}\n /\n get trigger() {\n return this.getAttribute('trigger') \|\| 'click';\n }\n\n /\n Sets the placement of the dropdown.\n * @type {string}\n /\n className = 'Dropdown';\n\n /\n Getter for the CSS stylesheet.\n * @returns {string[]}\n /\n static get observedAttributes() {\n return ['active'];\n }\n\n /\n Callback function to handle other dropdowns being opened. Close the dropdown if it is not the target and collapse is enabled.\n * @param {Event} e The event object.\n /\n otherDropdownOpennedCallback = (e) => {\n if (e.detail.detail.target !== this) {\n this.classList.remove('active');\n this.popup.hide();\n }\n };\n\n /\n Sets up the attributes for the dropdown.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Removes the popup element.\n /\n beforeDraw() {\n this.popup?.remove();\n this.popup = null;\n }\n\n /\n Draws the dropdown element and returns the created document fragment.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('wje-placement', 'wje-' + this.placement \|\| 'wje-start');\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-dropdown');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('content', this.tooltip);\n\n let anchorSlot = document.createElement('slot');\n anchorSlot.setAttribute('name', 'trigger');\n anchorSlot.setAttribute('slot', 'anchor');\n\n let slot = document.createElement('slot');\n\n let popup = document.createElement('wje-popup');\n popup.setAttribute('placement', this.placement);\n popup.setAttribute('offset', this.offset);\n popup.setAttribute('part', 'popup');\n\n if(this.isPortaled)\n popup.setAttribute('portal', this.portaled);\n\n popup.append(anchorSlot, slot);\n\n // if(this.trigger === \"click\")\n popup.setAttribute('manual', '');\n\n native.appendChild(popup);\n\n fragment.appendChild(native);\n\n this.popup = popup;\n this.anchorSlot = anchorSlot;\n\n return fragment;\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDraw() {\n event.addListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n\n // Close when any actionable wje-menu-item inside the popup is clicked (works across Shadow DOM via composed path)\n event.addListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n\n if (this.trigger !== 'click') {\n event.addListener(this, 'mouseenter', null, this.onOpen);\n event.addListener(this, 'mouseleave', null, this.onClose);\n } else {\n event.addListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n }\n\n if (this.hasAttribute('collapsible')) {\n event.addListener(\n Array.from(this.querySelectorAll('wje-menu-item')),\n 'click',\n 'wje-menu-item:click',\n this.onClose\n );\n }\n\n this.onSlotChange = () => this.syncAria();\n this.anchorSlot.addEventListener('slotchange', this.onSlotChange);\n\n this.syncAria();\n }\n\n /\n Adds event listeners for the mouseenter and mouseleave events.\n /\n afterDisconnect() {\n event.removeListener(this, 'mouseenter', null, this.onOpen);\n event.removeListener(this, 'mouseleave', null, this.onClose);\n event.removeListener(this.anchorSlot, 'click', null, this.toggleCallback, { capture: true });\n event.removeListener(this, 'wje-popup:hide', null, this.popupHideCallback);\n event.removeListener(this.popup, 'click', null, this.onMenuItemClick, { capture: true });\n event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n this.anchorSlot?.removeEventListener('slotchange', this.onSlotChange);\n }\n\n popupHideCallback = (e) => {\n if (this.classList.contains('active') && e.target.tagName === \"WJE-DROPDOWN\") {\n this.toggleCallback(e);\n }\n };\n\n /\n Handles delegated clicks from inside the popup and closes the dropdown when a leaf menu item is selected.\n * This works even when the menu is portaled, because we rely on the composed path.\n /\n onMenuItemClick = (e) => {\n // Find nearest wje-menu-item in the composed path\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n const item = path.find((n) => n && n.tagName === 'WJE-MENU-ITEM');\n if (!item) return;\n\n // Ignore disabled items\n if (item.hasAttribute('disabled') \|\| item.getAttribute('aria-disabled') === 'true') return;\n\n // If this item contains a nested submenu (wje-menu), it's not a leaf -> don't close yet\n if (typeof item.querySelector === 'function' && item.querySelector('wje-menu')) return;\n\n // Leaf item selected -> close dropdown (which calls popup.hide(true) inside onClose)\n this.onClose();\n }\n\n /\n @summary Toggles the dropdown element between active and inactive states.\n * Calls the `onOpen` method if the element is currently inactive,\n * and calls the `onClose` method if the element is currently active.\n * @param {Event} e The event object.\n /\n toggleCallback = (e) => {\n if (this.classList.contains('active')) {\n e.stopPropagation();\n this.onClose();\n } else {\n e.stopPropagation();\n this.onOpen(e);\n }\n };\n\n /\n @summary Returns the content to be displayed before showing the dropdown.\n * @returns {any} The content to be displayed.\n /\n beforeShow() {\n return this.content;\n }\n\n /\n This method is called after the dropdown is shown.\n /\n afterShow() {\n // Do nothing\n }\n\n /\n Open the popup element.\n * @param {object} e\n /\n onOpen = (e) => {\n this.classList.add('active');\n this.syncAria();\n Promise.resolve(this.beforeShow(this))\n .then((res) => {\n if (!this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.show(true); // Show tooltip\n\n event.addListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n event.dispatchCustomEvent(this, 'wje-dropdown:open', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterShow(this));\n })\n .catch((error) => {\n // ak je nejaka chyba tak to len zatvorime\n this.classList.remove('active');\n this.popup.hide(true);\n });\n };\n\n beforeClose = () => {\n // Do nothing\n };\n\n afterClose = () => {\n // Do nothing\n };\n\n onClose = () => {\n this.classList.remove('active');\n this.syncAria();\n Promise.resolve(this.beforeClose(this))\n .then((res) => {\n if (this.classList.contains('active')) {\n throw new Error('beforeShow method returned false or not string');\n }\n\n this.popup.hide(true); // Show tooltip\n\n event.removeListener(document, 'wje-menu-item:click', null, this.#onMenuItemCustom, false);\n\n event.dispatchCustomEvent(this, 'wje-dropdown:close', {\n bubbles: true,\n detail: { target: this },\n });\n\n Promise.resolve(this.afterClose(this));\n })\n .catch((error) => {\n this.classList.add('active');\n this.popup.show(true);\n });\n }\n\n /\n Syncs ARIA attributes for the trigger element.\n */\n syncAria() {\n const triggerEl = this.anchorSlot?.assignedElements?.({ flatten: true })?.[0];\n if (!triggerEl) return;\n\n const popupId = this.popup?.id \|\| `wje-dropdown-popup-${this._instanceId}`;\n if (this.popup && !this.popup.id) this.popup.id = popupId;\n\n const hasMenu = !!this.querySelector('wje-menu');\n triggerEl.setAttribute('aria-haspopup', hasMenu ? 'menu' : 'dialog');\n triggerEl.setAttribute('aria-expanded', this.classList.contains('active') ? 'true' : 'false');\n triggerEl.setAttribute('aria-controls', popupId);\n }\n\n #onMenuItemCustom = (e) => {\n const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n if (!this.popup \|\| !this.popup.floatingEl \|\| !path.includes(this.popup.floatingEl)) return;\n\n const item = path.find(n => n && n.tagName === 'WJE-MENU-ITEM');\n if (!item) return;\n if (item.hasAttribute('disabled') \|\| item.getAttribute('aria-disabled') === 'true') return;\n if (item.hasAttribute('has-submenu')) return; // parent; nezatváraj\n\n // Zavri len tento dropdown. NEvolaj stopPropagation na custom evente,\n // aby fungovali aj tvoje app-level listenery (riadok 480).\n this.classList.remove('active');\n this.popup.hide(true);\n }\n}\n","import Dropdown from './dropdown.element.js';\n\nexport default Dropdown;\n\nDropdown.define('wje-dropdown', Dropdown);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBe,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAM5C,cAAc;AACV,UAAO;AAQX;AAAA;AAAA;AAAA;AAAA,wCAAe;AAAA,MACX,aAAa;AAAA,IAChB;AAqDD;AAAA;AAAA;AAAA;AAAA,qCAAY;AAcZ;AAAA;AAAA;AAAA;AAAA,wDAA+B,CAAC,MAAM;AAClC,UAAI,EAAE,OAAO,OAAO,WAAW,MAAM;AACjC,aAAK,UAAU,OAAO,QAAQ;AAC9B,aAAK,MAAM,KAAM;AAAA,MAC7B;AAAA,IACK;AA0GD,6CAAoB,CAAC,MAAM;AACvB,UAAI,KAAK,UAAU,SAAS,QAAQ,KAAK,EAAE,OAAO,YAAY,gBAAgB;AAC1E,aAAK,eAAe,CAAC;AAAA,MACjC;AAAA,IACK;AAMD;AAAA;AAAA;AAAA;AAAA,2CAAkB,CAAC,MAAM;AAErB,YAAM,OAAO,OAAO,EAAE,iBAAiB,aAAa,EAAE,aAAY,IAAK,CAAE;AACzE,YAAM,OAAO,KAAK,KAAK,CAAC,MAAM,KAAK,EAAE,YAAY,eAAe;AAChE,UAAI,CAAC,KAAM;AAGX,UAAI,KAAK,aAAa,UAAU,KAAK,KAAK,aAAa,eAAe,MAAM,OAAQ;AAGpF,UAAI,OAAO,KAAK,kBAAkB,cAAc,KAAK,cAAc,UAAU,EAAG;AAGhF,WAAK,QAAS;AAAA,IACtB;AAQI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,UAAI,KAAK,UAAU,SAAS,QAAQ,GAAG;AACnC,UAAE,gBAAiB;AACnB,aAAK,QAAS;AAAA,MAC1B,OAAe;AACH,UAAE,gBAAiB;AACnB,aAAK,OAAO,CAAC;AAAA,MACzB;AAAA,IACK;AAqBD;AAAA;AAAA;AAAA;AAAA,kCAAS,CAAC,MAAM;AACZ,WAAK,UAAU,IAAI,QAAQ;AAC3B,WAAK,SAAU;AACf,cAAQ,QAAQ,KAAK,WAAW,IAAI,CAAC,EAChC,KAAK,CAAC,QAAQ;AACX,YAAI,CAAC,KAAK,UAAU,SAAS,QAAQ,GAAG;AACpC,gBAAM,IAAI,MAAM,gDAAgD;AAAA,QACpF;AAEgB,aAAK,MAAM,KAAK,IAAI;AAEpB,cAAM,YAAY,UAAU,uBAAuB,MAAM,mBAAK,oBAAmB,KAAK;AAEtF,cAAM,oBAAoB,MAAM,qBAAqB;AAAA,UACjD,SAAS;AAAA,UACT,QAAQ,EAAE,QAAQ,KAAM;AAAA,QAC5C,CAAiB;AAED,gBAAQ,QAAQ,KAAK,UAAU,IAAI,CAAC;AAAA,MACvC,CAAA,EACA,MAAM,CAAC,UAAU;AAEd,aAAK,UAAU,OAAO,QAAQ;AAC9B,aAAK,MAAM,KAAK,IAAI;AAAA,MACpC,CAAa;AAAA,IACR;AAED,uCAAc,MAAM;AAAA,IAEnB;AAED,sCAAa,MAAM;AAAA,IAElB;AAED,mCAAU,MAAM;AACZ,WAAK,UAAU,OAAO,QAAQ;AAC9B,WAAK,SAAU;AACf,cAAQ,QAAQ,KAAK,YAAY,IAAI,CAAC,EACjC,KAAK,CAAC,QAAQ;AACX,YAAI,KAAK,UAAU,SAAS,QAAQ,GAAG;AACnC,gBAAM,IAAI,MAAM,gDAAgD;AAAA,QACpF;AAEgB,aAAK,MAAM,KAAK,IAAI;AAEpB,cAAM,eAAe,UAAU,uBAAuB,MAAM,mBAAK,oBAAmB,KAAK;AAEzF,cAAM,oBAAoB,MAAM,sBAAsB;AAAA,UAClD,SAAS;AAAA,UACT,QAAQ,EAAE,QAAQ,KAAM;AAAA,QAC5C,CAAiB;AAED,gBAAQ,QAAQ,KAAK,WAAW,IAAI,CAAC;AAAA,MACxC,CAAA,EACA,MAAM,CAAC,UAAU;AACd,aAAK,UAAU,IAAI,QAAQ;AAC3B,aAAK,MAAM,KAAK,IAAI;AAAA,MACpC,CAAa;AAAA,IACb;AAkBI,0CAAoB,CAAC,MAAM;AACvB,YAAM,OAAO,OAAO,EAAE,iBAAiB,aAAa,EAAE,aAAY,IAAK,CAAE;AACzE,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,MAAM,cAAc,CAAC,KAAK,SAAS,KAAK,MAAM,UAAU,EAAG;AAEpF,YAAM,OAAO,KAAK,KAAK,OAAK,KAAK,EAAE,YAAY,eAAe;AAC9D,UAAI,CAAC,KAAM;AACX,UAAI,KAAK,aAAa,UAAU,KAAK,KAAK,aAAa,eAAe,MAAM,OAAQ;AACpF,UAAI,KAAK,aAAa,aAAa,EAAG;AAItC,WAAK,UAAU,OAAO,QAAQ;AAC9B,WAAK,MAAM,KAAK,IAAI;AAAA,IAC5B;AAlVQ,SAAK,cAAc,EAAE,UAAS;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBI,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,KAAK;AAAA,IAC/C,OAAe;AACH,WAAK,gBAAgB,UAAU;AAAA,IAC3C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;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,EAYI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,QAAQ;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA,EAgBI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKI,aAAa;;AACT,eAAK,UAAL,mBAAY;AACZ,SAAK,QAAQ;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,SAAK,UAAU,IAAI,iBAAiB,SAAS,KAAK,aAAa,WAAW;AAE1E,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,UAAU,SAAS,cAAc,aAAa;AAClD,YAAQ,aAAa,WAAW,KAAK,OAAO;AAE5C,QAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,eAAW,aAAa,QAAQ,SAAS;AACzC,eAAW,aAAa,QAAQ,QAAQ;AAExC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,WAAW;AAC9C,UAAM,aAAa,aAAa,KAAK,SAAS;AAC9C,UAAM,aAAa,UAAU,KAAK,MAAM;AACxC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAG,KAAK;AACJ,YAAM,aAAa,UAAU,KAAK,QAAQ;AAE9C,UAAM,OAAO,YAAY,IAAI;AAG7B,UAAM,aAAa,UAAU,EAAE;AAE/B,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,QAAQ;AACb,SAAK,aAAa;AAElB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,YAAY,MAAM,kBAAkB,MAAM,KAAK,iBAAiB;AAGtE,UAAM,YAAY,KAAK,OAAO,SAAS,MAAM,KAAK,iBAAiB,EAAE,SAAS,KAAI,CAAE;AAEpF,QAAI,KAAK,YAAY,SAAS;AAC1B,YAAM,YAAY,MAAM,cAAc,MAAM,KAAK,MAAM;AACvD,YAAM,YAAY,MAAM,cAAc,MAAM,KAAK,OAAO;AAAA,IACpE,OAAe;AACH,YAAM,YAAY,KAAK,YAAY,SAAS,MAAM,KAAK,gBAAgB,EAAE,SAAS,KAAI,CAAE;AAAA,IACpG;AAEQ,QAAI,KAAK,aAAa,aAAa,GAAG;AAClC,YAAM;AAAA,QACJ,MAAM,KAAK,KAAK,iBAAiB,eAAe,CAAC;AAAA,QACjD;AAAA,QACA;AAAA,QACA,KAAK;AAAA,MACN;AAAA,IACb;AAEQ,SAAK,eAAe,MAAM,KAAK,SAAU;AACzC,SAAK,WAAW,iBAAiB,cAAc,KAAK,YAAY;AAEhE,SAAK,SAAU;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;;AACd,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,MAAM;AAC1D,UAAM,eAAe,MAAM,cAAc,MAAM,KAAK,OAAO;AAC3D,UAAM,eAAe,KAAK,YAAY,SAAS,MAAM,KAAK,gBAAgB,EAAE,SAAS,KAAI,CAAE;AAC3F,UAAM,eAAe,MAAM,kBAAkB,MAAM,KAAK,iBAAiB;AACzE,UAAM,eAAe,KAAK,OAAO,SAAS,MAAM,KAAK,iBAAiB,EAAE,SAAS,KAAI,CAAE;AACvF,UAAM,eAAe,UAAU,uBAAuB,MAAM,mBAAK,oBAAmB,KAAK;AACzF,eAAK,eAAL,mBAAiB,oBAAoB,cAAc,KAAK;AAAA,EAChE;AAAA;AAAA;AAAA;AAAA;AAAA,EAgDI,aAAa;AACT,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AAAA,EAEhB;AAAA;AAAA;AAAA;AAAA,EAsEI,WAAW;;AACP,UAAM,aAAY,sBAAK,eAAL,mBAAiB,qBAAjB,4BAAoC,EAAE,SAAS,YAA/C,mBAAyD;AAC3E,QAAI,CAAC,UAAW;AAEhB,UAAM,YAAU,UAAK,UAAL,mBAAY,OAAM,sBAAsB,KAAK,WAAW;AACxE,QAAI,KAAK,SAAS,CAAC,KAAK,MAAM,GAAI,MAAK,MAAM,KAAK;AAElD,UAAM,UAAU,CAAC,CAAC,KAAK,cAAc,UAAU;AAC/C,cAAU,aAAa,iBAAiB,UAAU,SAAS,QAAQ;AACnE,cAAU,aAAa,iBAAiB,KAAK,UAAU,SAAS,QAAQ,IAAI,SAAS,OAAO;AAC5F,cAAU,aAAa,iBAAiB,OAAO;AAAA,EACvD;AAgBA;AAdI;AA5UA,cADiB,WACV,eAAc;AADV,IAAM,WAAN;ACZf,SAAS,OAAO,gBAAgB,QAAQ;"}

package/dist/{packages/wje-element → wje-element}/element.d.ts RENAMED Viewed

@@ -18,6 +18,7 @@ export default class WJElement extends HTMLElement {
      * @param [options] Additional options for defining the element.
      */
     static define(name: any, elementConstructor?: typeof WJElement, options?: {}): void;
+    internals: ElementInternals;
     service: UniversalService;
     _dependencies: {};
     /**
@@ -121,6 +122,18 @@ export default class WJElement extends HTMLElement {
      * @returns {object} The store instance.
      */
     get store(): object;
+    /**
+     * Returns ElementInternals when available.
+     * @returns {ElementInternals|null}
+     */
+    getInternals(): ElementInternals | null;
+    /**
+     * Sets ARIA state via attributes.
+     * Accepts camelCase keys without the "aria" prefix, plus "role".
+     * Example: setAriaState({ role: 'tab', selected: true, controls: 'panel-1' })
+     * @param {object} state
+     */
+    setAriaState(state?: object): void;
     /**
      * @typedef {object} ArrayActions
      * @property {Function} addAction - Adds an item to the array.
@@ -185,25 +198,6 @@ export default class WJElement extends HTMLElement {
      * }
      */
     draw(context: any, appStoreObj: any, params: any): any;
-    /**
-     * Renders the component within the provided context.
-     * @param context The rendering context, usually the element's shadow root or main DOM element.
-     * @param appStore The global application store for managing state.
-     * @param params Additional parameters or attributes for rendering the component.
-     * @returns This implementation does not render anything and returns `null`.
-     * @description
-     * The `draw` method is responsible for rendering the component's content.
-     * Override this method in subclasses to define custom rendering logic.
-     * @example
-     * class MyComponent extends WJElement {
-     *   draw(context, appStore, params) {
-     *     const div = document.createElement('div');
-     *     div.textContent = 'Hello, world!';
-     *     context.appendChild(div);
-     *   }
-     * }
-     */
-    draw(context: any, appStore: any, params: any): any;
     /**
      * Hook for extending behavior after drawing the component.
      * @param context The rendering context, usually the element's shadow root or main DOM element.
@@ -217,18 +211,29 @@ export default class WJElement extends HTMLElement {
      * Return: string | Node | DocumentFragment | null | Promise of those.
      */
     renderSkeleton(params: any): any;
-    set skeletonDelay(value: number);
+    /**
+     * Sets the delay for the skeleton loading indicator.
+     * @param {string|number|null|undefined} value The delay value to be set. Accepts a numerical value,
+     * a string that can be converted to a number, null, or undefined.
+     * If null or undefined is provided, the skeleton delay will be cleared.
+     */
+    set skeletonDelay(value: string | number | null | undefined);
     /**
      * Retrieves the delay duration for the skeleton display, determining the value based on a hierarchy of overrides and defaults.
      * The method prioritizes in the following order:
-     * 1. A finite number set as the `_wjSkeletonSlotClone` property.
+     * 1. A finite number set as the `_wjSkeletonDelayOverride` property.
      * 2. A valid numeric value from the `skeleton-delay` attribute.
      * 3. The `skeletonDelayMs` property, if defined with a finite number.
      * 4. A default value of 150 if none of the above are set.
      * @returns {number} The delay in milliseconds before the skeleton is displayed.
      */
     get skeletonDelay(): number;
-    set skeletonMinDuration(value: number);
+    /**
+     * Sets the minimum duration for the skeleton state. If the provided value is null, undefined, or an empty string,
+     * the override for the minimum duration is removed.
+     * @param {string|number|null|undefined} value The minimum duration to be set for the skeleton state. It can be a numeric value, string representation of a number, or null/undefined to reset the value.
+     */
+    set skeletonMinDuration(value: string | number | null | undefined);
     /**
      * Retrieves the minimum duration for the skeleton animation.
      * The method checks for an internally stored finite value. If unavailable,
@@ -238,9 +243,22 @@ export default class WJElement extends HTMLElement {
      * @returns {number} The minimum duration for the skeleton animation in milliseconds.
      */
     get skeletonMinDuration(): number;
-    _wjSkeletonSlotClone: number | Node;
+    _wjSkeletonMinDurationOverride: number;
+    /**
+     * Sets or removes the 'skeleton' attribute based on the provided value.
+     * @param {boolean} value A boolean value indicating whether to set ('true') or remove ('false') the 'skeleton' attribute.
+     */
     set skeleton(value: boolean);
+    /**
+     * Checks if the 'skeleton' attribute is present on the element.
+     * @returns {boolean} True if the 'skeleton' attribute exists, false otherwise.
+     */
     get skeleton(): boolean;
+    _wjSkeletonDelayOverride: number;
+    /**
+     * Retrieves the delay value used for skeleton loading.
+     * @returns {number} The delay value for the skeleton loader.
+     */
     get skeletonDelayValue(): number;
     /**
      * Lifecycle method invoked when the component is connected to the DOM.
@@ -286,7 +304,17 @@ export default class WJElement extends HTMLElement {
      * @param newName The new value of the attribute.
      */
     attributeChangedCallback(name: any, old: any, newName: any): void;
+    /**
+     * Triggers a refresh operation by initializing the update lifecycle and setting up promises
+     * to track its completion or failure status. Marks the instance as not pristine and queues
+     * an update.
+     * @returns {void} Does not return a value.
+     */
     refresh(): void;
+    /**
+     * Stops the current render loop if it is running by canceling the requestAnimationFrame.
+     * @returns {void} This method does not return a value.
+     */
     stopRenderLoop(): void;
     /**
      * Displays the component's content, optionally forcing a re-render.
@@ -332,7 +360,10 @@ export default class WJElement extends HTMLElement {
      */
     checkGetterSetter(obj: object, property: string): object;
     /**
-     * Sets up property accessors for the component's attributes.
+     * Sets up accessors (getter and setter) for all attributes of the current object.
+     * This method retrieves the attribute names, sanitizes them, and dynamically defines
+     * property accessors for each attribute using `Object.defineProperty`.
+     * @returns {void} This method does not return any value.
      */
     setUpAccessors(): void;
     #private;