wj-elements 0.4.8 → 0.5.0

package/dist/wje-breadcrumbs.js

@@ -3,6 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
 const styles = "/*\n[ WJ Breadcrumbs ]\n*/\n\n:host {\n    --wje-breadcrumbs-breakpoint-sm: 576px;\n    --wje-breadcrumbs-breakpoint-md: 768px;\n    --wje-breadcrumbs-breakpoint-lg: 992px;\n    --wje-breadcrumbs-breakpoint-xl: 1200px;\n    --wje-breadcrumbs-breakpoint-2xl: 1450px;\n    --wje-breadcrumbs-breakpoint-xxl: 1450px;\n\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    min-width: 0;\n    overflow: hidden;\n}\n";
+const MANAGED_ITEM_ATTRIBUTE = "data-wje-breadcrumbs-item";
 const _Breadcrumbs = class _Breadcrumbs extends WJElement {
   /**
    * Breadcrumbs constructor method.
@@ -17,6 +18,28 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
     __publicField(this, "className", "Breadcrumbs");
     this.last = false;
     this._isCollapsedByBreakpoint = null;
+    this._items = [];
+    this._itemRecords = [];
+    this._hasItemsValue = false;
+    this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);
+  }
+  /**
+   * Sets data-driven breadcrumb items.
+   * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.
+   */
+  set items(value) {
+    const records = this.normalizeItems(value);
+    this._hasItemsValue = true;
+    this._items = records.map((record) => record.item);
+    this._itemRecords = records;
+    this.syncItems(records);
+  }
+  /**
+   * Gets data-driven breadcrumb items.
+   * @returns {Array}
+   */
+  get items() {
+    return this._items;
   }
   /**
    * Set variant attribute for the Breadcrumbs element.
@@ -122,6 +145,10 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
     this.setAriaState({ role: "navigation" });
+    this.upgradeProperty("items");
+    if (!this._hasItemsValue && this.hasAttribute("items")) {
+      this.items = this.getAttribute("items");
+    }
   }
   /**
    * Draw method for the Breadcrumbs element.
@@ -144,10 +171,14 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
     var _a;
     this.onSlotChange = () => this.updateCollapse();
     (_a = this.defaultSlot) == null ? void 0 : _a.addEventListener("slotchange", this.onSlotChange);
+    this.addEventListener("click", this.handleManagedItemClick);
     this.handleResize = () => this.handleBreakpointResize();
     if (this.getBreakpointWidth()) {
       window.addEventListener("resize", this.handleResize);
     }
+    if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {
+      this.syncItems(this._itemRecords);
+    }
     this.updateCollapse();
   }
   /**
@@ -156,9 +187,262 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
   afterDisconnect() {
     var _a;
     (_a = this.defaultSlot) == null ? void 0 : _a.removeEventListener("slotchange", this.onSlotChange);
+    this.removeEventListener("click", this.handleManagedItemClick);
     window.removeEventListener("resize", this.handleResize);
     this._isCollapsedByBreakpoint = null;
   }
+  /**
+   * Upgrades properties set before the custom element definition was loaded.
+   * @param {string} property Property name.
+   */
+  upgradeProperty(property) {
+    if (!Object.prototype.hasOwnProperty.call(this, property)) return;
+    const value = this[property];
+    delete this[property];
+    this[property] = value;
+  }
+  /**
+   * Normalizes incoming item data for keyed DOM diffing.
+   * @param {Array|string|null|undefined} value Breadcrumb item data.
+   * @returns {Array<object>}
+   */
+  normalizeItems(value) {
+    let items = value;
+    if (typeof items === "string") {
+      try {
+        items = JSON.parse(items);
+      } catch (e) {
+        console.warn("Invalid JSON passed to wje-breadcrumbs.items", e);
+        items = [];
+      }
+    }
+    if (items === null || items === void 0) return [];
+    if (!Array.isArray(items)) {
+      console.warn("wje-breadcrumbs.items expects an array.");
+      return [];
+    }
+    const usedKeys = /* @__PURE__ */ new Set();
+    return items.map((item, index) => this.normalizeItem(item, index, usedKeys));
+  }
+  /**
+   * 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, index, usedKeys) {
+    const isObject = item !== null && typeof item === "object";
+    const source = isObject ? item : {
+      id: index,
+      label: item === null || item === void 0 ? "" : String(item)
+    };
+    return {
+      item: source,
+      key: this.getItemKey(source, index, usedKeys),
+      index,
+      label: source.label === null || source.label === void 0 ? "" : String(source.label),
+      href: source.href === null || source.href === void 0 ? null : String(source.href),
+      icon: source.icon === null || source.icon === void 0 || source.icon === "" ? null : String(source.icon),
+      disabled: source.disabled === true || source.disabled === "" || source.disabled === "true" || source.disabled === 1 || source.disabled === "1"
+    };
+  }
+  /**
+   * 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, index, usedKeys) {
+    const baseKey = item.id === null || item.id === void 0 ? String(index) : String(item.id);
+    let key = baseKey;
+    let suffix = 1;
+    while (usedKeys.has(key)) {
+      key = `${baseKey}:${suffix}`;
+      suffix += 1;
+    }
+    usedKeys.add(key);
+    return key;
+  }
+  /**
+   * Incrementally synchronizes data-driven items into light DOM breadcrumbs.
+   * @param {Array<object>} records Normalized records for the next breadcrumb trail.
+   */
+  syncItems(records) {
+    const managed = this.getManagedBreadcrumbs();
+    const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));
+    const nextKeys = new Set(records.map((record) => record.key));
+    managed.forEach((breadcrumb) => {
+      const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);
+      if (!nextKeys.has(key)) {
+        breadcrumb.remove();
+      }
+    });
+    let referenceNode = this.firstChild;
+    records.forEach((record, index) => {
+      let breadcrumb = managedByKey.get(record.key);
+      const signature = this.getItemStructureSignature(record);
+      if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {
+        const previousBreadcrumb = breadcrumb;
+        const replacement = this.createItemElement(record, index);
+        breadcrumb.replaceWith(replacement);
+        breadcrumb = replacement;
+        if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;
+      } else if (!breadcrumb) {
+        breadcrumb = this.createItemElement(record, index);
+      } else {
+        this.updateItemElement(breadcrumb, record, index);
+      }
+      if (breadcrumb !== referenceNode) {
+        this.insertBefore(breadcrumb, referenceNode);
+      }
+      referenceNode = breadcrumb.nextSibling;
+    });
+    this.updateCollapse();
+  }
+  /**
+   * 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, index) {
+    const breadcrumb = document.createElement("wje-breadcrumb");
+    this.updateItemElement(breadcrumb, record, index);
+    return breadcrumb;
+  }
+  /**
+   * 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, record, index) {
+    breadcrumb.__wjeBreadcrumbManaged = true;
+    breadcrumb.__wjeBreadcrumbItem = record.item;
+    breadcrumb.__wjeBreadcrumbIndex = index;
+    breadcrumb.__wjeBreadcrumbKey = record.key;
+    breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);
+    if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {
+      breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);
+    }
+    this.syncItemAttribute(breadcrumb, "href", record.href);
+    this.syncItemAttribute(breadcrumb, "aria-label", record.label || null);
+    this.syncBooleanItemAttribute(breadcrumb, "disabled", record.disabled);
+    this.syncItemContent(breadcrumb, record);
+  }
+  /**
+   * 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, name, value) {
+    if (value === null || value === void 0 || value === false) {
+      if (element.hasAttribute(name)) element.removeAttribute(name);
+      return;
+    }
+    const normalizedValue = String(value);
+    if (element.getAttribute(name) !== normalizedValue) {
+      element.setAttribute(name, normalizedValue);
+    }
+  }
+  /**
+   * 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, name, isEnabled) {
+    if (isEnabled && !element.hasAttribute(name)) {
+      element.setAttribute(name, "");
+    }
+    if (!isEnabled && element.hasAttribute(name)) {
+      element.removeAttribute(name);
+    }
+  }
+  /**
+   * Synchronizes slotted icon and text nodes for a managed breadcrumb.
+   * @param {HTMLElement} breadcrumb Breadcrumb element.
+   * @param {object} record Normalized item record.
+   */
+  syncItemContent(breadcrumb, record) {
+    let icon = breadcrumb.__wjeBreadcrumbIcon;
+    if (record.icon) {
+      if (!icon || icon.parentElement !== breadcrumb) {
+        icon = document.createElement("wje-icon");
+        icon.setAttribute("slot", "start");
+        breadcrumb.insertBefore(icon, breadcrumb.firstChild);
+        breadcrumb.__wjeBreadcrumbIcon = icon;
+      }
+      if (icon.getAttribute("name") !== record.icon) {
+        icon.setAttribute("name", record.icon);
+      }
+    } else if (icon) {
+      icon.remove();
+      breadcrumb.__wjeBreadcrumbIcon = null;
+    }
+    let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;
+    if (!labelNode || labelNode.parentNode !== breadcrumb) {
+      labelNode = document.createTextNode("");
+      breadcrumb.appendChild(labelNode);
+      breadcrumb.__wjeBreadcrumbLabelNode = labelNode;
+    }
+    if (labelNode.textContent !== record.label) {
+      labelNode.textContent = record.label;
+    }
+  }
+  /**
+   * Returns a small signature for structural changes that need item replacement.
+   * @param {object} record Normalized item record.
+   * @returns {string}
+   */
+  getItemStructureSignature(record) {
+    return `icon:${record.icon ? "1" : "0"}`;
+  }
+  /**
+   * Dispatches the data-driven item click event.
+   * @param {MouseEvent} e Original click event.
+   */
+  dispatchManagedItemClick(e) {
+    var _a;
+    const breadcrumb = this.getManagedBreadcrumbFromEvent(e);
+    if (!breadcrumb) return;
+    const item = breadcrumb.__wjeBreadcrumbItem;
+    if ((item == null ? void 0 : item.disabled) || breadcrumb.hasAttribute("disabled")) {
+      e.preventDefault();
+      e.stopPropagation();
+      (_a = e.stopImmediatePropagation) == null ? void 0 : _a.call(e);
+      return;
+    }
+    const itemClickEvent = new CustomEvent("wje-breadcrumbs:item-click", {
+      detail: {
+        item,
+        index: breadcrumb.__wjeBreadcrumbIndex,
+        originalEvent: e
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    const shouldContinue = this.dispatchEvent(itemClickEvent);
+    if (!shouldContinue) {
+      e.preventDefault();
+    }
+  }
+  /**
+   * Finds the managed breadcrumb that originated an event.
+   * @param {Event} e Event whose composed path should be inspected.
+   * @returns {HTMLElement|null}
+   */
+  getManagedBreadcrumbFromEvent(e) {
+    const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+    return path.find((node) => {
+      var _a;
+      return (node == null ? void 0 : node.nodeType) === Node.ELEMENT_NODE && ((_a = node.tagName) == null ? void 0 : _a.toLowerCase()) === "wje-breadcrumb" && node.parentElement === this && node.hasAttribute(MANAGED_ITEM_ATTRIBUTE);
+    }) || null;
+  }
   /**
    * Reacts to viewport resize only when the breakpoint mode actually changes.
    * @returns {void}
@@ -256,6 +540,13 @@ const _Breadcrumbs = class _Breadcrumbs extends WJElement {
   getBreadcrumbs() {
     return Array.from(this.querySelectorAll("wje-breadcrumb")) || [];
   }
+  /**
+   * Retrieves breadcrumbs managed by the items property.
+   * @returns {Array<Element>}
+   */
+  getManagedBreadcrumbs() {
+    return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];
+  }
   /**
    * 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/wje-breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @returns {string}\n     */\n    get collapsedVariant() {\n        return this.getAttribute('collapsed-variant') || this.variant;\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        if (this.hasAttribute('items-after-collapse')) {\n            return +this.getAttribute('items-after-collapse') || 1;\n        }\n\n        const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n        return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['breakpoint', 'max-items', 'items-before-collapse', 'items-after-collapse', 'collapsed-variant', 'variant'];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'navigation' });\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n        this.defaultSlot = element;\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.updateCollapse();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldApplyBreakpointCollapse();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Recalculates breadcrumb collapse state.\n     * @returns {void}\n     */\n    updateCollapse() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldCollapse =\n            this._isCollapsedByBreakpoint &&\n            this.maxItems > 0 &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n        const lastIndex = breadcrumbs.length - 1;\n        const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n        const collapseStart = this.itemsBeforeCollapse;\n        const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n\n            const isCollapsed =\n                shouldCollapse &&\n                index >= collapseStart &&\n                index < collapseEnd;\n\n            this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n            if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n    }\n\n    /**\n     * Clears attributes/classes managed by the collapse algorithm.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n        breadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.removeAttribute('collapsed');\n            breadcrumb.removeAttribute('show-collapsed-indicator');\n            breadcrumb.removeAttribute('last');\n            breadcrumb.classList.remove('collapsed');\n        });\n    }\n\n    /**\n     * Applies a managed boolean attribute only when its value truly changes.\n     * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n     * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncManagedAttribute(element, name, isEnabled) {\n        if (!element) return;\n\n        const hasAttribute = element.hasAttribute(name);\n\n        if (isEnabled && !hasAttribute) {\n            element.setAttribute(name, true);\n        }\n\n        if (!isEnabled && hasAttribute) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Returns whether collapse rules should currently be applied.\n     * @returns {boolean}\n     */\n    shouldApplyBreakpointCollapse() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return true;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-breadcrumbs-breakpoint-${token}`).trim();\n        const namedBreakpoint = Breadcrumbs.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-breadcrumbs.js","sources":["../packages/wje-breadcrumbs/breadcrumbs.element.js","../packages/wje-breadcrumbs/breadcrumbs.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst MANAGED_ITEM_ATTRIBUTE = 'data-wje-breadcrumbs-item';\n\n/**\n * @summary This class represents a Breadcrumbs container, extending the WJElement class. It acts as a wrapper for individual breadcrumb elements and manages their behavior, such as collapsing and marking the last breadcrumb.\n * @documentation https://elements.webjet.sk/components/breadcrumbs\n * @status stable\n * @augments WJElement\n * @slot - The container for breadcrumb elements.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, disabled?: boolean, data?: any}>} items - Data-driven breadcrumb items.\n * @attribute {number} max-items - The maximum number of visible breadcrumbs before collapsing.\n * @attribute {number} items-before-collapse - The number of breadcrumbs to show before the collapsed indicator.\n * @attribute {number} items-after-collapse - The number of breadcrumbs to show after the collapsed indicator.\n * // @fires wje-breadcrumbs:item-click - Dispatched when a data-driven breadcrumb item is clicked.\n * @tag wje-breadcrumbs\n * @example\n * <!-- Example usage -->\n * <wje-breadcrumbs max-items=\"5\" items-before-collapse=\"2\" items-after-collapse=\"2\">\n *   <wje-breadcrumb>Home</wje-breadcrumb>\n *   <wje-breadcrumb>About</wje-breadcrumb>\n *   <wje-breadcrumb>Services</wje-breadcrumb>\n *   <wje-breadcrumb>Portfolio</wje-breadcrumb>\n *   <wje-breadcrumb>Contact</wje-breadcrumb>\n * </wje-breadcrumbs>\n *\n * <!-- Output: Only the first two and last two breadcrumbs will be visible, with a collapsed indicator in the middle -->\n */\n\nexport default class Breadcrumbs extends WJElement {\n    static BREAKPOINTS = {\n        sm: 576,\n        md: 768,\n        lg: 992,\n        xl: 1200,\n        '2xl': 1450,\n        xxl: 1450,\n    };\n\n    /**\n     * Breadcrumbs constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n\n        /**\n         * Last breadcrumb flag\n         * @type {boolean}\n         */\n        this.last = false;\n        this._isCollapsedByBreakpoint = null;\n        this._items = [];\n        this._itemRecords = [];\n        this._hasItemsValue = false;\n        this.handleManagedItemClick = (e) => this.dispatchManagedItemClick(e);\n    }\n\n    /**\n     * Sets data-driven breadcrumb items.\n     * @param {Array|string|null|undefined} value Breadcrumb items or a JSON string.\n     */\n    set items(value) {\n        const records = this.normalizeItems(value);\n\n        this._hasItemsValue = true;\n        this._items = records.map((record) => record.item);\n        this._itemRecords = records;\n\n        this.syncItems(records);\n    }\n\n    /**\n     * Gets data-driven breadcrumb items.\n     * @returns {Array}\n     */\n    get items() {\n        return this._items;\n    }\n\n    /**\n     * Set variant attribute for the Breadcrumbs element.\n     * @param value\n     */\n    set variant(value) {\n        this.setAttribute('variant', value);\n    }\n\n    /**\n     * Get variant attribute for the Breadcrumbs element.\n     * @returns {string}\n     */\n    get variant() {\n        return this.getAttribute('variant') || 'button';\n    }\n\n    /**\n     * Get the collapsed indicator variant.\n     * @returns {string}\n     */\n    get collapsedVariant() {\n        return this.getAttribute('collapsed-variant') || this.variant;\n    }\n\n    /**\n     * Sets the collapse breakpoint token or value.\n     * @param {string} value Breakpoint token or CSS size.\n     */\n    set breakpoint(value) {\n        if (value) this.setAttribute('breakpoint', value);\n        else this.removeAttribute('breakpoint');\n    }\n\n    /**\n     * Gets the collapse breakpoint token or value.\n     * @returns {string}\n     */\n    get breakpoint() {\n        return this.getAttribute('breakpoint') || '';\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param {string} value\n     */\n    set maxItems(value) {\n        this.setAttribute('max-items', value || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get maxItems() {\n        return +this.getAttribute('max-items' || 0);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @param value\n     */\n    set itemsBeforeCollapse(value) {\n        this.setAttribute('items-before-collapse', value || 1);\n    }\n\n    /**\n     * Get items before collapse attribute.\n     * @returns {number}\n     */\n    get itemsBeforeCollapse() {\n        return +this.getAttribute('items-before-collapse') || 1;\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @param value\n     */\n    set itemsAfterCollapse(value) {\n        this.setAttribute('items-after-collapse', value || 1);\n    }\n\n    /**\n     * Get items after collapse attribute.\n     * @returns {number}\n     */\n    get itemsAfterCollapse() {\n        if (this.hasAttribute('items-after-collapse')) {\n            return +this.getAttribute('items-after-collapse') || 1;\n        }\n\n        const derivedItemsAfterCollapse = this.maxItems - this.itemsBeforeCollapse - 1;\n\n        return derivedItemsAfterCollapse > 0 ? derivedItemsAfterCollapse : 1;\n    }\n\n    /**\n     * Class name for the Breadcrumbs element.\n     * @type {string}\n     */\n    className = 'Breadcrumbs';\n\n    /**\n     * Get CSS stylesheet for the Breadcrumbs element.\n     * @static\n     * @returns {object} styles - The CSS styles\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the Breadcrumb element.\n     * @static\n     * @returns {Array<string>} - The observed attributes array for the Breadcrumb element.\n     */\n    static get observedAttributes() {\n        return ['breakpoint', 'max-items', 'items-before-collapse', 'items-after-collapse', 'collapsed-variant', 'variant'];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'navigation' });\n        this.upgradeProperty('items');\n\n        if (!this._hasItemsValue && this.hasAttribute('items')) {\n            this.items = this.getAttribute('items');\n        }\n    }\n\n    /**\n     * Draw method for the Breadcrumbs element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('slot');\n\n        fragment.appendChild(element);\n        this.defaultSlot = element;\n\n        return fragment;\n    }\n\n    /**\n     * Updates the breadcrumb elements after they are drawn on the page.\n     * It manages attributes on breadcrumb items and handles the logic for collapsing breadcrumbs\n     * if the total exceeds the specified maximum items.\n     * @returns {void} This method does not return a value.\n     */\n    afterDraw() {\n        this.onSlotChange = () => this.updateCollapse();\n        this.defaultSlot?.addEventListener('slotchange', this.onSlotChange);\n        this.addEventListener('click', this.handleManagedItemClick);\n        this.handleResize = () => this.handleBreakpointResize();\n\n        if (this.getBreakpointWidth()) {\n            window.addEventListener('resize', this.handleResize);\n        }\n\n        if (this._itemRecords.length > 0 && this.getManagedBreadcrumbs().length === 0) {\n            this.syncItems(this._itemRecords);\n        }\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Removes listeners after disconnect.\n     */\n    afterDisconnect() {\n        this.defaultSlot?.removeEventListener('slotchange', this.onSlotChange);\n        this.removeEventListener('click', this.handleManagedItemClick);\n        window.removeEventListener('resize', this.handleResize);\n        this._isCollapsedByBreakpoint = null;\n    }\n\n    /**\n     * Upgrades properties set before the custom element definition was loaded.\n     * @param {string} property Property name.\n     */\n    upgradeProperty(property) {\n        if (!Object.prototype.hasOwnProperty.call(this, property)) return;\n\n        const value = this[property];\n        delete this[property];\n        this[property] = value;\n    }\n\n    /**\n     * Normalizes incoming item data for keyed DOM diffing.\n     * @param {Array|string|null|undefined} value Breadcrumb item data.\n     * @returns {Array<object>}\n     */\n    normalizeItems(value) {\n        let items = value;\n\n        if (typeof items === 'string') {\n            try {\n                items = JSON.parse(items);\n            } catch (e) {\n                console.warn('Invalid JSON passed to wje-breadcrumbs.items', e);\n                items = [];\n            }\n        }\n\n        if (items === null || items === undefined) return [];\n\n        if (!Array.isArray(items)) {\n            console.warn('wje-breadcrumbs.items expects an array.');\n            return [];\n        }\n\n        const usedKeys = new Set();\n\n        return items.map((item, index) => this.normalizeItem(item, index, usedKeys));\n    }\n\n    /**\n     * Normalizes a single item while preserving the original object for events.\n     * @param {object|string|number} item Source value for a breadcrumb entry.\n     * @param {number} index Position of the value in the current items array.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {object}\n     */\n    normalizeItem(item, index, usedKeys) {\n        const isObject = item !== null && typeof item === 'object';\n        const source = isObject\n            ? item\n            : {\n                id: index,\n                label: item === null || item === undefined ? '' : String(item),\n            };\n\n        return {\n            item: source,\n            key: this.getItemKey(source, index, usedKeys),\n            index,\n            label: source.label === null || source.label === undefined ? '' : String(source.label),\n            href: source.href === null || source.href === undefined ? null : String(source.href),\n            icon: source.icon === null || source.icon === undefined || source.icon === '' ? null : String(source.icon),\n            disabled: source.disabled === true || source.disabled === '' || source.disabled === 'true' || source.disabled === 1 || source.disabled === '1',\n        };\n    }\n\n    /**\n     * Resolves a stable key for an item.\n     * @param {object} item Normalized source object used to resolve the key.\n     * @param {number} index Fallback position used when the item has no id.\n     * @param {Set<string>} usedKeys Keys that have already been assigned during this update.\n     * @returns {string}\n     */\n    getItemKey(item, index, usedKeys) {\n        const baseKey = item.id === null || item.id === undefined\n            ? String(index)\n            : String(item.id);\n        let key = baseKey;\n        let suffix = 1;\n\n        while (usedKeys.has(key)) {\n            key = `${baseKey}:${suffix}`;\n            suffix += 1;\n        }\n\n        usedKeys.add(key);\n        return key;\n    }\n\n    /**\n     * Incrementally synchronizes data-driven items into light DOM breadcrumbs.\n     * @param {Array<object>} records Normalized records for the next breadcrumb trail.\n     */\n    syncItems(records) {\n        const managed = this.getManagedBreadcrumbs();\n        const managedByKey = new Map(managed.map((breadcrumb) => [breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE), breadcrumb]));\n        const nextKeys = new Set(records.map((record) => record.key));\n\n        managed.forEach((breadcrumb) => {\n            const key = breadcrumb.__wjeBreadcrumbKey || breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE);\n\n            if (!nextKeys.has(key)) {\n                breadcrumb.remove();\n            }\n        });\n\n        let referenceNode = this.firstChild;\n\n        records.forEach((record, index) => {\n            let breadcrumb = managedByKey.get(record.key);\n            const signature = this.getItemStructureSignature(record);\n\n            if (breadcrumb && breadcrumb.__wjeBreadcrumbSignature !== signature) {\n                const previousBreadcrumb = breadcrumb;\n                const replacement = this.createItemElement(record, index);\n                breadcrumb.replaceWith(replacement);\n                breadcrumb = replacement;\n                if (referenceNode === previousBreadcrumb) referenceNode = breadcrumb;\n            } else if (!breadcrumb) {\n                breadcrumb = this.createItemElement(record, index);\n            } else {\n                this.updateItemElement(breadcrumb, record, index);\n            }\n\n            if (breadcrumb !== referenceNode) {\n                this.insertBefore(breadcrumb, referenceNode);\n            }\n\n            referenceNode = breadcrumb.nextSibling;\n        });\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Creates a managed breadcrumb element.\n     * @param {object} record Normalized data used to create the breadcrumb.\n     * @param {number} index Position assigned to the created breadcrumb.\n     * @returns {HTMLElement}\n     */\n    createItemElement(record, index) {\n        const breadcrumb = document.createElement('wje-breadcrumb');\n        this.updateItemElement(breadcrumb, record, index);\n\n        return breadcrumb;\n    }\n\n    /**\n     * Updates a managed breadcrumb element only where values changed.\n     * @param {HTMLElement} breadcrumb Existing managed element to update.\n     * @param {object} record Normalized data used for the next rendered state.\n     * @param {number} index Position assigned to the managed breadcrumb.\n     */\n    updateItemElement(breadcrumb, record, index) {\n        breadcrumb.__wjeBreadcrumbManaged = true;\n        breadcrumb.__wjeBreadcrumbItem = record.item;\n        breadcrumb.__wjeBreadcrumbIndex = index;\n        breadcrumb.__wjeBreadcrumbKey = record.key;\n        breadcrumb.__wjeBreadcrumbSignature = this.getItemStructureSignature(record);\n\n        if (breadcrumb.getAttribute(MANAGED_ITEM_ATTRIBUTE) !== record.key) {\n            breadcrumb.setAttribute(MANAGED_ITEM_ATTRIBUTE, record.key);\n        }\n\n        this.syncItemAttribute(breadcrumb, 'href', record.href);\n        this.syncItemAttribute(breadcrumb, 'aria-label', record.label || null);\n        this.syncBooleanItemAttribute(breadcrumb, 'disabled', record.disabled);\n        this.syncItemContent(breadcrumb, record);\n    }\n\n    /**\n     * Synchronizes an attribute when its value changed.\n     * @param {HTMLElement} element Element receiving the synchronized attribute.\n     * @param {string} name Attribute to add, update, or remove.\n     * @param {string|null|undefined} value Next serialized value for the attribute.\n     */\n    syncItemAttribute(element, name, value) {\n        if (value === null || value === undefined || value === false) {\n            if (element.hasAttribute(name)) element.removeAttribute(name);\n            return;\n        }\n\n        const normalizedValue = String(value);\n\n        if (element.getAttribute(name) !== normalizedValue) {\n            element.setAttribute(name, normalizedValue);\n        }\n    }\n\n    /**\n     * Synchronizes a boolean attribute.\n     * @param {HTMLElement} element Element receiving the boolean attribute.\n     * @param {string} name Boolean attribute to toggle.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncBooleanItemAttribute(element, name, isEnabled) {\n        if (isEnabled && !element.hasAttribute(name)) {\n            element.setAttribute(name, '');\n        }\n\n        if (!isEnabled && element.hasAttribute(name)) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Synchronizes slotted icon and text nodes for a managed breadcrumb.\n     * @param {HTMLElement} breadcrumb Breadcrumb element.\n     * @param {object} record Normalized item record.\n     */\n    syncItemContent(breadcrumb, record) {\n        let icon = breadcrumb.__wjeBreadcrumbIcon;\n\n        if (record.icon) {\n            if (!icon || icon.parentElement !== breadcrumb) {\n                icon = document.createElement('wje-icon');\n                icon.setAttribute('slot', 'start');\n                breadcrumb.insertBefore(icon, breadcrumb.firstChild);\n                breadcrumb.__wjeBreadcrumbIcon = icon;\n            }\n\n            if (icon.getAttribute('name') !== record.icon) {\n                icon.setAttribute('name', record.icon);\n            }\n        } else if (icon) {\n            icon.remove();\n            breadcrumb.__wjeBreadcrumbIcon = null;\n        }\n\n        let labelNode = breadcrumb.__wjeBreadcrumbLabelNode;\n\n        if (!labelNode || labelNode.parentNode !== breadcrumb) {\n            labelNode = document.createTextNode('');\n            breadcrumb.appendChild(labelNode);\n            breadcrumb.__wjeBreadcrumbLabelNode = labelNode;\n        }\n\n        if (labelNode.textContent !== record.label) {\n            labelNode.textContent = record.label;\n        }\n    }\n\n    /**\n     * Returns a small signature for structural changes that need item replacement.\n     * @param {object} record Normalized item record.\n     * @returns {string}\n     */\n    getItemStructureSignature(record) {\n        return `icon:${record.icon ? '1' : '0'}`;\n    }\n\n    /**\n     * Dispatches the data-driven item click event.\n     * @param {MouseEvent} e Original click event.\n     */\n    dispatchManagedItemClick(e) {\n        const breadcrumb = this.getManagedBreadcrumbFromEvent(e);\n        if (!breadcrumb) return;\n\n        const item = breadcrumb.__wjeBreadcrumbItem;\n\n        if (item?.disabled || breadcrumb.hasAttribute('disabled')) {\n            e.preventDefault();\n            e.stopPropagation();\n            e.stopImmediatePropagation?.();\n            return;\n        }\n\n        const itemClickEvent = new CustomEvent('wje-breadcrumbs:item-click', {\n            detail: {\n                item,\n                index: breadcrumb.__wjeBreadcrumbIndex,\n                originalEvent: e,\n            },\n            bubbles: true,\n            composed: true,\n            cancelable: true,\n        });\n\n        const shouldContinue = this.dispatchEvent(itemClickEvent);\n\n        if (!shouldContinue) {\n            e.preventDefault();\n        }\n    }\n\n    /**\n     * Finds the managed breadcrumb that originated an event.\n     * @param {Event} e Event whose composed path should be inspected.\n     * @returns {HTMLElement|null}\n     */\n    getManagedBreadcrumbFromEvent(e) {\n        const path = typeof e.composedPath === 'function' ? e.composedPath() : [];\n\n        return path.find((node) => (\n            node?.nodeType === Node.ELEMENT_NODE &&\n            node.tagName?.toLowerCase() === 'wje-breadcrumb' &&\n            node.parentElement === this &&\n            node.hasAttribute(MANAGED_ITEM_ATTRIBUTE)\n        )) || null;\n    }\n\n    /**\n     * Reacts to viewport resize only when the breakpoint mode actually changes.\n     * @returns {void}\n     */\n    handleBreakpointResize() {\n        if (!this.getBreakpointWidth()) return;\n\n        const nextState = this.shouldApplyBreakpointCollapse();\n\n        if (this._isCollapsedByBreakpoint === nextState) return;\n\n        this.updateCollapse();\n    }\n\n    /**\n     * Recalculates breadcrumb collapse state.\n     * @returns {void}\n     */\n    updateCollapse() {\n        let breadcrumbs = this.getBreadcrumbs();\n\n        if (breadcrumbs.length === 0) return;\n\n        this._isCollapsedByBreakpoint = this.shouldApplyBreakpointCollapse();\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldCollapse =\n            this._isCollapsedByBreakpoint &&\n            this.maxItems > 0 &&\n            breadcrumbs.length > this.maxItems &&\n            this.itemsBeforeCollapse + effectiveItemsAfterCollapse + 1 <= this.maxItems;\n\n        const lastIndex = breadcrumbs.length - 1;\n        const indicatorIndex = shouldCollapse ? this.itemsBeforeCollapse : -1;\n        const collapseStart = this.itemsBeforeCollapse;\n        const collapseEnd = breadcrumbs.length - effectiveItemsAfterCollapse;\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', index === indicatorIndex);\n\n            const isCollapsed =\n                shouldCollapse &&\n                index >= collapseStart &&\n                index < collapseEnd;\n\n            this.syncManagedAttribute(breadcrumb, 'collapsed', isCollapsed);\n\n            if (!isCollapsed && breadcrumb.classList.contains('collapsed')) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n    }\n\n    /**\n     * Clears attributes/classes managed by the collapse algorithm.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    resetCollapseState(breadcrumbs = this.getBreadcrumbs()) {\n        breadcrumbs.forEach((breadcrumb) => {\n            breadcrumb.removeAttribute('collapsed');\n            breadcrumb.removeAttribute('show-collapsed-indicator');\n            breadcrumb.removeAttribute('last');\n            breadcrumb.classList.remove('collapsed');\n        });\n    }\n\n    /**\n     * Applies a managed boolean attribute only when its value truly changes.\n     * @param {Element} element Breadcrumb item whose responsive state is being synchronized.\n     * @param {string} name Managed state flag that should be synchronized on the breadcrumb item.\n     * @param {boolean} isEnabled Whether the attribute should be present.\n     */\n    syncManagedAttribute(element, name, isEnabled) {\n        if (!element) return;\n\n        const hasAttribute = element.hasAttribute(name);\n\n        if (isEnabled && !hasAttribute) {\n            element.setAttribute(name, true);\n        }\n\n        if (!isEnabled && hasAttribute) {\n            element.removeAttribute(name);\n        }\n    }\n\n    /**\n     * Returns whether collapse rules should currently be applied.\n     * @returns {boolean}\n     */\n    shouldApplyBreakpointCollapse() {\n        const breakpointWidth = this.getBreakpointWidth();\n\n        if (!breakpointWidth) return true;\n\n        return window.innerWidth < breakpointWidth;\n    }\n\n    /**\n     * Resolves the configured breakpoint to a pixel width.\n     * @returns {number|null}\n     */\n    getBreakpointWidth() {\n        if (!this.breakpoint) return null;\n\n        const token = this.breakpoint.trim().toLowerCase();\n        const cssValue = getComputedStyle(this).getPropertyValue(`--wje-breadcrumbs-breakpoint-${token}`).trim();\n        const namedBreakpoint = Breadcrumbs.BREAKPOINTS[token];\n\n        if (cssValue) {\n            const cssNumber = parseFloat(cssValue);\n            if (Number.isFinite(cssNumber)) return cssNumber;\n        }\n\n        if (Number.isFinite(namedBreakpoint)) {\n            return namedBreakpoint;\n        }\n\n        const directNumber = parseFloat(token);\n        return Number.isFinite(directNumber) ? directNumber : null;\n    }\n\n    /**\n     * Retrieves all breadcrumb elements within the current instance.\n     * @returns {Array<Element>} An array of breadcrumb elements (`wje-breadcrumb`) found within the instance. Returns an empty array if no breadcrumbs are found.\n     */\n    getBreadcrumbs() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb')) || [];\n    }\n\n    /**\n     * Retrieves breadcrumbs managed by the items property.\n     * @returns {Array<Element>}\n     */\n    getManagedBreadcrumbs() {\n        return Array.from(this.querySelectorAll(`wje-breadcrumb[${MANAGED_ITEM_ATTRIBUTE}]`)) || [];\n    }\n\n    /**\n     * Retrieves all breadcrumb elements that have the 'collapsed' attribute.\n     * @returns {Array<Element>} An array of DOM elements representing breadcrumbs with the 'collapsed' attribute.\n     */\n    getBreadcrumbsCollapsed() {\n        return Array.from(this.querySelectorAll('wje-breadcrumb[collapsed]')) || [];\n    }\n}\n","import Breadcrumbs from './breadcrumbs.element.js';\n\nexport default Breadcrumbs;\n\nBreadcrumbs.define('wje-breadcrumbs', Breadcrumbs);\n"],"names":[],"mappings":";;;;;AAGA,MAAM,yBAAyB;AA4BhB,MAAM,eAAN,MAAM,qBAAoB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAc/C,cAAc;AACV,UAAK;AAuIT;AAAA;AAAA;AAAA;AAAA,qCAAY;AAjIR,SAAK,OAAO;AACZ,SAAK,2BAA2B;AAChC,SAAK,SAAS,CAAA;AACd,SAAK,eAAe,CAAA;AACpB,SAAK,iBAAiB;AACtB,SAAK,yBAAyB,CAAC,MAAM,KAAK,yBAAyB,CAAC;AAAA,EACxE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAM,OAAO;AACb,UAAM,UAAU,KAAK,eAAe,KAAK;AAEzC,SAAK,iBAAiB;AACtB,SAAK,SAAS,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI;AACjD,SAAK,eAAe;AAEpB,SAAK,UAAU,OAAO;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ;AACR,WAAO,KAAK;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAQ,OAAO;AACf,SAAK,aAAa,WAAW,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS,KAAK;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,mBAAmB,KAAK,KAAK;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW,OAAO;AAClB,QAAI,MAAO,MAAK,aAAa,cAAc,KAAK;AAAA,QAC3C,MAAK,gBAAgB,YAAY;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,aAAa;AACb,WAAO,KAAK,aAAa,YAAY,KAAK;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAS,OAAO;AAChB,SAAK,aAAa,aAAa,SAAS,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACX,WAAO,CAAC,KAAK,aAAa,WAAgB;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,oBAAoB,OAAO;AAC3B,SAAK,aAAa,yBAAyB,SAAS,CAAC;AAAA,EACzD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,sBAAsB;AACtB,WAAO,CAAC,KAAK,aAAa,uBAAuB,KAAK;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,mBAAmB,OAAO;AAC1B,SAAK,aAAa,wBAAwB,SAAS,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,qBAAqB;AACrB,QAAI,KAAK,aAAa,sBAAsB,GAAG;AAC3C,aAAO,CAAC,KAAK,aAAa,sBAAsB,KAAK;AAAA,IACzD;AAEA,UAAM,4BAA4B,KAAK,WAAW,KAAK,sBAAsB;AAE7E,WAAO,4BAA4B,IAAI,4BAA4B;AAAA,EACvE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAW,qBAAqB;AAC5B,WAAO,CAAC,cAAc,aAAa,yBAAyB,wBAAwB,qBAAqB,SAAS;AAAA,EACtH;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;AACd,SAAK,eAAe;AACpB,SAAK,aAAa,EAAE,MAAM,aAAY,CAAE;AACxC,SAAK,gBAAgB,OAAO;AAE5B,QAAI,CAAC,KAAK,kBAAkB,KAAK,aAAa,OAAO,GAAG;AACpD,WAAK,QAAQ,KAAK,aAAa,OAAO;AAAA,IAC1C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO;AACH,QAAI,WAAW,SAAS,uBAAsB;AAE9C,QAAI,UAAU,SAAS,cAAc,MAAM;AAE3C,aAAS,YAAY,OAAO;AAC5B,SAAK,cAAc;AAEnB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,YAAY;;AACR,SAAK,eAAe,MAAM,KAAK,eAAc;AAC7C,eAAK,gBAAL,mBAAkB,iBAAiB,cAAc,KAAK;AACtD,SAAK,iBAAiB,SAAS,KAAK,sBAAsB;AAC1D,SAAK,eAAe,MAAM,KAAK,uBAAsB;AAErD,QAAI,KAAK,sBAAsB;AAC3B,aAAO,iBAAiB,UAAU,KAAK,YAAY;AAAA,IACvD;AAEA,QAAI,KAAK,aAAa,SAAS,KAAK,KAAK,sBAAqB,EAAG,WAAW,GAAG;AAC3E,WAAK,UAAU,KAAK,YAAY;AAAA,IACpC;AAEA,SAAK,eAAc;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB;;AACd,eAAK,gBAAL,mBAAkB,oBAAoB,cAAc,KAAK;AACzD,SAAK,oBAAoB,SAAS,KAAK,sBAAsB;AAC7D,WAAO,oBAAoB,UAAU,KAAK,YAAY;AACtD,SAAK,2BAA2B;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB,UAAU;AACtB,QAAI,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,QAAQ,EAAG;AAE3D,UAAM,QAAQ,KAAK,QAAQ;AAC3B,WAAO,KAAK,QAAQ;AACpB,SAAK,QAAQ,IAAI;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,eAAe,OAAO;AAClB,QAAI,QAAQ;AAEZ,QAAI,OAAO,UAAU,UAAU;AAC3B,UAAI;AACA,gBAAQ,KAAK,MAAM,KAAK;AAAA,MAC5B,SAAS,GAAG;AACR,gBAAQ,KAAK,gDAAgD,CAAC;AAC9D,gBAAQ,CAAA;AAAA,MACZ;AAAA,IACJ;AAEA,QAAI,UAAU,QAAQ,UAAU,OAAW,QAAO,CAAA;AAElD,QAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACvB,cAAQ,KAAK,yCAAyC;AACtD,aAAO,CAAA;AAAA,IACX;AAEA,UAAM,WAAW,oBAAI,IAAG;AAExB,WAAO,MAAM,IAAI,CAAC,MAAM,UAAU,KAAK,cAAc,MAAM,OAAO,QAAQ,CAAC;AAAA,EAC/E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,cAAc,MAAM,OAAO,UAAU;AACjC,UAAM,WAAW,SAAS,QAAQ,OAAO,SAAS;AAClD,UAAM,SAAS,WACT,OACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO,SAAS,QAAQ,SAAS,SAAY,KAAK,OAAO,IAAI;AAAA,IAC7E;AAEQ,WAAO;AAAA,MACH,MAAM;AAAA,MACN,KAAK,KAAK,WAAW,QAAQ,OAAO,QAAQ;AAAA,MAC5C;AAAA,MACA,OAAO,OAAO,UAAU,QAAQ,OAAO,UAAU,SAAY,KAAK,OAAO,OAAO,KAAK;AAAA,MACrF,MAAM,OAAO,SAAS,QAAQ,OAAO,SAAS,SAAY,OAAO,OAAO,OAAO,IAAI;AAAA,MACnF,MAAM,OAAO,SAAS,QAAQ,OAAO,SAAS,UAAa,OAAO,SAAS,KAAK,OAAO,OAAO,OAAO,IAAI;AAAA,MACzG,UAAU,OAAO,aAAa,QAAQ,OAAO,aAAa,MAAM,OAAO,aAAa,UAAU,OAAO,aAAa,KAAK,OAAO,aAAa;AAAA,IACvJ;AAAA,EACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,WAAW,MAAM,OAAO,UAAU;AAC9B,UAAM,UAAU,KAAK,OAAO,QAAQ,KAAK,OAAO,SAC1C,OAAO,KAAK,IACZ,OAAO,KAAK,EAAE;AACpB,QAAI,MAAM;AACV,QAAI,SAAS;AAEb,WAAO,SAAS,IAAI,GAAG,GAAG;AACtB,YAAM,GAAG,OAAO,IAAI,MAAM;AAC1B,gBAAU;AAAA,IACd;AAEA,aAAS,IAAI,GAAG;AAChB,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,SAAS;AACf,UAAM,UAAU,KAAK,sBAAqB;AAC1C,UAAM,eAAe,IAAI,IAAI,QAAQ,IAAI,CAAC,eAAe,CAAC,WAAW,sBAAsB,WAAW,aAAa,sBAAsB,GAAG,UAAU,CAAC,CAAC;AACxJ,UAAM,WAAW,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,GAAG,CAAC;AAE5D,YAAQ,QAAQ,CAAC,eAAe;AAC5B,YAAM,MAAM,WAAW,sBAAsB,WAAW,aAAa,sBAAsB;AAE3F,UAAI,CAAC,SAAS,IAAI,GAAG,GAAG;AACpB,mBAAW,OAAM;AAAA,MACrB;AAAA,IACJ,CAAC;AAED,QAAI,gBAAgB,KAAK;AAEzB,YAAQ,QAAQ,CAAC,QAAQ,UAAU;AAC/B,UAAI,aAAa,aAAa,IAAI,OAAO,GAAG;AAC5C,YAAM,YAAY,KAAK,0BAA0B,MAAM;AAEvD,UAAI,cAAc,WAAW,6BAA6B,WAAW;AACjE,cAAM,qBAAqB;AAC3B,cAAM,cAAc,KAAK,kBAAkB,QAAQ,KAAK;AACxD,mBAAW,YAAY,WAAW;AAClC,qBAAa;AACb,YAAI,kBAAkB,mBAAoB,iBAAgB;AAAA,MAC9D,WAAW,CAAC,YAAY;AACpB,qBAAa,KAAK,kBAAkB,QAAQ,KAAK;AAAA,MACrD,OAAO;AACH,aAAK,kBAAkB,YAAY,QAAQ,KAAK;AAAA,MACpD;AAEA,UAAI,eAAe,eAAe;AAC9B,aAAK,aAAa,YAAY,aAAa;AAAA,MAC/C;AAEA,sBAAgB,WAAW;AAAA,IAC/B,CAAC;AAED,SAAK,eAAc;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB,QAAQ,OAAO;AAC7B,UAAM,aAAa,SAAS,cAAc,gBAAgB;AAC1D,SAAK,kBAAkB,YAAY,QAAQ,KAAK;AAEhD,WAAO;AAAA,EACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB,YAAY,QAAQ,OAAO;AACzC,eAAW,yBAAyB;AACpC,eAAW,sBAAsB,OAAO;AACxC,eAAW,uBAAuB;AAClC,eAAW,qBAAqB,OAAO;AACvC,eAAW,2BAA2B,KAAK,0BAA0B,MAAM;AAE3E,QAAI,WAAW,aAAa,sBAAsB,MAAM,OAAO,KAAK;AAChE,iBAAW,aAAa,wBAAwB,OAAO,GAAG;AAAA,IAC9D;AAEA,SAAK,kBAAkB,YAAY,QAAQ,OAAO,IAAI;AACtD,SAAK,kBAAkB,YAAY,cAAc,OAAO,SAAS,IAAI;AACrE,SAAK,yBAAyB,YAAY,YAAY,OAAO,QAAQ;AACrE,SAAK,gBAAgB,YAAY,MAAM;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,kBAAkB,SAAS,MAAM,OAAO;AACpC,QAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,OAAO;AAC1D,UAAI,QAAQ,aAAa,IAAI,EAAG,SAAQ,gBAAgB,IAAI;AAC5D;AAAA,IACJ;AAEA,UAAM,kBAAkB,OAAO,KAAK;AAEpC,QAAI,QAAQ,aAAa,IAAI,MAAM,iBAAiB;AAChD,cAAQ,aAAa,MAAM,eAAe;AAAA,IAC9C;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,yBAAyB,SAAS,MAAM,WAAW;AAC/C,QAAI,aAAa,CAAC,QAAQ,aAAa,IAAI,GAAG;AAC1C,cAAQ,aAAa,MAAM,EAAE;AAAA,IACjC;AAEA,QAAI,CAAC,aAAa,QAAQ,aAAa,IAAI,GAAG;AAC1C,cAAQ,gBAAgB,IAAI;AAAA,IAChC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,gBAAgB,YAAY,QAAQ;AAChC,QAAI,OAAO,WAAW;AAEtB,QAAI,OAAO,MAAM;AACb,UAAI,CAAC,QAAQ,KAAK,kBAAkB,YAAY;AAC5C,eAAO,SAAS,cAAc,UAAU;AACxC,aAAK,aAAa,QAAQ,OAAO;AACjC,mBAAW,aAAa,MAAM,WAAW,UAAU;AACnD,mBAAW,sBAAsB;AAAA,MACrC;AAEA,UAAI,KAAK,aAAa,MAAM,MAAM,OAAO,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,IAAI;AAAA,MACzC;AAAA,IACJ,WAAW,MAAM;AACb,WAAK,OAAM;AACX,iBAAW,sBAAsB;AAAA,IACrC;AAEA,QAAI,YAAY,WAAW;AAE3B,QAAI,CAAC,aAAa,UAAU,eAAe,YAAY;AACnD,kBAAY,SAAS,eAAe,EAAE;AACtC,iBAAW,YAAY,SAAS;AAChC,iBAAW,2BAA2B;AAAA,IAC1C;AAEA,QAAI,UAAU,gBAAgB,OAAO,OAAO;AACxC,gBAAU,cAAc,OAAO;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,0BAA0B,QAAQ;AAC9B,WAAO,QAAQ,OAAO,OAAO,MAAM,GAAG;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,yBAAyB,GAAG;;AACxB,UAAM,aAAa,KAAK,8BAA8B,CAAC;AACvD,QAAI,CAAC,WAAY;AAEjB,UAAM,OAAO,WAAW;AAExB,SAAI,6BAAM,aAAY,WAAW,aAAa,UAAU,GAAG;AACvD,QAAE,eAAc;AAChB,QAAE,gBAAe;AACjB,cAAE,6BAAF;AACA;AAAA,IACJ;AAEA,UAAM,iBAAiB,IAAI,YAAY,8BAA8B;AAAA,MACjE,QAAQ;AAAA,QACJ;AAAA,QACA,OAAO,WAAW;AAAA,QAClB,eAAe;AAAA,MAC/B;AAAA,MACY,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACxB,CAAS;AAED,UAAM,iBAAiB,KAAK,cAAc,cAAc;AAExD,QAAI,CAAC,gBAAgB;AACjB,QAAE,eAAc;AAAA,IACpB;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,8BAA8B,GAAG;AAC7B,UAAM,OAAO,OAAO,EAAE,iBAAiB,aAAa,EAAE,aAAY,IAAK,CAAA;AAEvE,WAAO,KAAK,KAAK,CAAC,SAAI;;AAClB,2CAAM,cAAa,KAAK,kBACxB,UAAK,YAAL,mBAAc,mBAAkB,oBAChC,KAAK,kBAAkB,QACvB,KAAK,aAAa,sBAAsB;AAAA,KAC3C,KAAK;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,yBAAyB;AACrB,QAAI,CAAC,KAAK,qBAAsB;AAEhC,UAAM,YAAY,KAAK,8BAA6B;AAEpD,QAAI,KAAK,6BAA6B,UAAW;AAEjD,SAAK,eAAc;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACb,QAAI,cAAc,KAAK,eAAc;AAErC,QAAI,YAAY,WAAW,EAAG;AAE9B,SAAK,2BAA2B,KAAK,8BAA6B;AAClE,UAAM,8BAA8B,KAAK;AACzC,UAAM,iBACF,KAAK,4BACL,KAAK,WAAW,KAChB,YAAY,SAAS,KAAK,YAC1B,KAAK,sBAAsB,8BAA8B,KAAK,KAAK;AAEvE,UAAM,YAAY,YAAY,SAAS;AACvC,UAAM,iBAAiB,iBAAiB,KAAK,sBAAsB;AACnE,UAAM,gBAAgB,KAAK;AAC3B,UAAM,cAAc,YAAY,SAAS;AAEzC,gBAAY,QAAQ,CAAC,YAAY,UAAU;AACvC,WAAK,qBAAqB,YAAY,QAAQ,UAAU,SAAS;AACjE,WAAK,qBAAqB,YAAY,4BAA4B,UAAU,cAAc;AAE1F,YAAM,cACF,kBACA,SAAS,iBACT,QAAQ;AAEZ,WAAK,qBAAqB,YAAY,aAAa,WAAW;AAE9D,UAAI,CAAC,eAAe,WAAW,UAAU,SAAS,WAAW,GAAG;AAC5D,mBAAW,UAAU,OAAO,WAAW;AAAA,MAC3C;AAAA,IACJ,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB,cAAc,KAAK,kBAAkB;AACpD,gBAAY,QAAQ,CAAC,eAAe;AAChC,iBAAW,gBAAgB,WAAW;AACtC,iBAAW,gBAAgB,0BAA0B;AACrD,iBAAW,gBAAgB,MAAM;AACjC,iBAAW,UAAU,OAAO,WAAW;AAAA,IAC3C,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,qBAAqB,SAAS,MAAM,WAAW;AAC3C,QAAI,CAAC,QAAS;AAEd,UAAM,eAAe,QAAQ,aAAa,IAAI;AAE9C,QAAI,aAAa,CAAC,cAAc;AAC5B,cAAQ,aAAa,MAAM,IAAI;AAAA,IACnC;AAEA,QAAI,CAAC,aAAa,cAAc;AAC5B,cAAQ,gBAAgB,IAAI;AAAA,IAChC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gCAAgC;AAC5B,UAAM,kBAAkB,KAAK,mBAAkB;AAE/C,QAAI,CAAC,gBAAiB,QAAO;AAE7B,WAAO,OAAO,aAAa;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,qBAAqB;AACjB,QAAI,CAAC,KAAK,WAAY,QAAO;AAE7B,UAAM,QAAQ,KAAK,WAAW,KAAI,EAAG,YAAW;AAChD,UAAM,WAAW,iBAAiB,IAAI,EAAE,iBAAiB,gCAAgC,KAAK,EAAE,EAAE,KAAI;AACtG,UAAM,kBAAkB,aAAY,YAAY,KAAK;AAErD,QAAI,UAAU;AACV,YAAM,YAAY,WAAW,QAAQ;AACrC,UAAI,OAAO,SAAS,SAAS,EAAG,QAAO;AAAA,IAC3C;AAEA,QAAI,OAAO,SAAS,eAAe,GAAG;AAClC,aAAO;AAAA,IACX;AAEA,UAAM,eAAe,WAAW,KAAK;AACrC,WAAO,OAAO,SAAS,YAAY,IAAI,eAAe;AAAA,EAC1D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,iBAAiB;AACb,WAAO,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC,KAAK,CAAA;AAAA,EAClE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,wBAAwB;AACpB,WAAO,MAAM,KAAK,KAAK,iBAAiB,kBAAkB,sBAAsB,GAAG,CAAC,KAAK,CAAA;AAAA,EAC7F;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,0BAA0B;AACtB,WAAO,MAAM,KAAK,KAAK,iBAAiB,2BAA2B,CAAC,KAAK,CAAA;AAAA,EAC7E;AACJ;AAvqBI,cADiB,cACV,eAAc;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,KAAK;AACb;AARe,IAAM,cAAN;AC3Bf,YAAY,OAAO,mBAAmB,WAAW;"}

package/dist/wje-img.js

@@ -113,6 +113,24 @@ class Img extends WJElement {
   get loader() {
     return this.getAttribute("loader") || "./assets/img/image-loader.gif";
   }
+  /**
+   * 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) {
+    if (value) {
+      this.setAttribute("no-lazy", "");
+    } else {
+      this.removeAttribute("no-lazy");
+    }
+  }
+  /**
+   * Checks whether lazy loading is disabled.
+   * @returns {boolean} True when the `no-lazy` attribute is present.
+   */
+  get noLazy() {
+    return this.hasAttribute("no-lazy");
+  }
   /**
    * Returns the CSS styles for the component.
    * @static
@@ -127,7 +145,7 @@ class Img extends WJElement {
    * @returns {Array<string>}
    */
   static get observedAttributes() {
-    return ["src", "alt"];
+    return ["src", "alt", "no-lazy"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     var _a, _b;
@@ -157,7 +175,7 @@ class Img extends WJElement {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("img");
     native.setAttribute("part", "native");
-    native.setAttribute("src", this.loader);
+    native.setAttribute("src", this.noLazy ? this.src : this.loader);
     native.setAttribute("alt", this.alt || "");
     native.classList.add("lazy-loaded-image", "lazy");
     native.addEventListener("error", (e) => {
@@ -179,6 +197,10 @@ class Img extends WJElement {
    * @returns {void} Does not return a value.
    */
   afterDraw() {
+    if (this.noLazy) {
+      this.native.classList.remove("lazy");
+      return;
+    }
     let lazyImageObserver = new IntersectionObserver((entries, observer) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {

package/dist/wje-img.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @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'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['src', 'alt'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-img.js","sources":["../packages/wje-img/img.element.js","../packages/wje-img/img.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This element represents an image. `Img` is a custom web component that represents an image. It extends from `WJElement`.\n * @documentation https://elements.webjet.sk/components/img\n * @status stable\n * @augments {WJElement}\n * @cssproperty --img-width - The width of the image\n * @cssproperty --img-height - The height of the image\n * @property {string} src - The source URL of the image.\n * @property {string} alt - The alternative text for the image.\n * @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'.\n * @property {string} loader - The URL of the image loader to display while the image is loading.\n * @property {boolean} noLazy - Disables lazy loading and renders the image source immediately.\n * @tag wje-img\n */\nexport default class Img extends WJElement {\n    /**\n     * Creates an instance of Img.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._fallout = false;\n\n        this.actions = {\n            delete: () => this.deleteImage(),\n            log: () => console.error('Error log pre obrázok:', this.src),\n        };\n    }\n\n    /**\n     * Sets the value of the `src` attribute for the element.\n     * @param {string} value The value to set for the `src` attribute.\n     */\n    set src(value) {\n        this.setAttribute('src', value);\n    }\n\n    /**\n     * Retrieves the value of the 'src' attribute from the element.\n     * @returns {string} The value of the 'src' attribute.\n     */\n    get src() {\n        return this.getAttribute('src');\n    }\n\n    /**\n     * Sets the value of the 'alt' attribute for the element.\n     * @param {string} value The new value to set for the 'alt' attribute.\n     */\n    set alt(value) {\n        this.setAttribute('alt', value);\n    }\n\n    /**\n     * Retrieves the value of the 'alt' attribute for the current element.\n     * @returns {string|null} The value of the 'alt' attribute, or null if the attribute is not set.\n     */\n    get alt() {\n        return this.getAttribute('alt');\n    }\n\n    /**\n     * Sets the fallout property. Updates the `fallout` attribute if the value is a string;\n     * otherwise, assigns the value to the `_fallout` property.\n     * @param {string|*} value The value to set for the fallout property. If a string, it will update the `fallout` attribute; for other types, it will assign it to the `_fallout` property.\n     */\n    set fallout(value) {\n        if (typeof value === 'string') {\n            this.setAttribute('fallout', value);\n        } else {\n            this._fallout = value;\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'fallout' attribute if it exists, otherwise returns the internal `_fallout` property.\n     * @returns {string|null} The value of the 'fallout' attribute or the `_fallout` property if the attribute is not present. Returns null if no value is found.\n     */\n    get fallout() {\n        return this.hasAttribute('fallout') ? this.getAttribute('fallout') : this._fallout;\n    }\n\n    /**\n     * Sets the value of the loader attribute.\n     * @param {string} value The value to set for the loader attribute.\n     */\n    set loader(value) {\n        if (value) {\n            this.setAttribute('loader', value);\n        }\n    }\n\n    /**\n     * Retrieves the value of the 'loader' attribute from the element.\n     * @returns {string|null} The value of the 'loader' attribute if set, otherwise null.\n     */\n    get loader() {\n        return this.getAttribute('loader') || './assets/img/image-loader.gif';\n    }\n\n    /**\n     * Enables or disables lazy loading for the image.\n     * @param {boolean} value True to disable lazy loading, false to restore the default lazy behavior.\n     */\n    set noLazy(value) {\n        if (value) {\n            this.setAttribute('no-lazy', '');\n        } else {\n            this.removeAttribute('no-lazy');\n        }\n    }\n\n    /**\n     * Checks whether lazy loading is disabled.\n     * @returns {boolean} True when the `no-lazy` attribute is present.\n     */\n    get noLazy() {\n        return this.hasAttribute('no-lazy');\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'Img';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['src', 'alt', 'no-lazy'];\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n        if (oldValue === newValue) return;\n        if (name === 'alt') {\n            if (this.native) this.native.setAttribute('alt', this.alt || '');\n            const label = this.alt?.trim();\n            if (label) this.setAriaState({ label });\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.setAriaState({ role: 'img' });\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n    }\n\n    /**\n     * Creates and assembles a lazy-loaded image element within a document fragment.\n     * @returns {DocumentFragment} A document fragment containing the image element.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('img');\n        native.setAttribute('part', 'native');\n        native.setAttribute('src', this.noLazy ? this.src : this.loader);\n        native.setAttribute('alt', this.alt || '');\n        native.classList.add('lazy-loaded-image', 'lazy');\n        native.addEventListener('error', (e) => {\n            const absoluteLoaderUrl = new URL(this.loader, window.location.origin).href;\n            if (e.target.src === absoluteLoaderUrl) return;\n\n            this.setAvatarInitials(true);\n        });\n\n        this.onerrorFunc(native);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        if (this.alt?.trim()) this.setAriaState({ label: this.alt.trim() });\n\n        return fragment;\n    }\n\n    /**\n     * Handles post-draw operations, such as setting up a lazy image loader using an IntersectionObserver.\n     * Observes when the target element becomes visible in the viewport and updates its source with the provided image source.\n     * Removes the `lazy` class once the image source is updated and unobserves the element.\n     * It also invokes the `onerrorFunc` method at the beginning to handle potential error scenarios.\n     * @returns {void} Does not return a value.\n     */\n    afterDraw() {\n        if (this.noLazy) {\n            this.native.classList.remove('lazy');\n            return;\n        }\n\n        let lazyImageObserver = new IntersectionObserver((entries, observer) => {\n            entries.forEach((entry) => {\n                if (entry.isIntersecting) {\n                    entry.target.src = this.src;\n                    this.classList.remove('lazy');\n\n                    lazyImageObserver.unobserve(entry.target);\n                }\n            });\n        });\n\n        lazyImageObserver.observe(this.native);\n    }\n\n    setAvatarInitials = (value = false) => {\n        let parent = this.parentElement;\n        if (parent?.tagName === 'WJE-AVATAR') parent.initials = value;\n    };\n    /**\n     * Deletes the current image by calling the remove method.\n     * This function is typically used to trigger the removal of an image element\n     * or perform cleanup operations related to the image.\n     */\n    deleteImage = () => {\n        this.remove();\n    };\n\n    /**\n     * Adds a new action to the internal actions object.\n     * @param {string} name The name of the action to be added.\n     * @param {Function} func The function representing the action logic.\n     * @returns {void} This method does not return a value.\n     */\n    addAction(name, func) {\n        if (typeof func === 'function') {\n            this.actions[name] = func;\n        } else {\n            console.error('The action must be a function.');\n        }\n    }\n\n    /**\n     * Removes an action from the actions list if it exists.\n     * @param {string} name The name of the action to remove.\n     * @returns {void} Does not return a value.\n     */\n    removeAction(name) {\n        if (this.actions[name]) {\n            delete this.actions[name];\n        } else {\n            console.error(`Action \"${name}\" does not exist.`);\n        }\n    }\n\n    /**\n     * Handles error scenarios by checking the `fallout` property and performing\n     * corresponding actions. If `fallout` is not defined, the function terminates\n     * early. Logs the active actions and attempts to assign an error handler\n     * based on the `fallout` value. If the `fallout` value does not correspond to\n     * a recognized action, it logs an error message.\n     * @function onerrorFunc\n     * @memberof Img\n     */\n    onerrorFunc = (img) => {\n        if (!this.fallout) return;\n        if (this.actions[this.fallout]) {\n            img.onerror = this.actions[this.fallout];\n        } else {\n            console.error('Unsupported value:', this.fallout);\n        }\n    };\n}\n","import Img from './img.element.js';\n\nexport default Img;\n\nImg.define('wje-img', Img);\n"],"names":[],"mappings":"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"}

