npm - wj-elements - Versions diffs - 0.3.0-alpha.2 → 0.3.0-alpha.4 - Mend

wj-elements 0.3.0-alpha.2 → 0.3.0-alpha.4

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 (10) hide show

package/dist/packages/translations/sk-sk.d.ts +5 -0
package/dist/packages/wje-dialog/dialog.element.d.ts +2 -0
package/dist/packages/wje-tree-item/tree-item.element.d.ts +13 -0
package/dist/wje-dialog.js +20 -16
package/dist/wje-dialog.js.map +1 -1
package/dist/wje-master.js +6 -1
package/dist/wje-master.js.map +1 -1
package/dist/wje-tree-item.js +32 -3
package/dist/wje-tree-item.js.map +1 -1
package/package.json +1 -1

package/dist/packages/translations/sk-sk.d.ts CHANGED Viewed

@@ -10,4 +10,9 @@ export const skSk: {
     'wj.stepper.button.finish': string;
     'wj.stepper.button.previous': string;
     'wj.stepper.step': string;
+    'wj.pagination.of': string;
+    'wj.pagination.first': string;
+    'wj.pagination.prev': string;
+    'wj.pagination.next': string;
+    'wj.pagination.last': string;
 };

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

@@ -123,6 +123,8 @@ export default class Dialog extends WJElement {
      * @param {object} e
      */
     onClose: (e: object) => void;
+    onNativeDialogClose: () => void;
+    syncHostOpenState: () => void;
     /**
      * Registers an event listener on the provided button that triggers a blocking UI element
      * and executes a given promise when the button is clicked.

package/dist/packages/wje-tree-item/tree-item.element.d.ts CHANGED Viewed

@@ -98,6 +98,13 @@ export default class TreeItem extends HTMLElement {
      * @returns {void} No return value.
      */
     beforeDraw(): void;
+    /**
+     * Synchronizes the nesting-related state on the host element.
+     * Sets the "slot" to children for nested items and updates
+     * the nesting depth used to compute visual indentation.
+     * @returns {void}
+     */
+    syncNestingState(): void;
     /**
      * Creates and returns a document fragment representing the structure of a tree item component.
      * The method constructs the DOM elements including the native container, indentation, toggle button,
@@ -125,6 +132,12 @@ export default class TreeItem extends HTMLElement {
      * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.
      */
     isNestedItem(): boolean;
+    /**
+     * Calculates nesting depth based on ancestor tree items.
+     * Root items have depth 0, direct children depth 1, etc.
+     * @returns {number}
+     */
+    getNestingDepth(): number;
     /**
      * Checks whether the given node is a tree item.
      * @param {object} node The node to check.

package/dist/wje-dialog.js CHANGED Viewed

@@ -303,6 +303,8 @@ const _Dialog = class _Dialog extends WJElement {
         Promise.resolve(this.beforeOpen(this, e)).then((res) => {
           this.htmlDialogBody(this.dialog);
           this.dialog.showModal();
+          this.syncHostOpenState();
+          this.dialog.setAttribute("aria-modal", "true");
           if (this.dialog.open) {
             Promise.resolve(this.afterOpen(this, e));
           }
@@ -316,11 +318,22 @@ const _Dialog = class _Dialog extends WJElement {
     __publicField(this, "onClose", (e) => {
       Promise.resolve(this.beforeClose(this, e)).then((res) => {
         this.dialog.close();
+        this.dialog.removeAttribute("aria-modal");
+        this.syncHostOpenState();
         if (!this.dialog.open) {
           Promise.resolve(this.afterClose(this, e));
         }
       });
     });
+    __publicField(this, "onNativeDialogClose", () => {
+      var _a;
+      (_a = this.dialog) == null ? void 0 : _a.removeAttribute("aria-modal");
+      this.removeAttribute("open");
+    });
+    __publicField(this, "syncHostOpenState", () => {
+      var _a;
+      this.toggleAttribute("open", !!((_a = this.dialog) == null ? void 0 : _a.open));
+    });
     this._instanceId = ++_Dialog._instanceId;
   }
   /**
@@ -425,8 +438,10 @@ const _Dialog = class _Dialog extends WJElement {
     let dialog = document.createElement("dialog");
     dialog.setAttribute("part", "dialog");
     dialog.classList.add("modal-dialog");
+    dialog.addEventListener("close", this.onNativeDialogClose);
     fragment.appendChild(dialog);
     this.dialog = dialog;
+    this.syncHostOpenState();
     return fragment;
   }
   /**
@@ -491,30 +506,18 @@ const _Dialog = class _Dialog extends WJElement {
     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);
+      dialog.removeAttribute("aria-label");
     } 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;
+        dialog.setAttribute("aria-label", this.headline);
       } else {
-        this.removeAttribute("aria-label");
+        dialog.removeAttribute("aria-label");
       }
     }
-    this.setAriaState(ariaState);
     Promise.resolve().then(() => this.updateHasFooter());
   }
   /**
@@ -528,10 +531,11 @@ const _Dialog = class _Dialog extends WJElement {
    * Before the component is disconnected.
    */
   beforeDisconnect() {
-    var _a, _b;
+    var _a, _b, _c;
     if ((_a = this.params) == null ? void 0 : _a.trigger) {
       event.removeListener(document, (_b = this.params) == null ? void 0 : _b.trigger, null, this.onOpen);
     }
+    (_c = this.dialog) == null ? void 0 : _c.removeEventListener("close", this.onNativeDialogClose);
   }
   /**
    * Before the dialog opens.

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 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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"}
1	+ {"version":3,"file":"wje-dialog.js","sources":["../packages/wje-dialog/dialog.element.js","../packages/wje-dialog/dialog.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport '../wje-button/button.element.js';\nimport '../wje-icon/icon.element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Dialog` is a custom web component that represents a dialog.\n * @summary This element represents a dialog.\n * @documentation https://elements.webjet.sk/components/dialog\n * @status stable\n * @augments {WJElement}\n * @slot header - Slot for the header content.\n * @slot body - Slot for the body content.\n * @slot footer - Slot for the footer content.\n * @csspart dialog - The dialog wrapper.\n * @csspart header - The header of the dialog.\n * @csspart body - The body of the dialog.\n * @csspart footer - The footer of the dialog.\n * @csspart close - The close button of the dialog.\n * @cssproperty [--wje-dialog-background=var(--wje-background-color)] - Specifies the background color of the dialog.\n * @cssproperty [--wje-dialog-color=var(--wje-text-color)] - Defines the text color within the dialog.\n * @cssproperty [--wje-dialog-padding=1rem] - Controls the padding inside the dialog.\n * @cssproperty [--wje-dialog-border-radius=0.5rem] - Sets the border radius for the dialog's corners.\n * @cssproperty [--wje-dialog-box-shadow=0 2px 10px rgba(0, 0, 0, 0.1)] - Applies a shadow effect to the dialog.\n * @tag wje-dialog\n /\n\nexport default class Dialog extends WJElement {\n static _instanceId = 0;\n /\n @class\n /\n constructor() {\n super();\n this._instanceId = ++Dialog._instanceId;\n }\n\n /\n Sets the value of the 'headline' attribute.\n * @param {string} value The new value for the 'headline' attribute.\n /\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /\n Retrieves the value of the \"headline\" attribute from the element.\n * If the \"headline\" attribute is not present, returns an empty string.\n * @returns {string} The headline attribute value or an empty string if not set.\n /\n get headline() {\n return this.getAttribute('headline') \|\| '';\n }\n\n /\n Sets the headline of the dialog.\n * @param value\n /\n set placement(value) {\n this.setAttribute('placement', value);\n }\n\n /\n Gets the headline of the dialog.\n * @returns {string\|string}\n /\n get placement() {\n return this.getAttribute('placement') \|\| 'slide-up';\n }\n\n /\n Sets the headline of the dialog.\n * @param value\n /\n set async(value) {\n this.setAttribute('async', '');\n }\n\n /\n Gets the headline of the dialog.\n * @returns {boolean}\n /\n get async() {\n return this.hasAttribute('async');\n }\n\n /\n Sets the headline of the dialog.\n * @param value\n /\n set closeHidden(value) {\n if (value) this.setAttribute('close-hidden', '');\n }\n\n /\n Gets the headline of the dialog.\n * @returns {boolean}\n /\n get closeHidden() {\n return !!this.hasAttribute('close-hidden');\n }\n\n set hiddenHeader(value) {\n if (value) this.setAttribute('hidden-header', '');\n }\n\n get hiddenHeader() {\n return !!this.hasAttribute('hidden-header');\n }\n\n set hiddenFooter(value) {\n if (value) this.setAttribute('hidden-footer', '');\n }\n\n get hiddenFooter() {\n return !!this.hasAttribute('hidden-footer');\n }\n\n /\n Sets the headline of the dialog.\n * @type {string}\n /\n className = 'Dialog';\n\n /\n Returns the CSS styles for the component.\n * @returns {}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /*\n Returns the list of attributes to observe for changes.\n * @returns {[]}\n /\n static get observedAttributes() {\n return [];\n }\n\n /*\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n }\n\n /\n Draws the component.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n * @returns {DocumentFragment}\n /\n draw(context, store, params) {\n let fragment = document.createDocumentFragment();\n\n this.classList.add('fade', this.placement, params.size);\n\n let dialog = document.createElement('dialog');\n dialog.setAttribute('part', 'dialog');\n dialog.classList.add('modal-dialog');\n dialog.addEventListener('close', this.onNativeDialogClose);\n\n fragment.appendChild(dialog);\n\n this.dialog = dialog;\n this.syncHostOpenState();\n\n return fragment;\n }\n\n /\n Draws the component after it has been drawn.\n * @param {object} context The context for drawing.\n * @param {object} store The store for drawing.\n * @param {object} params The parameters for drawing.\n /\n afterDraw(context, store, params) {\n if (params.trigger) {\n event.addListener(document, params.trigger, null, this.onOpen);\n }\n }\n\n /\n Creates the dialog body.\n * @param dialog\n /\n htmlDialogBody(dialog) {\n const dialogId = this.id \|\| `wje-dialog-${this._instanceId}`;\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'x');\n icon.setAttribute('slot', 'icon-only');\n\n let close = document.createElement('wje-button');\n close.setAttribute('fill', 'link');\n close.setAttribute('size', 'small');\n close.setAttribute('part', 'close');\n close.setAttribute('aria-label', 'Close dialog');\n close.addEventListener('click', (e) => {\n this.close(e);\n });\n\n let header = document.createElement('div');\n header.setAttribute('part', 'header');\n header.classList.add('dialog-header');\n header.id = `${dialogId}-header`;\n if (this.hasAttribute('headline'))\n header.innerHTML = `<span part=\"headline\">${this.headline}</span>`;\n\n let slotHeader = document.createElement('slot');\n slotHeader.setAttribute('name', 'header');\n\n const headerActions = document.createElement('div');\n headerActions.classList.add('header-actions');\n headerActions.setAttribute('part', 'header-actions');\n headerActions.appendChild(slotHeader);\n\n let contentSlot = document.createElement('slot');\n\n let body = document.createElement('div');\n body.setAttribute('part', 'body');\n body.classList.add('dialog-content');\n body.id = `${dialogId}-body`;\n\n let footer = document.createElement('div');\n footer.setAttribute('part', 'footer');\n footer.classList.add('dialog-footer');\n footer.innerHTML = '';\n\n let slotFooter = document.createElement('slot');\n slotFooter.setAttribute('name', 'footer');\n slotFooter.id = 'footerSlot';\n slotFooter.addEventListener('slotchange', () => this.updateHasFooter());\n\n close.appendChild(icon);\n\n if (!this.closeHidden) header.appendChild(close);\n\n header.appendChild(headerActions);\n body.appendChild(contentSlot);\n footer.appendChild(slotFooter);\n\n if (!this.hiddenHeader) dialog.appendChild(header);\n dialog.appendChild(body);\n if (!this.hiddenFooter) dialog.appendChild(footer);\n\n dialog.setAttribute('role', 'dialog');\n dialog.setAttribute('aria-describedby', body.id);\n if (!this.hiddenHeader) {\n dialog.setAttribute('aria-labelledby', header.id);\n dialog.removeAttribute('aria-label');\n } else {\n dialog.removeAttribute('aria-labelledby');\n if (this.headline) {\n dialog.setAttribute('aria-label', this.headline);\n } else {\n dialog.removeAttribute('aria-label');\n }\n }\n\n Promise.resolve().then(() => this.updateHasFooter());\n }\n\n /\n Closes the dialog.\n * @param e\n /\n close(e) {\n this.onClose(e);\n }\n\n /\n Before the component is disconnected.\n /\n beforeDisconnect() {\n if (this.params?.trigger) {\n event.removeListener(document, this.params?.trigger, null, this.onOpen);\n }\n\n this.dialog?.removeEventListener('close', this.onNativeDialogClose);\n }\n\n /\n Before the dialog opens.\n /\n beforeOpen(dialog, trigger) {\n // Hook for extending behavior before the dialog opens\n }\n\n /\n After the dialog opens.\n /\n afterOpen(dialog, trigger) {\n // Hook for extending behavior after the dialog opens\n }\n\n /\n Before the dialog closes.\n /\n beforeClose(dialog, trigger) {\n // Hook for extending behavior before the dialog closes\n }\n\n /\n After the dialog closes.\n /\n afterClose(dialog, trigger) {\n // Hook for extending behavior after the dialog closes\n }\n\n /\n Opens the dialog.\n * @param e\n /\n onOpen = (e) => {\n if (this.dialog) {\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 this.syncHostOpenState();\n this.dialog.setAttribute('aria-modal', 'true');\n\n if (this.dialog.open) {\n Promise.resolve(this.afterOpen(this, e));\n }\n });\n }, 0);\n }\n\n /\n Closes the dialog.\n * @param {object} e\n /\n onClose = (e) => {\n Promise.resolve(this.beforeClose(this, e)).then((res) => {\n this.dialog.close(); // Now close the dialog\n this.dialog.removeAttribute('aria-modal');\n this.syncHostOpenState();\n\n if (!this.dialog.open) {\n Promise.resolve(this.afterClose(this, e));\n }\n });\n };\n\n onNativeDialogClose = () => {\n this.dialog?.removeAttribute('aria-modal');\n this.removeAttribute('open');\n };\n\n syncHostOpenState = () => {\n this.toggleAttribute('open', !!this.dialog?.open);\n };\n\n /\n Registers an event listener on the provided button that triggers a blocking UI element\n * and executes a given promise when the button is clicked.\n * @param {HTMLElement} button The button element to attach the event listener to.\n * @param {Function} promise A function that returns a promise to be executed when the button is clicked.\n */\n registerBlockingEvent(button, promise) {\n button.addEventListener('wje-button:click', async (e) => {\n let blockingElement = document.createElement('div');\n blockingElement.classList.add('blocking-element');\n\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', 'loader-2');\n icon.setAttribute('size', '2x-large');\n\n blockingElement.appendChild(icon);\n\n let scrollOffset = this.dialog.scrollTop;\n blockingElement.style.top = `${scrollOffset}px`;\n blockingElement.style.bottom = `-${scrollOffset}px`;\n\n this.dialog.appendChild(blockingElement);\n\n await promise()\n .then((res) => {\n this.close();\n blockingElement.remove();\n })\n .catch((err) => {\n console.error(err);\n blockingElement.remove();\n });\n });\n }\n\n updateHasFooter() {\n // If footer is intentionally hidden, ensure it doesn't reserve space\n if (this.hiddenFooter) {\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.setAttribute('hidden', '');\n this.removeAttribute('has-footer');\n return;\n }\n const slot = this.shadowRoot?.getElementById('footerSlot');\n if (!slot) {\n this.removeAttribute('has-footer');\n return;\n }\n\n const assigned = slot.assignedNodes({ flatten: true });\n const hasContent = assigned.some((n) => {\n if (n.nodeType === Node.ELEMENT_NODE) return true;\n if (n.nodeType === Node.TEXT_NODE) return n.textContent.trim().length > 0;\n return false;\n });\n\n // Prefer toggling the actual footer element so CSS/spacing is always correct\n const footerEl = this.shadowRoot?.querySelector('.dialog-footer');\n if (footerEl) footerEl.toggleAttribute('hidden', !hasContent);\n\n // Keep host attribute too (harmless, may be used elsewhere)\n this.toggleAttribute('has-footer', hasContent);\n }\n}\n","import Dialog from './dialog.element.js';\n\nexport default Dialog;\n\nDialog.define('wje-dialog', Dialog);\n"],"names":["footerEl"],"mappings":"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"}

package/dist/wje-master.js CHANGED Viewed

@@ -117,7 +117,12 @@ const skSk = {
   "wj.stepper.button.next": "Ďalej",
   "wj.stepper.button.finish": "Dokončiť",
   "wj.stepper.button.previous": "Späť",
-  "wj.stepper.step": "Krok"
+  "wj.stepper.step": "Krok",
+  "wj.pagination.of": "z",
+  "wj.pagination.first": "Prvá stránka",
+  "wj.pagination.prev": "Predchádzajúca",
+  "wj.pagination.next": "Ďalšia",
+  "wj.pagination.last": "Posledná stránka"
 };
 Localizer.registerTranslation(skSk);
 const enGb = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-master.js","sources":["../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n code: 'sk-sk',\n name: 'Slovak',\n dir: 'ltr',\n\n welcome: 'Vitajte',\n 'wj.file.upload.button': 'Vybrať súbor',\n 'wj.file.upload.uploaded': 'Nahraných: ',\n 'wj.file.upload.from': 'z',\n 'wj.stepper.button.next': 'Ďalej',\n 'wj.stepper.button.finish': 'Dokončiť',\n 'wj.stepper.button.previous': 'Späť',\n 'wj.stepper.step': 'Krok',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n code: 'en-gb',\n name: 'English',\n dir: 'ltr',\n\n welcome: 'Welcome',\n 'wj.file.upload.button': 'Browse files',\n 'wj.file.upload.uploaded': 'Uploaded: ',\n 'wj.file.upload.from': 'from',\n 'wj.stepper.button.next': 'Next',\n 'wj.stepper.button.finish': 'Finish',\n 'wj.stepper.button.previous': 'Previous',\n 'wj.stepper.step': 'Step',\n 'wj.pagination.of': 'of',\n 'wj.pagination.first': 'First page',\n 'wj.pagination.prev': 'Previous',\n 'wj.pagination.next': 'Next',\n 'wj.pagination.last': 'Last page',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n /\nexport default class Timeline extends WJElement {\n /\n Creates an instance of Timeline.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n /\n className = 'Timeline';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component for the timeline.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline');\n\n const verticalLine = document.createElement('div');\n verticalLine.setAttribute('part', 'vertical-line');\n verticalLine.classList.add('vertical-line');\n\n const slot = document.createElement('slot');\n\n native.appendChild(verticalLine);\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'list' });\n }\n }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/\n The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n /\nexport default class TimelineItem extends WJElement {\n constructor() {\n super();\n }\n\n /\n Returns the class name of the tab.\n * @returns {string} The class name of the tab.\n /\n className = 'TimelineItem';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('relative-time', '');\n }\n\n /\n Draws the component for the timeline item.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline-item');\n\n let contentContainer = document.createElement('div');\n contentContainer.setAttribute('part', 'content-container');\n contentContainer.classList.add('content-container');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('text', this.getAttribute('tooltip') \|\| '');\n tooltip.setAttribute('position', 'top');\n tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n let relativeTime = document.createElement('wje-relative-time');\n relativeTime.setAttribute('date', this.datetime \|\| '');\n relativeTime.setAttribute('format', this.getAttribute('format') \|\| '');\n\n tooltip.appendChild(relativeTime);\n\n let event = document.createElement('h3');\n event.classList.add('event');\n event.textContent = this.getAttribute('event') \|\| '';\n\n // additional text content\n let slot = document.createElement('slot');\n\n // status slot\n let slotStatus = document.createElement('wje-icon');\n slotStatus.setAttribute('name', 'circle-dot');\n slotStatus.setAttribute('filled', '');\n slotStatus.setAttribute('part', 'default-icon');\n\n // if status slot is present\n if (this.querySelector('[slot=\"status\"]')) {\n slotStatus = document.createElement('slot');\n slotStatus.setAttribute('name', 'status');\n }\n\n contentContainer.appendChild(tooltip);\n contentContainer.appendChild(event);\n contentContainer.appendChild(slot);\n\n native.appendChild(slotStatus);\n native.appendChild(contentContainer);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n"],"names":["styles","event"],"mappings":"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"}
1	+ {"version":3,"file":"wje-master.js","sources":["../packages/translations/sk-sk.js","../packages/translations/en-gb.js","../packages/wje-timeline/timeline.element.js","../packages/wje-timeline/timeline.js","../packages/wje-timeline-item/timeline-item.element.js","../packages/wje-timeline-item/timeline-item.js"],"sourcesContent":["import { Localizer } from '../utils/localize.js';\n\nexport const skSk = {\n code: 'sk-sk',\n name: 'Slovak',\n dir: 'ltr',\n\n welcome: 'Vitajte',\n 'wj.file.upload.button': 'Vybrať súbor',\n 'wj.file.upload.uploaded': 'Nahraných: ',\n 'wj.file.upload.from': 'z',\n 'wj.stepper.button.next': 'Ďalej',\n 'wj.stepper.button.finish': 'Dokončiť',\n 'wj.stepper.button.previous': 'Späť',\n 'wj.stepper.step': 'Krok',\n 'wj.pagination.of': 'z',\n 'wj.pagination.first': 'Prvá stránka',\n 'wj.pagination.prev': 'Predchádzajúca',\n 'wj.pagination.next': 'Ďalšia',\n 'wj.pagination.last': 'Posledná stránka',\n};\n\nLocalizer.registerTranslation(skSk);\n","import { Localizer } from '../utils/localize.js';\n\nexport const enGb = {\n code: 'en-gb',\n name: 'English',\n dir: 'ltr',\n\n welcome: 'Welcome',\n 'wj.file.upload.button': 'Browse files',\n 'wj.file.upload.uploaded': 'Uploaded: ',\n 'wj.file.upload.from': 'from',\n 'wj.stepper.button.next': 'Next',\n 'wj.stepper.button.finish': 'Finish',\n 'wj.stepper.button.previous': 'Previous',\n 'wj.stepper.step': 'Step',\n 'wj.pagination.of': 'of',\n 'wj.pagination.first': 'First page',\n 'wj.pagination.prev': 'Previous',\n 'wj.pagination.next': 'Next',\n 'wj.pagination.last': 'Last page',\n};\n\nLocalizer.registerTranslation(enGb);\n","import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `Timeline` is a custom web component that represents a timeline.\n * @summary This element represents a timeline.\n * @documentation https://elements.webjet.sk/components/timeline\n * @status stable\n * @augments WJElement\n * @slot - Slot for the timeline items.\n * @csspart native - The native part of the rating component.\n * @csspart vertical-line - The vertical line part of the rating component.\n * @tag wje-timeline\n /\nexport default class Timeline extends WJElement {\n /\n Creates an instance of Timeline.\n /\n constructor() {\n super();\n }\n\n /\n The class name for the component.\n /\n className = 'Timeline';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n /\n Draws the component for the timeline.\n * @returns {DocumentFragment}\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n const native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline');\n\n const verticalLine = document.createElement('div');\n verticalLine.setAttribute('part', 'vertical-line');\n verticalLine.classList.add('vertical-line');\n\n const slot = document.createElement('slot');\n\n native.appendChild(verticalLine);\n native.appendChild(slot);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n\n /\n Sync ARIA attributes on host.\n /\n syncAria() {\n if (!this.hasAttribute('role')) {\n this.setAriaState({ role: 'list' });\n }\n }\n}\n","import Timeline from './timeline.element.js';\n\nexport default Timeline;\n\nTimeline.define('wje-timeline', Timeline);\n","import { formatDate } from '../utils/date.js';\nimport { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/\n The TimelineItem component.\n * @summary This element represents a timeline item.\n * @documentation https://elements.webjet.sk/components/timeline-item\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the timeline item.\n * @csspart content-container - The content container part of the timeline item.\n * @csspart default-icon - The default icon part of the timeline item.\n * @slot - Slot for the content of the timeline item.\n * @slot status - Slot for the status of the timeline item.\n * @tag wje-timeline-item\n /\nexport default class TimelineItem extends WJElement {\n constructor() {\n super();\n }\n\n /\n Returns the class name of the tab.\n * @returns {string} The class name of the tab.\n /\n className = 'TimelineItem';\n\n /\n Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Sets up the attributes for the component.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAttribute('relative-time', '');\n }\n\n /\n Draws the component for the timeline item.\n * @returns {DocumentFragment}\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-timeline-item');\n\n let contentContainer = document.createElement('div');\n contentContainer.setAttribute('part', 'content-container');\n contentContainer.classList.add('content-container');\n\n let tooltip = document.createElement('wje-tooltip');\n tooltip.setAttribute('text', this.getAttribute('tooltip') \|\| '');\n tooltip.setAttribute('position', 'top');\n tooltip.setAttribute('content', formatDate(this.datetime, 'dd.MM.yyyy HH:mm'));\n\n let relativeTime = document.createElement('wje-relative-time');\n relativeTime.setAttribute('date', this.datetime \|\| '');\n relativeTime.setAttribute('format', this.getAttribute('format') \|\| '');\n\n tooltip.appendChild(relativeTime);\n\n let event = document.createElement('h3');\n event.classList.add('event');\n event.textContent = this.getAttribute('event') \|\| '';\n\n // additional text content\n let slot = document.createElement('slot');\n\n // status slot\n let slotStatus = document.createElement('wje-icon');\n slotStatus.setAttribute('name', 'circle-dot');\n slotStatus.setAttribute('filled', '');\n slotStatus.setAttribute('part', 'default-icon');\n\n // if status slot is present\n if (this.querySelector('[slot=\"status\"]')) {\n slotStatus = document.createElement('slot');\n slotStatus.setAttribute('name', 'status');\n }\n\n contentContainer.appendChild(tooltip);\n contentContainer.appendChild(event);\n contentContainer.appendChild(slot);\n\n native.appendChild(slotStatus);\n native.appendChild(contentContainer);\n\n fragment.appendChild(native);\n\n return fragment;\n }\n}\n","import TimelineItem from './timeline-item.element.js';\n\nexport default TimelineItem;\n\nTimelineItem.define('wje-timeline-item', TimelineItem);\n"],"names":["styles","event"],"mappings":"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"}

package/dist/wje-tree-item.js CHANGED Viewed

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: 1em;\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            font-size: calc(1rem + var(--wje-tree-item-indent, var(--wje-spacing-medium)));\n            padding-inline-start: var(--wje-tree-item-indent, var(--wje-spacing-medium));\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(1em - (var(--wje-spacing-3x-small) * 2) - (var(--wje-tree-item-indent-guid-width) / 2));\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
+const styles = "/*\n[ WJ Tree Item ]\n*/\n\n:host {\n    .native-tree-item {\n        position: relative;\n        display: flex;\n        align-items: stretch;\n        flex-direction: column;\n        &.multiple {\n            .item {\n                border-radius: 0 !important;\n            }\n        }\n        .item {\n            display: flex;\n            align-items: center;\n            padding-inline: var(--wje-tree-item-padding-inline);\n            padding-block: var(--wje-tree-item-padding-block);\n            border-radius: var(--wje-tree-item-border-radius);\n            background-color: var(--wje-tree-item-background);\n            color: var(--wje-tree-item-color);\n\n            &:hover {\n                background-color: var(--wje-tree-item-background-hover);\n                color: var(--wje-tree-item-color-hover);\n            }\n\n            .indent {\n                display: block;\n                width: calc(var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0));\n                flex-shrink: 0;\n            }\n\n            .toggle {\n                font-size: var(--wje-tree-item-font-size);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                box-sizing: content-box;\n                width: var(--wje-tree-item-indent);\n                height: var(--wje-tree-item-indent);\n                flex-shrink: 0;\n            }\n\n            wje-checkbox {\n                font-size: var(--wje-tree-item-font-size);\n                margin: 0;\n            }\n\n            .content {\n                font-size: var(--wje-tree-item-font-size);\n            }\n\n            slot {\n                display: flex;\n                align-items: center;\n            }\n\n            slot:not([name])::slotted(wje-icon) {\n                margin-right: var(--wje-spacing-2x-small);\n            }\n\n            slot[name='end'] {\n                margin-inline-start: auto;\n            }\n        }\n        .children {\n            display: none;\n            &.open {\n                font-size: var(--wje-tree-item-font-size);\n                display: block;\n\n                ::before {\n                    content: '';\n                    position: absolute;\n                    top: var(--wje-tree-item-indent);\n                    bottom: 5px;\n                    left: calc(\n                        (var(--wje-tree-item-indent, var(--wje-spacing-medium)) * var(--wje-tree-item-depth, 0)) +\n                        1em -\n                        (var(--wje-spacing-3x-small) * 2) -\n                        (var(--wje-tree-item-indent-guid-width) / 2)\n                    );\n                    border-inline-end: var(--wje-tree-item-indent-guid-width) solid var(--wje-border-color);\n                    z-index: 1;\n                }\n            }\n        }\n    }\n\n    .native-tree-item.expanded .item slot[name='expand'],\n    .native-tree-item:not(.expanded) slot[name='collapse'] {\n        display: none;\n    }\n}\n\n:host([selected]) {\n    .item {\n        background-color: var(--wje-tree-item-background-selected);\n        color: var(--wje-tree-item-color-selected);\n    }\n}\n:host([slot-hover-visible]) {\n    .item {\n        &:hover {\n            slot[name='start'], slot[name='end'] {\n                visibility: visible;\n            }\n        }\n        slot[name='start'], slot[name='end'] {\n            visibility: hidden;\n        }\n    }\n}\n";
 class TreeItem extends WJElement {
   /**
    * Creates an instance of Toast.
@@ -107,7 +107,7 @@ class TreeItem extends WJElement {
   connectedCallback() {
     var _a;
     (_a = super.connectedCallback) == null ? void 0 : _a.call(this);
-    if (this.isNestedItem()) this.slot = "children";
+    this.syncNestingState();
   }
   /**
    * Returns the list of attributes to observe for changes.
@@ -151,10 +151,25 @@ class TreeItem extends WJElement {
    */
   beforeDraw() {
     var _a;
-    if (this.isNestedItem()) this.slot = "children";
+    this.syncNestingState();
     if ((_a = this.closest("wje-tree")) == null ? void 0 : _a.hasAttribute("slot-hover-visible"))
       this.setAttribute("slot-hover-visible", "");
   }
+  /**
+   * Synchronizes the nesting-related state on the host element.
+   * Sets the "slot" to children for nested items and updates
+   * the nesting depth used to compute visual indentation.
+   * @returns {void}
+   */
+  syncNestingState() {
+    const depth = this.getNestingDepth();
+    this.style.setProperty("--wje-tree-item-depth", String(depth));
+    if (depth > 0) {
+      this.slot = "children";
+    } else if (this.getAttribute("slot") === "children") {
+      this.removeAttribute("slot");
+    }
+  }
   /**
    * Creates and returns a document fragment representing the structure of a tree item component.
    * The method constructs the DOM elements including the native container, indentation, toggle button,
@@ -248,6 +263,20 @@ class TreeItem extends WJElement {
     const parent = this.parentElement;
     return !!parent && this.isTreeItem(parent);
   }
+  /**
+   * Calculates nesting depth based on ancestor tree items.
+   * Root items have depth 0, direct children depth 1, etc.
+   * @returns {number}
+   */
+  getNestingDepth() {
+    let depth = 0;
+    let current = this.parentElement;
+    while (current) {
+      if (this.isTreeItem(current)) depth += 1;
+      current = current.parentElement;
+    }
+    return depth;
+  }
   /**
    * Checks whether the given node is a tree item.
    * @param {object} node The node to check.

package/dist/wje-tree-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n /\n\nexport default class TreeItem extends WJElement {\n /\n Creates an instance of Toast.\n /\n constructor() {\n super();\n\n this._selection = 'single';\n }\n\n /\n Sets the expanded state of the element. When set to a truthy value,\n * the 'expanded' attribute will be added to the element. When set to a falsy\n * value, the 'expanded' attribute will be removed.\n * @param {boolean} value A boolean value indicating whether the\n * element should be expanded (true) or collapsed (false).\n /\n set expanded(value) {\n if (value) {\n this.setAttribute('expanded', '');\n } else {\n this.removeAttribute('expanded');\n }\n }\n\n /\n Retrieves the value of the 'expanded' state for the current element.\n * This getter checks whether the 'expanded' attribute is present on the element.\n * If the attribute exists, it returns true, representing that the element is expanded.\n * Otherwise, it returns false, indicating that the element is not expanded.\n * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n /\n get expanded() {\n return this.hasAttribute('expanded');\n }\n\n /\n Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n /\n set selected(value) {\n this.removeAttribute('selected');\n\n if (value) this.setAttribute('selected', '');\n }\n\n /\n Getter method for determining if the 'selected' attribute is present on the element.\n * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n /\n get selected() {\n return this.hasAttribute('selected');\n }\n\n /\n Sets the selection mode for the component.\n * @param {string} value The selection mode to apply. Defaults to 'single'\n * if no value is provided. Possible options may be\n * specific to the implementation of the component\n * (e.g., 'single', 'multiple').\n /\n set selection(value) {\n this._selection = value \|\| 'single';\n }\n\n /\n Retrieves the current selection.\n * @returns {} The value of the current selection.\n /\n get selection() {\n return this._selection;\n }\n\n /*\n Sets or removes the 'indeterminate' attribute based on the provided value.\n * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n /\n set indeterminate(value) {\n this.removeAttribute('indeterminate');\n\n if (value) this.setAttribute('indeterminate', '');\n }\n\n /\n Retrieves the state of the indeterminate attribute.\n * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n /\n get indeterminate() {\n return this.hasAttribute('indeterminate');\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'TreeItem';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n if (this.isNestedItem()) this.slot = 'children';\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['selected', 'indeterminate'];\n }\n\n /\n Handles updates when observed attributes of the element are changed.\n * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string\|null} oldValue The previous value of the attribute before the change.\n * @param {string\|null} newValue The new value of the attribute after the change.\n * @returns {void}\n /\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.checkbox) {\n this.syncAria();\n return;\n }\n if (name === 'selected') {\n // this.checkbox.removeAttribute('indeterminate');\n if (this.selected) {\n this.checkbox.checked = true;\n } else {\n this.checkbox.checked = false;\n }\n }\n\n if (name === 'indeterminate' && !this.selected) {\n this.checkbox.removeAttribute('indeterminate');\n this.checkbox.removeAttribute('checked');\n\n if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n }\n this.syncAria();\n }\n\n /\n Custom logic executed before the draw process begins.\n * Determines and sets the appropriate slot if the current item is nested.\n * @returns {void} No return value.\n /\n beforeDraw() {\n if (this.isNestedItem()) this.slot = 'children';\n\n if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n this.setAttribute('slot-hover-visible', '');\n }\n\n /\n Creates and returns a document fragment representing the structure of a tree item component.\n * The method constructs the DOM elements including the native container, indentation, toggle button,\n * selection checkbox, label, and children container, along with their respective slots and attributes.\n * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n * child components.\n * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let item = document.createElement('div');\n item.setAttribute('part', 'item');\n item.classList.add('item');\n\n let indent = document.createElement('div');\n indent.classList.add('indent');\n\n let button = document.createElement('div');\n button.classList.add('toggle');\n\n let checkbox = document.createElement('wje-checkbox');\n if (this.selected) checkbox.setAttribute('checked', '');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('content');\n\n let slotElement = document.createElement('slot');\n\n let children = document.createElement('div');\n children.classList.add('children');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'children');\n children.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n item.appendChild(slotStart);\n item.appendChild(indent);\n\n if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n let expandIcon = document.createElement('wje-icon');\n expandIcon.setAttribute('name', 'chevron-right');\n expandIcon.setAttribute('slot', 'expand');\n\n this.appendChild(expandIcon);\n }\n\n if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n let collapseIcon = document.createElement('wje-icon');\n collapseIcon.setAttribute('name', 'chevron-down');\n collapseIcon.setAttribute('slot', 'collapse');\n\n this.appendChild(collapseIcon);\n }\n\n let expandSlot = document.createElement('slot');\n expandSlot.setAttribute('name', 'expand');\n\n let collapseSlot = document.createElement('slot');\n collapseSlot.setAttribute('name', 'collapse');\n\n button.appendChild(expandSlot);\n button.appendChild(collapseSlot);\n }\n\n item.appendChild(button);\n\n if (this.selection === 'multiple') item.appendChild(checkbox);\n\n label.appendChild(slotElement);\n item.appendChild(label);\n item.appendChild(slotEnd);\n\n native.appendChild(item);\n native.appendChild(children);\n\n fragment.appendChild(native);\n\n this.checkbox = checkbox;\n this.native = native;\n this.button = button;\n this.childrenElement = children;\n this.childrenSlot = slot;\n\n return fragment;\n }\n\n /\n Executes operations to be performed after the draw action is completed.\n * If the state indicates it is expanded, toggles its children.\n * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n * @returns {void} Does not return a value.\n /\n afterDraw() {\n if (this.expanded) this.toggleChildren();\n\n this.button.addEventListener('click', this.toggleChildren.bind(this));\n this.setAttribute('tabindex', '0');\n this.syncAria();\n }\n\n /\n Determines if the current item is a nested item within a tree structure.\n * Checks if the item's parent element exists and is also a tree item.\n * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n /\n isNestedItem() {\n const parent = this.parentElement;\n return !!parent && this.isTreeItem(parent);\n }\n\n /\n Checks whether the given node is a tree item.\n * @param {object} node The node to check.\n * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n /\n isTreeItem(node) {\n return node instanceof Element && node.className === 'TreeItem';\n }\n\n /\n Toggles the visibility state of the children element and updates the class of the parent element.\n * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n * effectively showing or hiding the children and indicating the expanded state.\n * @returns {void} Does not return a value.\n /\n toggleChildren() {\n this.childrenElement.classList.toggle('open');\n this.native.classList.toggle('expanded');\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n if (this.selection === 'multiple') {\n const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n this.setAriaState({\n role: 'treeitem',\n checked,\n expanded,\n });\n } else {\n this.setAriaState({\n role: 'treeitem',\n selected: this.selected,\n expanded,\n });\n }\n }\n\n /\n Retrieves the child items from the `childrenSlot` that match specific criteria.\n * @param {object} [options] Configuration options.\n * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n /\n getChildrenItems(options = {}) {\n const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n const assigned = this.childrenSlot\n ? this.childrenSlot.assignedElements({ flatten: true })\n : [];\n const direct = assigned.length\n ? assigned\n : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n return direct.filter(\n (item) => this.isTreeItem(item) && (includeDisabled \|\| !item.disabled)\n );\n }\n\n /\n Retrieves all descendant children of the current object in a flattened array structure.\n * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n * @returns {Array} An array containing all children and their descendants in a flat structure.\n */\n getAllChildrenFlat(options = {}) {\n const directChildren = this.getChildrenItems(options);\n return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":";;;;;AAkBe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,UAAK;AA4FT;AAAA;AAAA;AAAA;AAAA,qCAAY;AA1FR,SAAK,aAAa;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,SAAS,OAAO;AAChB,QAAI,OAAO;AACP,WAAK,aAAa,YAAY,EAAE;AAAA,IACpC,OAAO;AACH,WAAK,gBAAgB,UAAU;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,gBAAgB,UAAU;AAE/B,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,IAAI,UAAU,OAAO;AACjB,SAAK,aAAa,SAAS;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,YAAY;AACZ,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,cAAc,OAAO;AACrB,SAAK,gBAAgB,eAAe;AAEpC,QAAI,MAAO,MAAK,aAAa,iBAAiB,EAAE;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAgB;AAChB,WAAO,KAAK,aAAa,eAAe;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,SAAQ;AAAA,EACjB;AAAA,EAEA,oBAAoB;;AAChB,gBAAM,sBAAN;AACA,QAAI,KAAK,aAAY,EAAI,MAAK,OAAO;AAAA,EACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,YAAY,eAAe;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,yBAAyB,MAAM,UAAU,UAAU;AAC/C,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,SAAQ;AACb;AAAA,IACJ;AACA,QAAI,SAAS,YAAY;AAErB,UAAI,KAAK,UAAU;AACf,aAAK,SAAS,UAAU;AAAA,MAC5B,OAAO;AACH,aAAK,SAAS,UAAU;AAAA,MAC5B;AAAA,IACJ;AAEA,QAAI,SAAS,mBAAmB,CAAC,KAAK,UAAU;AAC5C,WAAK,SAAS,gBAAgB,eAAe;AAC7C,WAAK,SAAS,gBAAgB,SAAS;AAEvC,UAAI,KAAK,cAAe,MAAK,SAAS,aAAa,iBAAiB,EAAE;AAAA,IAC1E;AACA,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa;;AACT,QAAI,KAAK,aAAY,EAAI,MAAK,OAAO;AAErC,SAAG,UAAK,QAAQ,UAAU,MAAvB,mBAA0B,aAAa;AACtC,WAAK,aAAa,sBAAsB,EAAE;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,oBAAoB,KAAK,cAAc,aAAa,aAAa,QAAQ;AAE9F,QAAI,YAAY,SAAS,cAAc,MAAM;AAC7C,cAAU,aAAa,QAAQ,OAAO;AAEtC,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,aAAa,QAAQ,MAAM;AAChC,SAAK,UAAU,IAAI,MAAM;AAEzB,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,QAAQ;AAE7B,QAAI,WAAW,SAAS,cAAc,cAAc;AACpD,QAAI,KAAK,SAAU,UAAS,aAAa,WAAW,EAAE;AAEtD,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU,IAAI,SAAS;AAE7B,QAAI,cAAc,SAAS,cAAc,MAAM;AAE/C,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,UAAU,IAAI,UAAU;AAEjC,QAAI,OAAO,SAAS,cAAc,MAAM;AACxC,SAAK,aAAa,QAAQ,UAAU;AACpC,aAAS,YAAY,IAAI;AAEzB,QAAI,UAAU,SAAS,cAAc,MAAM;AAC3C,YAAQ,aAAa,QAAQ,KAAK;AAElC,SAAK,YAAY,SAAS;AAC1B,SAAK,YAAY,MAAM;AAEvB,QAAI,KAAK,iBAAiB,wBAAwB,EAAE,SAAS,GAAG;AAC5D,UAAI,KAAK,iBAAiB,iBAAiB,EAAE,SAAS,GAAG;AACrD,YAAI,aAAa,SAAS,cAAc,UAAU;AAClD,mBAAW,aAAa,QAAQ,eAAe;AAC/C,mBAAW,aAAa,QAAQ,QAAQ;AAExC,aAAK,YAAY,UAAU;AAAA,MAC/B;AAEA,UAAI,KAAK,iBAAiB,mBAAmB,EAAE,SAAS,GAAG;AACvD,YAAI,eAAe,SAAS,cAAc,UAAU;AACpD,qBAAa,aAAa,QAAQ,cAAc;AAChD,qBAAa,aAAa,QAAQ,UAAU;AAE5C,aAAK,YAAY,YAAY;AAAA,MACjC;AAEA,UAAI,aAAa,SAAS,cAAc,MAAM;AAC9C,iBAAW,aAAa,QAAQ,QAAQ;AAExC,UAAI,eAAe,SAAS,cAAc,MAAM;AAChD,mBAAa,aAAa,QAAQ,UAAU;AAE5C,aAAO,YAAY,UAAU;AAC7B,aAAO,YAAY,YAAY;AAAA,IACnC;AAEA,SAAK,YAAY,MAAM;AAEvB,QAAI,KAAK,cAAc,WAAY,MAAK,YAAY,QAAQ;AAE5D,UAAM,YAAY,WAAW;AAC7B,SAAK,YAAY,KAAK;AACtB,SAAK,YAAY,OAAO;AAExB,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,QAAQ;AAE3B,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAChB,SAAK,SAAS;AACd,SAAK,SAAS;AACd,SAAK,kBAAkB;AACvB,SAAK,eAAe;AAEpB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;AACR,QAAI,KAAK,SAAU,MAAK,eAAc;AAEtC,SAAK,OAAO,iBAAiB,SAAS,KAAK,eAAe,KAAK,IAAI,CAAC;AACpE,SAAK,aAAa,YAAY,GAAG;AACjC,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,eAAe;AACX,UAAM,SAAS,KAAK;AACpB,WAAO,CAAC,CAAC,UAAU,KAAK,WAAW,MAAM;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,MAAM;AACb,WAAO,gBAAgB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,iBAAiB;AACb,SAAK,gBAAgB,UAAU,OAAO,MAAM;AAC5C,SAAK,OAAO,UAAU,OAAO,UAAU;AACvC,SAAK,SAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;;AACP,UAAM,cAAc,KAAK,iBAAiB,wBAAwB,EAAE,SAAS;AAC7E,UAAM,WAAW,eAAc,gBAAK,WAAL,mBAAa,cAAb,mBAAwB,SAAS,cAAc;AAC9E,QAAI,KAAK,cAAc,YAAY;AAC/B,YAAM,UAAU,KAAK,gBAAgB,UAAW,KAAK,WAAW,SAAS;AACzE,WAAK,aAAa;AAAA,QACd,MAAM;AAAA,QACN;AAAA,QACA;AAAA,MAChB,CAAa;AAAA,IACL,OAAO;AACH,WAAK,aAAa;AAAA,QACd,MAAM;AAAA,QACN,UAAU,KAAK;AAAA,QACf;AAAA,MAChB,CAAa;AAAA,IACL;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,iBAAiB,UAAU,IAAI;AAC3B,UAAM,kBAAkB,QAAQ,mBAAmB;AAEnD,UAAM,WAAW,KAAK,eAChB,KAAK,aAAa,iBAAiB,EAAE,SAAS,KAAI,CAAE,IACpD,CAAA;AACN,UAAM,SAAS,SAAS,SAClB,WACA,MAAM,KAAK,KAAK,iBAAiB,wBAAwB,CAAC;AAEhE,WAAO,OAAO;AAAA,MACV,CAAC,SAAS,KAAK,WAAW,IAAI,MAAM,mBAAmB,CAAC,KAAK;AAAA,IACzE;AAAA,EACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,mBAAmB,UAAU,IAAI;AAC7B,UAAM,iBAAiB,KAAK,iBAAiB,OAAO;AACpD,WAAO,eAAe,QAAQ,CAAC,UAAU,CAAC,OAAO,GAAG,MAAM,mBAAmB,OAAO,CAAC,CAAC;AAAA,EAC1F;AACJ;AC/XA,SAAS,OAAO,iBAAiB,QAAQ;"}
1	+ {"version":3,"file":"wje-tree-item.js","sources":["../packages/wje-tree-item/tree-item.element.js","../packages/wje-tree-item/tree-item.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/*\n `wje-tree-item` is a custom web component used as a child of the `wje-tree`.\n * It represents a node within a tree structure, capable of nesting other items.\n * @summary Represents a single item in a tree structure.\n * @documentation https://elements.webjet.sk/components/tree-item\n * @status stable\n * @augments {HTMLElement}\n * @slot - Default slot for rendering the tree item's content (e.g., text or custom elements).\n * @csspart native - The native container of the tree item.\n * @cssproperty [--wje-tree-item-indent=var(--wje-spacing-large)] - Defines the indentation for nested tree items.\n * @cssproperty [--wje-tree-item-indent-guid-width=0px] - Specifies the width of the guide element shown next to a tree item.\n * @cssproperty [--wje-tree-item-border-radius=var(--wje-border-radius-medium)] - Sets the border radius of the tree item’s container.\n * @tag wje-tree-item\n /\n\nexport default class TreeItem extends WJElement {\n /\n Creates an instance of Toast.\n /\n constructor() {\n super();\n\n this._selection = 'single';\n }\n\n /\n Sets the expanded state of the element. When set to a truthy value,\n * the 'expanded' attribute will be added to the element. When set to a falsy\n * value, the 'expanded' attribute will be removed.\n * @param {boolean} value A boolean value indicating whether the\n * element should be expanded (true) or collapsed (false).\n /\n set expanded(value) {\n if (value) {\n this.setAttribute('expanded', '');\n } else {\n this.removeAttribute('expanded');\n }\n }\n\n /\n Retrieves the value of the 'expanded' state for the current element.\n * This getter checks whether the 'expanded' attribute is present on the element.\n * If the attribute exists, it returns true, representing that the element is expanded.\n * Otherwise, it returns false, indicating that the element is not expanded.\n * @returns {boolean} True if the 'expanded' attribute is present, false otherwise.\n /\n get expanded() {\n return this.hasAttribute('expanded');\n }\n\n /\n Sets the 'selected' attribute of the element. Removes the attribute if the provided value is falsy; otherwise, sets it.\n * @param {boolean} value The value indicating whether the element should have the 'selected' attribute.\n /\n set selected(value) {\n this.removeAttribute('selected');\n\n if (value) this.setAttribute('selected', '');\n }\n\n /\n Getter method for determining if the 'selected' attribute is present on the element.\n * @returns {boolean} Returns true if the 'selected' attribute is present, otherwise false.\n /\n get selected() {\n return this.hasAttribute('selected');\n }\n\n /\n Sets the selection mode for the component.\n * @param {string} value The selection mode to apply. Defaults to 'single'\n * if no value is provided. Possible options may be\n * specific to the implementation of the component\n * (e.g., 'single', 'multiple').\n /\n set selection(value) {\n this._selection = value \|\| 'single';\n }\n\n /\n Retrieves the current selection.\n * @returns {} The value of the current selection.\n /\n get selection() {\n return this._selection;\n }\n\n /*\n Sets or removes the 'indeterminate' attribute based on the provided value.\n * This can be used to visually indicate an indeterminate state for elements like checkboxes.\n * @param {boolean} value A boolean indicating whether to set the element to an indeterminate state.\n * If true, the 'indeterminate' attribute is added to the element; if false, the attribute is removed.\n /\n set indeterminate(value) {\n this.removeAttribute('indeterminate');\n\n if (value) this.setAttribute('indeterminate', '');\n }\n\n /\n Retrieves the state of the indeterminate attribute.\n * @returns {boolean} True if the indeterminate attribute is present, otherwise false.\n /\n get indeterminate() {\n return this.hasAttribute('indeterminate');\n }\n\n /\n The class name for the component.\n * @type {string}\n /\n className = 'TreeItem';\n\n /\n Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n /\n static get cssStyleSheet() {\n return styles;\n }\n\n /\n Setup attributes for the Button element.\n /\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.syncAria();\n }\n\n connectedCallback() {\n super.connectedCallback?.();\n this.syncNestingState();\n }\n\n /\n Returns the list of attributes to observe for changes.\n * @static\n * @returns {Array<string>}\n /\n static get observedAttributes() {\n return ['selected', 'indeterminate'];\n }\n\n /\n Handles updates when observed attributes of the element are changed.\n * Updates the checkbox state based on changes to the \"selected\" or \"indeterminate\" attributes.\n * @param {string} name The name of the attribute that was changed.\n * @param {string\|null} oldValue The previous value of the attribute before the change.\n * @param {string\|null} newValue The new value of the attribute after the change.\n * @returns {void}\n /\n attributeChangedCallback(name, oldValue, newValue) {\n if (!this.checkbox) {\n this.syncAria();\n return;\n }\n if (name === 'selected') {\n // this.checkbox.removeAttribute('indeterminate');\n if (this.selected) {\n this.checkbox.checked = true;\n } else {\n this.checkbox.checked = false;\n }\n }\n\n if (name === 'indeterminate' && !this.selected) {\n this.checkbox.removeAttribute('indeterminate');\n this.checkbox.removeAttribute('checked');\n\n if (this.indeterminate) this.checkbox.setAttribute('indeterminate', '');\n }\n this.syncAria();\n }\n\n /\n Custom logic executed before the draw process begins.\n * Determines and sets the appropriate slot if the current item is nested.\n * @returns {void} No return value.\n /\n beforeDraw() {\n this.syncNestingState();\n\n if(this.closest('wje-tree')?.hasAttribute('slot-hover-visible'))\n this.setAttribute('slot-hover-visible', '');\n }\n\n /\n Synchronizes the nesting-related state on the host element.\n * Sets the \"slot\" to children for nested items and updates\n * the nesting depth used to compute visual indentation.\n * @returns {void}\n /\n syncNestingState() {\n const depth = this.getNestingDepth();\n this.style.setProperty('--wje-tree-item-depth', String(depth));\n\n if (depth > 0) {\n this.slot = 'children';\n } else if (this.getAttribute('slot') === 'children') {\n this.removeAttribute('slot');\n }\n }\n\n /\n Creates and returns a document fragment representing the structure of a tree item component.\n * The method constructs the DOM elements including the native container, indentation, toggle button,\n * selection checkbox, label, and children container, along with their respective slots and attributes.\n * It dynamically handles the creation of expand and collapse icons, as well as appending slots for\n * child components.\n * @returns {DocumentFragment} A fragment containing the complete tree item structure to be rendered.\n /\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-tree-item', this.selection === 'multiple' ? 'multiple' : 'single');\n\n let slotStart = document.createElement('slot');\n slotStart.setAttribute('name', 'start');\n\n let item = document.createElement('div');\n item.setAttribute('part', 'item');\n item.classList.add('item');\n\n let indent = document.createElement('div');\n indent.classList.add('indent');\n\n let button = document.createElement('div');\n button.classList.add('toggle');\n\n let checkbox = document.createElement('wje-checkbox');\n if (this.selected) checkbox.setAttribute('checked', '');\n\n let label = document.createElement('div');\n label.setAttribute('part', 'label');\n label.classList.add('content');\n\n let slotElement = document.createElement('slot');\n\n let children = document.createElement('div');\n children.classList.add('children');\n\n let slot = document.createElement('slot');\n slot.setAttribute('name', 'children');\n children.appendChild(slot);\n\n let slotEnd = document.createElement('slot');\n slotEnd.setAttribute('name', 'end');\n\n item.appendChild(slotStart);\n item.appendChild(indent);\n\n if (this.querySelectorAll(':scope > wje-tree-item').length > 0) {\n if (this.querySelectorAll('[slot=\"expand\"]').length < 1) {\n let expandIcon = document.createElement('wje-icon');\n expandIcon.setAttribute('name', 'chevron-right');\n expandIcon.setAttribute('slot', 'expand');\n\n this.appendChild(expandIcon);\n }\n\n if (this.querySelectorAll('[slot=\"collapse\"]').length < 1) {\n let collapseIcon = document.createElement('wje-icon');\n collapseIcon.setAttribute('name', 'chevron-down');\n collapseIcon.setAttribute('slot', 'collapse');\n\n this.appendChild(collapseIcon);\n }\n\n let expandSlot = document.createElement('slot');\n expandSlot.setAttribute('name', 'expand');\n\n let collapseSlot = document.createElement('slot');\n collapseSlot.setAttribute('name', 'collapse');\n\n button.appendChild(expandSlot);\n button.appendChild(collapseSlot);\n }\n\n item.appendChild(button);\n\n if (this.selection === 'multiple') item.appendChild(checkbox);\n\n label.appendChild(slotElement);\n item.appendChild(label);\n item.appendChild(slotEnd);\n\n native.appendChild(item);\n native.appendChild(children);\n\n fragment.appendChild(native);\n\n this.checkbox = checkbox;\n this.native = native;\n this.button = button;\n this.childrenElement = children;\n this.childrenSlot = slot;\n\n return fragment;\n }\n\n /\n Executes operations to be performed after the draw action is completed.\n * If the state indicates it is expanded, toggles its children.\n * Additionally, sets up an event listener on the button element to handle toggling children upon click.\n * @returns {void} Does not return a value.\n /\n afterDraw() {\n if (this.expanded) this.toggleChildren();\n\n this.button.addEventListener('click', this.toggleChildren.bind(this));\n this.setAttribute('tabindex', '0');\n this.syncAria();\n }\n\n /\n Determines if the current item is a nested item within a tree structure.\n * Checks if the item's parent element exists and is also a tree item.\n * @returns {boolean} Returns true if the current item is a nested tree item; otherwise, false.\n /\n isNestedItem() {\n const parent = this.parentElement;\n return !!parent && this.isTreeItem(parent);\n }\n\n /\n Calculates nesting depth based on ancestor tree items.\n * Root items have depth 0, direct children depth 1, etc.\n * @returns {number}\n /\n getNestingDepth() {\n let depth = 0;\n let current = this.parentElement;\n\n while (current) {\n if (this.isTreeItem(current)) depth += 1;\n current = current.parentElement;\n }\n\n return depth;\n }\n\n /\n Checks whether the given node is a tree item.\n * @param {object} node The node to check.\n * @returns {boolean} Returns true if the node is an Element and has a class name of 'TreeItem', otherwise false.\n /\n isTreeItem(node) {\n return node instanceof Element && node.className === 'TreeItem';\n }\n\n /\n Toggles the visibility state of the children element and updates the class of the parent element.\n * The method toggles the 'open' class on the children elements and the 'expanded' class on the parent element,\n * effectively showing or hiding the children and indicating the expanded state.\n * @returns {void} Does not return a value.\n /\n toggleChildren() {\n this.childrenElement.classList.toggle('open');\n this.native.classList.toggle('expanded');\n this.syncAria();\n }\n\n /\n Syncs ARIA attributes on the host element.\n /\n syncAria() {\n const hasChildren = this.querySelectorAll(':scope > wje-tree-item').length > 0;\n const expanded = hasChildren ? this.native?.classList?.contains('expanded') : undefined;\n if (this.selection === 'multiple') {\n const checked = this.indeterminate ? 'mixed' : (this.selected ? 'true' : 'false');\n this.setAriaState({\n role: 'treeitem',\n checked,\n expanded,\n });\n } else {\n this.setAriaState({\n role: 'treeitem',\n selected: this.selected,\n expanded,\n });\n }\n }\n\n /\n Retrieves the child items from the `childrenSlot` that match specific criteria.\n * @param {object} [options] Configuration options.\n * @param {boolean} [options.includeDisabled] Determines whether disabled items should be included in the result. Defaults to true.\n * @returns {Array} An array of child items that are valid tree items and meet the criteria specified in the options.\n /\n getChildrenItems(options = {}) {\n const includeDisabled = options.includeDisabled ?? true; // Ak nie je zadané, predvolená hodnota je true\n\n const assigned = this.childrenSlot\n ? this.childrenSlot.assignedElements({ flatten: true })\n : [];\n const direct = assigned.length\n ? assigned\n : Array.from(this.querySelectorAll(':scope > wje-tree-item'));\n\n return direct.filter(\n (item) => this.isTreeItem(item) && (includeDisabled \|\| !item.disabled)\n );\n }\n\n /\n Retrieves all descendant children of the current object in a flattened array structure.\n * @param {object} [options] An optional object specifying filters or configurations for retrieving children.\n * @returns {Array} An array containing all children and their descendants in a flat structure.\n */\n getAllChildrenFlat(options = {}) {\n const directChildren = this.getChildrenItems(options);\n return directChildren.flatMap((child) => [child, ...child.getAllChildrenFlat(options)]);\n }\n}\n","import TreeItem from './tree-item.element.js';\n\nexport default TreeItem;\n\nTreeItem.define('wje-tree-item', TreeItem);\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

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