wj-elements 0.4.8 → 0.5.0

package/dist/light.css

@@ -671,6 +671,8 @@
     --wje-toolbar-min-height: 70px;
     --wje-toolbar-padding-inline: 1.5rem;
     --wje-toolbar-padding-block: 1rem;
+    --wje-toolbar-margin-inline: 0;
+    --wje-toolbar-margin-block: 0;
     --wje-toolbar-border-color: var(--wje-border-color);
     --wje-toolbar-top: 0;
     --wje-toolbar-shadow: var(--wje-shadow-medium);

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

@@ -29,6 +29,27 @@ export default class Breadcrumb extends WJElement {
     static get observedAttributes(): Array<string>;
     _showSeparator: boolean;
     _showCollapsedIndicator: boolean;
+    handleNativeClick: (e: any) => void;
+    /**
+     * Sets the breadcrumb link URL.
+     * @param {string|null} value Link URL.
+     */
+    set href(value: string | null);
+    /**
+     * Gets the breadcrumb link URL.
+     * @returns {string|null}
+     */
+    get href(): string | null;
+    /**
+     * Sets the disabled state.
+     * @param {boolean} value Disabled state.
+     */
+    set disabled(value: boolean);
+    /**
+     * Gets the disabled state.
+     * @returns {boolean}
+     */
+    get disabled(): boolean;
     /**
      * Set show separator flag.
      * @param {boolean} value The value to set
@@ -65,6 +86,19 @@ export default class Breadcrumb extends WJElement {
      */
     draw(): object;
     native: HTMLAnchorElement;
+    /**
+     * Synchronizes host attributes to the internal anchor.
+     */
+    syncNativeAttributes(): void;
+    /**
+     * Sets up native anchor listeners after render.
+     */
+    afterDraw(): void;
+    /**
+     * Prevents disabled breadcrumbs from navigating or bubbling click handlers.
+     * @param {MouseEvent} e Click event.
+     */
+    handleDisabledNativeClick(e: MouseEvent): void;
     /**
      * Renders the collapsed indicator based on the current collapsed variant.
      * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.

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

@@ -6,9 +6,11 @@ import { default as WJElement } from '../wje-element/element.js';
  * @augments WJElement
  * @slot - The container for breadcrumb elements.
  * @csspart container - The component's container wrapper.
+ * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.
  * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.
  * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.
  * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.
+ * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.
  * @tag wje-breadcrumbs
  * @example
  * <!-- Example usage -->
@@ -49,6 +51,20 @@ export default class Breadcrumbs extends WJElement {
      */
     last: boolean;
     _isCollapsedByBreakpoint: boolean;
+    _items: any[];
+    _itemRecords: any[];
+    _hasItemsValue: boolean;
+    handleManagedItemClick: (e: any) => void;
+    /**
+     * Sets data-driven breadcrumb items.
+     * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.
+     */
+    set items(value: any[] | string | null | undefined);
+    /**
+     * Gets data-driven breadcrumb items.
+     * @returns {Array}
+     */
+    get items(): any[];
     /**
      * Set variant attribute for the Breadcrumbs element.
      * @param value
@@ -119,6 +135,89 @@ export default class Breadcrumbs extends WJElement {
     afterDraw(): void;
     onSlotChange: () => void;
     handleResize: () => void;
+    /**
+     * Upgrades properties set before the custom element definition was loaded.
+     * @param {string} property Property name.
+     */
+    upgradeProperty(property: string): void;
+    /**
+     * Normalizes incoming item data for keyed DOM diffing.
+     * @param {Array|string|null|undefined} value Breadcrumb item data.
+     * @returns {Array<object>}
+     */
+    normalizeItems(value: any[] | string | null | undefined): Array<object>;
+    /**
+     * Normalizes a single item while preserving the original object for events.
+     * @param {object|string|number} item Source value for a breadcrumb entry.
+     * @param {number} index Position of the value in the current items array.
+     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.
+     * @returns {object}
+     */
+    normalizeItem(item: object | string | number, index: number, usedKeys: Set<string>): object;
+    /**
+     * Resolves a stable key for an item.
+     * @param {object} item Normalized source object used to resolve the key.
+     * @param {number} index Fallback position used when the item has no id.
+     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.
+     * @returns {string}
+     */
+    getItemKey(item: object, index: number, usedKeys: Set<string>): string;
+    /**
+     * Incrementally synchronizes data-driven items into light DOM breadcrumbs.
+     * @param {Array<object>} records Normalized records for the next breadcrumb trail.
+     */
+    syncItems(records: Array<object>): void;
+    /**
+     * Creates a managed breadcrumb element.
+     * @param {object} record Normalized data used to create the breadcrumb.
+     * @param {number} index Position assigned to the created breadcrumb.
+     * @returns {HTMLElement}
+     */
+    createItemElement(record: object, index: number): HTMLElement;
+    /**
+     * Updates a managed breadcrumb element only where values changed.
+     * @param {HTMLElement} breadcrumb Existing managed element to update.
+     * @param {object} record Normalized data used for the next rendered state.
+     * @param {number} index Position assigned to the managed breadcrumb.
+     */
+    updateItemElement(breadcrumb: HTMLElement, record: object, index: number): void;
+    /**
+     * Synchronizes an attribute when its value changed.
+     * @param {HTMLElement} element Element receiving the synchronized attribute.
+     * @param {string} name Attribute to add, update, or remove.
+     * @param {string|null|undefined} value Next serialized value for the attribute.
+     */
+    syncItemAttribute(element: HTMLElement, name: string, value: string | null | undefined): void;
+    /**
+     * Synchronizes a boolean attribute.
+     * @param {HTMLElement} element Element receiving the boolean attribute.
+     * @param {string} name Boolean attribute to toggle.
+     * @param {boolean} isEnabled Whether the attribute should be present.
+     */
+    syncBooleanItemAttribute(element: HTMLElement, name: string, isEnabled: boolean): void;
+    /**
+     * Synchronizes slotted icon and text nodes for a managed breadcrumb.
+     * @param {HTMLElement} breadcrumb Breadcrumb element.
+     * @param {object} record Normalized item record.
+     */
+    syncItemContent(breadcrumb: HTMLElement, record: object): void;
+    /**
+     * Returns a small signature for structural changes that need item replacement.
+     * @param {object} record Normalized item record.
+     * @returns {string}
+     */
+    getItemStructureSignature(record: object): string;
+    /**
+     * Dispatches the data-driven item click event.
+     * @param {MouseEvent} e Original click event.
+     */
+    dispatchManagedItemClick(e: MouseEvent): void;
+    /**
+     * Finds the managed breadcrumb that originated an event.
+     * @param {Event} e Event whose composed path should be inspected.
+     * @returns {HTMLElement|null}
+     */
+    getManagedBreadcrumbFromEvent(e: Event): HTMLElement | null;
     /**
      * Reacts to viewport resize only when the breakpoint mode actually changes.
      * @returns {void}
@@ -156,6 +255,11 @@ export default class Breadcrumbs extends WJElement {
      * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.
      */
     getBreadcrumbs(): Array<Element>;
+    /**
+     * Retrieves breadcrumbs managed by the items property.
+     * @returns {Array<Element>}
+     */
+    getManagedBreadcrumbs(): Array<Element>;
     /**
      * Retrieves all breadcrumb elements that have the 'collapsed' attribute.
      * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.

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

@@ -10,6 +10,7 @@ import { default as WJElement } from '../wje-element/element.js';
  * @property {string} alt - The alternative text for the image.
  * @property {string} fallout - The action to perform when an error occurs while loading the image. The value can be a function or a predefined action like 'delete'.
  * @property {string} loader - The URL of the image loader to display while the image is loading.
+ * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.
  * @tag wje-img
  */
 export default class Img extends WJElement {
@@ -71,6 +72,16 @@ export default class Img extends WJElement {
      * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.
      */
     get loader(): string | null;
+    /**
+     * Enables or disables lazy loading for the image.
+     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.
+     */
+    set noLazy(value: boolean);
+    /**
+     * Checks whether lazy loading is disabled.
+     * @returns {boolean} True when the `no-lazy` attribute is present.
+     */
+    get noLazy(): boolean;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     /**
      * Creates and assembles a lazy-loaded image element within a document fragment.

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

@@ -68,6 +68,11 @@ export class Select extends FormAssociatedElement {
      * @description A reference to the input element, initially null.
      */
     input: HTMLElement | null;
+    /**
+     * @type {HTMLElement|null}
+     * @description A reference to the visible selected text element, initially null.
+     */
+    displayText: HTMLElement | null;
     /**
      * @type {HTMLElement|null}
      * @description A reference to the chips element, initially null.

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

@@ -14,6 +14,8 @@ import { default as WJElement } from '../wje-element/element.js';
  * @cssproperty [--wje-toolbar-padding-top=1rem] - Specifies the padding at the top of the toolbar. Accepts any valid CSS length unit.
  * @cssproperty [--wje-toolbar-padding-bottom=1rem] - Specifies the padding at the bottom of the toolbar. Helps create spacing between the content and the bottom edge.
  * @cssproperty [--wje-toolbar-padding-inline=1.5rem] - Defines the horizontal padding (left and right) of the toolbar. Creates consistent spacing on both sides.
+ * @cssproperty [--wje-toolbar-margin-block=0] - Defines the vertical margin outside the toolbar. Accepts any valid CSS length value.
+ * @cssproperty [--wje-toolbar-margin-inline=0] - Defines the horizontal margin outside the toolbar. Accepts any valid CSS length value.
  * @cssproperty [--wje-toolbar-border-color=var(--wje-border-color)] - Sets the color of the toolbar's border. Accepts any valid CSS color value.
  * @cssproperty [--wje-toolbar-top=0] - Specifies the vertical position of the toolbar relative to its container. Useful for fixed or sticky toolbars.
  * @tag wje-toolbar

package/dist/wje-breadcrumb.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import WJElement from "./wje-element.js";
 import { WjElementUtils } from "./element-utils.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n\n    .native-breadcrumb {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        background: inherit;\n        padding: 0.25rem 0.75rem;\n        color: var(--wje-breadcrumb-a);\n        text-decoration: none;\n        font-size: var(--wje-breadcrumb-font-size);\n        &.hidden {\n            display: none;\n        }\n        &.active {\n            font-weight: var(--wje-breadcrumb-active-font-weight);\n            font-size: var(--wje-breadcrumb-active-font-size);\n        }\n        &:hover {\n            color: var(--wje-breadcrumb-a-hover);\n        }\n    }\n\n    button {\n        margin-inline: 0.75rem;\n        border: 0 solid transparent;\n        border-radius: 3px;\n        background-color: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n    }\n\n    .separator {\n        display: inline-flex;\n        align-items: center;\n    }\n}\n\n:host(.collapsed) {\n    display: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
+const styles = "/*\n[ WJ Breadcrumb ]\n*/\n\n:host {\n    display: flex;\n    flex: 0 0 auto;\n    align-items: center;\n    line-height: 1.5;\n\n    .native-breadcrumb {\n        display: flex;\n        align-items: center;\n        width: 100%;\n        outline: none;\n        background: inherit;\n        padding: 0.25rem 0.75rem;\n        color: var(--wje-breadcrumb-a);\n        text-decoration: none;\n        font-size: var(--wje-breadcrumb-font-size);\n        &.hidden {\n            display: none;\n        }\n        &.active {\n            font-weight: var(--wje-breadcrumb-active-font-weight);\n            font-size: var(--wje-breadcrumb-active-font-size);\n        }\n        &.disabled {\n            cursor: default;\n            opacity: 0.6;\n        }\n        &:hover {\n            color: var(--wje-breadcrumb-a-hover);\n        }\n    }\n\n    button {\n        margin-inline: 0.75rem;\n        border: 0 solid transparent;\n        border-radius: 3px;\n        background-color: transparent;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n    }\n\n    .separator {\n        display: inline-flex;\n        align-items: center;\n    }\n}\n\n:host(.collapsed) {\n    display: none;\n}\n\n::slotted([slot='start']) {\n    margin-inline: 0 0.5rem;\n}\n\n::slotted([slot='end']) {\n    margin-inline: 0.5rem 0;\n}\n";
 class Breadcrumb extends WJElement {
   /**
    * Breadcrumb constructor method.
@@ -18,6 +18,40 @@ class Breadcrumb extends WJElement {
     __publicField(this, "className", "Breadcrumb");
     this._showSeparator = true;
     this._showCollapsedIndicator = false;
+    this.handleNativeClick = (e) => this.handleDisabledNativeClick(e);
+  }
+  /**
+   * Sets the breadcrumb link URL.
+   * @param {string|null} value Link URL.
+   */
+  set href(value) {
+    if (value === null || value === void 0) this.removeAttribute("href");
+    else this.setAttribute("href", value);
+  }
+  /**
+   * Gets the breadcrumb link URL.
+   * @returns {string|null}
+   */
+  get href() {
+    return this.getAttribute("href");
+  }
+  /**
+   * Sets the disabled state.
+   * @param {boolean} value Disabled state.
+   */
+  set disabled(value) {
+    if (value === true || value === "" || value === "true" || value === 1 || value === "1") {
+      this.setAttribute("disabled", "");
+    } else {
+      this.removeAttribute("disabled");
+    }
+  }
+  /**
+   * Gets the disabled state.
+   * @returns {boolean}
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
   }
   /**
    * Get show separator flag.
@@ -63,7 +97,7 @@ class Breadcrumb extends WJElement {
    * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.
    */
   static get observedAttributes() {
-    return ["show-collapsed-indicator", "collapsed", "last"];
+    return ["show-collapsed-indicator", "collapsed", "last", "href", "target", "rel", "download", "disabled"];
   }
   /**
    * Handles attribute changes for the custom element and updates its behavior or appearance accordingly.
@@ -72,25 +106,27 @@ class Breadcrumb extends WJElement {
    * @param {string|null} newValue The new value of the attribute after it was changed. Null if the attribute was removed.
    */
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a;
-    (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+    var _a, _b;
+    if (oldValue === newValue) return;
     if (name === "collapsed") {
-      const isCollapsed = WjElementUtils.stringToBoolean(newValue);
+      const isCollapsed = newValue !== null && WjElementUtils.stringToBoolean(newValue);
       this.classList.toggle("collapsed", isCollapsed && !this.hasAttribute("show-collapsed-indicator"));
     } else if (name === "show-collapsed-indicator") {
-      const isOn = WjElementUtils.stringToBoolean(newValue);
+      (_a = super.attributeChangedCallback) == null ? void 0 : _a.call(this, name, oldValue, newValue);
+      const isOn = newValue !== null && WjElementUtils.stringToBoolean(newValue);
       this._showCollapsedIndicator = isOn;
       this.refresh();
     } else if (name === "last") {
-      const isLast = WjElementUtils.stringToBoolean(newValue);
+      (_b = super.attributeChangedCallback) == null ? void 0 : _b.call(this, name, oldValue, newValue);
+      const isLast = newValue !== null && WjElementUtils.stringToBoolean(newValue);
       this.active = isLast;
       this.showSeparator = !isLast;
       this.syncAria();
-      if (this.native) {
-        if (isLast) this.native.setAttribute("aria-current", "page");
-        else this.native.removeAttribute("aria-current");
-      }
+      this.syncNativeAttributes();
       this.refresh();
+    } else {
+      this.syncAria();
+      this.syncNativeAttributes();
     }
   }
   /**
@@ -104,6 +140,8 @@ class Breadcrumb extends WJElement {
     this.setAriaState({ role: "link" });
     if (this.active) this.setAriaState({ current: "page" });
     else this.removeAttribute("aria-current");
+    if (this.disabled) this.setAriaState({ disabled: true });
+    else this.removeAttribute("aria-disabled");
   }
   /**
    * Draw method for the Breadcrumb element.
@@ -114,8 +152,8 @@ class Breadcrumb extends WJElement {
     let native = document.createElement("a");
     native.classList.add("native-breadcrumb");
     native.setAttribute("part", "native");
-    if (this.active) native.setAttribute("aria-current", "page");
-    if (this.active) native.classList.add("active");
+    this.native = native;
+    this.syncNativeAttributes();
     let slot = document.createElement("slot");
     let start = document.createElement("slot");
     start.setAttribute("name", "start");
@@ -140,9 +178,66 @@ class Breadcrumb extends WJElement {
       }
       fragment.append(separator);
     }
-    this.native = native;
     return fragment;
   }
+  /**
+   * Synchronizes host attributes to the internal anchor.
+   */
+  syncNativeAttributes() {
+    var _a;
+    const native = this.native || ((_a = this.context) == null ? void 0 : _a.querySelector("a.native-breadcrumb"));
+    if (!native) return;
+    const isDisabled = this.disabled;
+    const href = this.href;
+    if (href !== null && href !== void 0 && !isDisabled) {
+      native.setAttribute("href", href);
+    } else {
+      native.removeAttribute("href");
+    }
+    ["target", "rel", "download"].forEach((attr) => {
+      if (this.hasAttribute(attr) && !isDisabled) {
+        native.setAttribute(attr, this.getAttribute(attr));
+      } else {
+        native.removeAttribute(attr);
+      }
+    });
+    native.classList.toggle("active", Boolean(this.active));
+    native.classList.toggle("disabled", isDisabled);
+    if (this.active) native.setAttribute("aria-current", "page");
+    else native.removeAttribute("aria-current");
+    if (isDisabled) {
+      native.setAttribute("aria-disabled", "true");
+      native.setAttribute("tabindex", "-1");
+    } else {
+      native.removeAttribute("aria-disabled");
+      native.removeAttribute("tabindex");
+    }
+  }
+  /**
+   * Sets up native anchor listeners after render.
+   */
+  afterDraw() {
+    var _a;
+    (_a = this.native) == null ? void 0 : _a.addEventListener("click", this.handleNativeClick);
+  }
+  /**
+   * Removes native anchor listeners before redraw/disconnect.
+   */
+  beforeDisconnect() {
+    var _a;
+    (_a = this.native) == null ? void 0 : _a.removeEventListener("click", this.handleNativeClick);
+  }
+  /**
+   * Prevents disabled breadcrumbs from navigating or bubbling click handlers.
+   * @param {MouseEvent} e Click event.
+   */
+  handleDisabledNativeClick(e) {
+    var _a;
+    if (!this.disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+  }
   /**
    * Renders the collapsed indicator based on the current collapsed variant.
    * If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method.

package/dist/wje-breadcrumb.js.map

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