package/dist/wje-input.js

@@ -10,7 +10,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _Input_instances, syncNativeAttribute_fn;
 import { F as FormAssociatedElement } from "./form-associated-element-DEQ4y-jn.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: var(--wje-input-clear-inline-end, 0);\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([clearable]) .native-input.focused .clear,\n:host([clearable]) .input-wrapper:hover .clear {\n    visibility: visible;\n}\n\n:host([clearable][type='number']) .clear {\n    right: var(--wje-input-number-control-width, 1.75rem);\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n:host([clearable]) input {\n    box-sizing: border-box;\n    padding-inline-end: calc(var(--wje-input-clear-size, 2rem) + 0.5rem);\n}\n\n:host([clearable][type='number']) input {\n    padding-inline-end: 0.5rem;\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-input-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-input-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
+const styles = "/*\n[ WJ Input ]\n*/\n\n:host {\n    --wje-input-clear-size: 1.625rem;\n    --wje-input-clear-gap: 0.5rem;\n    width: 100%;\n    margin-bottom: var(--wje-input-margin-bottom);\n    display: block;\n    label {\n        margin: var(--wje-input-label-margin);\n        padding: var(--wje-input-label-padding);\n        display: var(--wje-input-label-display);\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-label-line-height);\n        font-size: var(--wje-input-label-font-size);\n    }\n    .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        width: 100%;\n        > .input-wrapper {\n            grid-column: 2;\n        }\n    }\n    .native-input {\n        .input-wrapper {\n            display: block;\n            width: 100%;\n            position: relative;\n            box-sizing: border-box;\n\n            label {\n                width: 100%;\n            }\n        }\n        &.default {\n            background-color: var(--wje-input-background-color);\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            border-width: var(--wje-input-border-width);\n            border-style: var(--wje-input-border-style);\n            border-color: var(--wje-input-border-color);\n            padding-inline: 0;\n            padding-top: 0.25rem;\n            padding-bottom: 0.25rem;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            .input-wrapper {\n                padding-inline: 0.5rem;\n            }\n            &.focused {\n                border-color: var(--wje-input-border-color-focus) !important;\n                label {\n                    opacity: 0.67;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            input {\n                border: none;\n                height: 25px;\n                min-height: 25px;\n                padding: 0;\n                margin-top: -4px;\n                background: none;\n                box-shadow: none;\n                width: 100%;\n            }\n            label {\n                &.fade {\n                    opacity: 0.5;\n                    font-size: 12px;\n                    letter-spacing: normal;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-left: none;\n                border-top: none;\n                border-bottom: none;\n            }\n\n            ::slotted([slot='end']) {\n                border-right: none;\n                border-top: none;\n                border-bottom: none;\n            }\n        }\n        &.standard {\n            font-family: var(--wje-input-font-family);\n            position: relative;\n            border-radius: var(--wje-input-border-radius);\n            padding-inline: 0;\n            padding-top: 0;\n            padding-bottom: 0;\n            transition: background-color 0.2s ease;\n            cursor: text;\n            &.focused {\n                input {\n                    border-color: var(--wje-input-border-color-focus) !important;\n                }\n            }\n            input {\n                background-color: var(--wje-input-background-color);\n                display: block;\n                min-height: 32px;\n                padding-inline: 0.5rem;\n                padding-top: 0;\n                padding-bottom: 0;\n                /*background: none;*/\n                box-shadow: none;\n                width: 100%;\n                box-sizing: border-box;\n                border-radius: var(--wje-input-border-radius);\n                border-width: var(--wje-input-border-width);\n                border-style: var(--wje-input-border-style);\n                border-color: var(--wje-input-border-color);\n            }\n            .input-wrapper {\n                flex-wrap: nowrap;\n                &:hover .clear {\n                    visibility: visible;\n                }\n            }\n            ::slotted([slot='start']) {\n                border-right: none;\n                border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n            }\n\n            ::slotted([slot='end']) {\n                border-left: none;\n                border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n            }\n\n            &.has-start input {\n                border-top-left-radius: 0;\n                border-bottom-left-radius: 0;\n            }\n\n            &.has-end input {\n                border-top-right-radius: 0;\n                border-bottom-right-radius: 0;\n            }\n            slot[name='error'] {\n                position: static;\n\n                background: transparent;\n                padding: 0.25rem 0;\n                left: auto;\n                transform: none;\n                color: var(--wje-input-color-invalid);\n                font-size: 12px;\n                line-height: normal;\n            }\n        }\n    }\n}\n\n:host([type=hidden]) {\n    margin: 0;\n    .native-input {\n        padding: 0;\n        border-width: 0;\n    }\n}\n\n.clear {\n    visibility: hidden;\n    position: absolute;\n    right: var(--wje-input-clear-inline-end, 0);\n    top: 3px;\n    --wje-padding-top: 0.25rem;\n    --wje-padding-start: 0.25rem;\n    --wje-padding-end: 0.25rem;\n    --wje-padding-bottom: 0.25rem;\n    --wje-button-margin-inline: 0 0.25rem;\n}\n\n:host([clearable]) .native-input.focused .clear,\n:host([clearable]) .input-wrapper:hover .clear {\n    visibility: visible;\n}\n\n:host([clearable][type='number']) .clear {\n    right: var(--wje-input-number-control-width, 1.75rem);\n}\n\n:host([required]) .wrapper::after {\n    color: var(--wje-input-color-invalid);\n    content: var(--wje-input-required-symbol);\n    font-size: 24px;\n    position: absolute;\n    right: 12px;\n    top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n    right: 13px;\n    top: -20px;\n}\n\n:host([invalid]) {\n    .default {\n        label {\n            opacity: 1 !important;\n            color: var(--wje-input-color-invalid) !important;\n            animation-name: shake;\n            animation-duration: 0.4s;\n            animation-iteration-count: 1;\n        }\n    }\n}\n\n::slotted([slot='start']),\n::slotted([slot='end']) {\n    display: flex;\n    align-items: center;\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    padding-inline: var(--wje-input-slot-padding-inline);\n}\n\n:host(.options-show) ::slotted([slot='start']) {\n    border-bottom-left-radius: 0 !important;\n}\n\n:host(.options-show) ::slotted([slot='end']) {\n    border-bottom-right-radius: 0 !important;\n}\n\nslot[name='start'],\nslot[name='end'] {\n    display: flex;\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\n:host([disabled]) input {\n    opacity: 0.5;\n}\n\ninput {\n    background-color: var(--wje-input-background-color);\n    border-width: var(--wje-input-border-width);\n    border-style: var(--wje-input-border-style);\n    border-color: var(--wje-input-border-color);\n    color: var(--wje-input-color);\n    appearance: none;\n    outline: 0;\n    padding: 0.25rem 0.5rem;\n    line-height: var(--wje-input-line-height);\n    font-size: 14px;\n    font-weight: normal;\n    vertical-align: middle;\n    min-height: 32px;\n}\n\n:host([clearable]) .native-input input {\n    box-sizing: border-box;\n    padding-inline-end: calc(var(--wje-input-clear-inline-end, 0px) + var(--wje-input-clear-size) + var(--wje-input-clear-gap));\n}\n\n:host([clearable][type='number']) .native-input input {\n    padding-inline-end: calc(var(--wje-input-number-control-width, 1.75rem) + var(--wje-input-clear-size) + var(--wje-input-clear-gap));\n}\n\nslot[name='error'] {\n    display: none;\n    position: absolute;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    background-color: var(--wje-input-error-background-color, var(--wje-tooltip-background));\n    padding: 0.25rem 0.5rem;\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--wje-input-error-color, var(--wje-tooltip-color));\n    font-size: var(--wje-font-size-small);\n    width: max-content;\n    line-height: normal;\n}\n\n@keyframes shake {\n    8%,\n    41% {\n        transform: translateX(-4px);\n    }\n    25%,\n    58% {\n        transform: translateX(4px);\n    }\n    75% {\n        transform: translateX(-2px);\n    }\n    92% {\n        transform: translateX(2px);\n    }\n    0%,\n    100% {\n        transform: translateX(0);\n    }\n}\n";
 const _Input = class _Input extends FormAssociatedElement {
   /**
    * Creates an instance of Input.