wj-elements 0.7.6 → 0.8.0

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\nconst MANAGED_ITEM_ATTRIBUTE = 'data-wje-breadcrumbs-item';\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['text', 'back', 'parent-title', 'menu-title', 'sheet']);\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 * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, title?: 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 * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu, or \"text\", \"back\", \"parent-title\", \"menu-title\", and \"sheet\" for compact breakpoint menu layouts.\n * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.\n * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.\n * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.\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     * @param {string} value Collapsed indicator variant.\n     */\n    set collapsedVariant(value) {\n        if (value) this.setAttribute('collapsed-variant', value);\n        else this.removeAttribute('collapsed-variant');\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     * Gets the collapsed indicator variant as a normalized token.\n     * @returns {string}\n     */\n    get normalizedCollapsedVariant() {\n        return String(this.collapsedVariant || '').trim().toLowerCase();\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     * Sets the collapse behavior used below the configured breakpoint.\n     * @param {string} value Collapse behavior.\n     */\n    set breakpointCollapse(value) {\n        if (value) this.setAttribute('breakpoint-collapse', value);\n        else this.removeAttribute('breakpoint-collapse');\n    }\n\n    /**\n     * Gets the collapse behavior used below the configured breakpoint.\n     * @returns {string}\n     */\n    get breakpointCollapse() {\n        return (this.getAttribute('breakpoint-collapse') || 'items').toLowerCase();\n    }\n\n    /**\n     * Sets the icon used by the default breakpoint menu trigger.\n     * @param {string} value Icon name.\n     */\n    set breakpointCollapseIcon(value) {\n        if (value) this.setAttribute('breakpoint-collapse-icon', value);\n        else this.removeAttribute('breakpoint-collapse-icon');\n    }\n\n    /**\n     * Gets the icon used by the default breakpoint menu trigger.\n     * @returns {string}\n     */\n    get breakpointCollapseIcon() {\n        return this.getAttribute('breakpoint-collapse-icon') || '';\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 [\n            'breakpoint',\n            'breakpoint-collapse',\n            'max-items',\n            'items-before-collapse',\n            'items-after-collapse',\n            'collapsed-variant',\n            'breakpoint-collapse-icon',\n            'variant',\n            'aria-label',\n            'aria-labelledby',\n        ];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n        this.upgradeProperty('items');\n\n        if (!this._hasItemsValue && this.hasAttribute('items')) {\n            this.items = this.getAttribute('items');\n        }\n    }\n\n    /**\n     * Handles attribute changes that affect light-DOM breadcrumb indicators.\n     * @param {string} name Updated attribute.\n     * @param {string|null} oldValue Previous value.\n     * @param {string|null} newValue Next value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'aria-label' || name === 'aria-labelledby') {\n            this.syncAria();\n        }\n\n        if (name === 'collapsed-variant' || name === 'variant' || name === 'breakpoint-collapse' || name === 'breakpoint-collapse-icon') {\n            this.updateCollapse();\n            this.refreshCollapsedIndicators();\n        }\n    }\n\n    /**\n     * Syncs host navigation semantics while preserving user-provided names.\n     */\n    syncAria() {\n        this.setAriaState({ role: 'navigation' });\n\n        const label = this.getAttribute('aria-label');\n        const hasLabelledBy = this.hasAttribute('aria-labelledby');\n\n        if (!label && !hasLabelledBy) {\n            this.setAriaState({ label: 'Breadcrumb' });\n        } else if (hasLabelledBy && label === 'Breadcrumb') {\n            this.removeAttribute('aria-label');\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            title: source.title === null || source.title === undefined ? null : String(source.title),\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, 'title', record.title);\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 shouldCollapseToMenu =\n            this.isBreakpointMenuCollapseActive() &&\n            (breadcrumbs.length > 1 || this.usesMobileCollapsedVariant());\n\n        if (shouldCollapseToMenu) {\n            this.applyMenuCollapse(breadcrumbs);\n            return;\n        }\n\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldUseItemCollapse = this.breakpointCollapse === 'menu' || this._isCollapsedByBreakpoint;\n        const shouldCollapse =\n            shouldUseItemCollapse &&\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            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', false);\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        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Collapses the whole breadcrumb trail into a single menu indicator.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    applyMenuCollapse(breadcrumbs) {\n        const lastIndex = breadcrumbs.length - 1;\n        const usesMobileVariant = this.usesMobileCollapsedVariant();\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            const isIndicator = index === 0;\n\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', isIndicator);\n            this.syncManagedAttribute(breadcrumb, 'collapsed', true);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', isIndicator && usesMobileVariant);\n\n            if (isIndicator) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n\n        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Returns whether the active breakpoint mode should move the full trail into one menu.\n     * @returns {boolean}\n     */\n    isBreakpointMenuCollapseActive() {\n        return Boolean(\n            this.getBreakpointWidth() &&\n            this._isCollapsedByBreakpoint &&\n            this.breakpointCollapse === 'menu'\n        );\n    }\n\n    /**\n     * Returns whether the active collapsed variant is one of the mobile compact layouts.\n     * @returns {boolean}\n     */\n    usesMobileCollapsedVariant() {\n        return MOBILE_COLLAPSED_VARIANTS.has(this.normalizedCollapsedVariant);\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('mobile-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     * Redraws active collapsed indicators when parent-only rendering inputs change.\n     */\n    refreshCollapsedIndicators() {\n        this.getBreadcrumbs()\n            .filter((breadcrumb) => breadcrumb.hasAttribute('show-collapsed-indicator'))\n            .forEach((breadcrumb) => breadcrumb.refresh?.());\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     * Returns the custom trigger element configured for breakpoint menu collapse.\n     * @returns {Element|null}\n     */\n    getBreakpointCollapseTrigger() {\n        return Array.from(this.children)\n            .find((child) => child.getAttribute?.('slot') === 'breakpoint-collapse-trigger') || 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":"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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';\nconst MOBILE_COLLAPSED_VARIANTS = new Set(['text', 'back', 'parent-title', 'menu-title', 'sheet']);\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 * @slot breakpoint-collapse-trigger - Custom trigger used when breakpoint-collapse=\"menu\" moves the full trail into a dropdown.\n * @csspart container - The component's container wrapper.\n * @property {Array<{id: string|number, label: string, href?: string, icon?: string, title?: 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 * @attribute {string} collapsed-variant - The UI used for collapsed breadcrumbs. Use \"dropdown\" to render a menu, or \"text\", \"back\", \"parent-title\", \"menu-title\", and \"sheet\" for compact breakpoint menu layouts.\n * @attribute {string} breakpoint - The viewport breakpoint where collapsing starts.\n * @attribute {string} breakpoint-collapse - The collapse behavior used below the breakpoint. Use \"menu\" to put the whole trail into one menu.\n * @attribute {string} breakpoint-collapse-icon - Icon used by the default breakpoint menu trigger.\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     * @param {string} value Collapsed indicator variant.\n     */\n    set collapsedVariant(value) {\n        if (value) this.setAttribute('collapsed-variant', value);\n        else this.removeAttribute('collapsed-variant');\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     * Gets the collapsed indicator variant as a normalized token.\n     * @returns {string}\n     */\n    get normalizedCollapsedVariant() {\n        return String(this.collapsedVariant || '').trim().toLowerCase();\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     * Sets the collapse behavior used below the configured breakpoint.\n     * @param {string} value Collapse behavior.\n     */\n    set breakpointCollapse(value) {\n        if (value) this.setAttribute('breakpoint-collapse', value);\n        else this.removeAttribute('breakpoint-collapse');\n    }\n\n    /**\n     * Gets the collapse behavior used below the configured breakpoint.\n     * @returns {string}\n     */\n    get breakpointCollapse() {\n        return (this.getAttribute('breakpoint-collapse') || 'items').toLowerCase();\n    }\n\n    /**\n     * Sets the icon used by the default breakpoint menu trigger.\n     * @param {string} value Icon name.\n     */\n    set breakpointCollapseIcon(value) {\n        if (value) this.setAttribute('breakpoint-collapse-icon', value);\n        else this.removeAttribute('breakpoint-collapse-icon');\n    }\n\n    /**\n     * Gets the icon used by the default breakpoint menu trigger.\n     * @returns {string}\n     */\n    get breakpointCollapseIcon() {\n        return this.getAttribute('breakpoint-collapse-icon') || '';\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 [\n            'breakpoint',\n            'breakpoint-collapse',\n            'max-items',\n            'items-before-collapse',\n            'items-after-collapse',\n            'collapsed-variant',\n            'breakpoint-collapse-icon',\n            'variant',\n            'aria-label',\n            'aria-labelledby',\n        ];\n    }\n\n    /**\n     * Setup attributes for the Breadcrumbs element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n        this.upgradeProperty('items');\n\n        if (!this._hasItemsValue && this.hasAttribute('items')) {\n            this.items = this.getAttribute('items');\n        }\n    }\n\n    /**\n     * Handles attribute changes that affect light-DOM breadcrumb indicators.\n     * @param {string} name Updated attribute.\n     * @param {string|null} oldValue Previous value.\n     * @param {string|null} newValue Next value.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (oldValue === newValue) return;\n\n        super.attributeChangedCallback?.(name, oldValue, newValue);\n\n        if (name === 'aria-label' || name === 'aria-labelledby') {\n            this.syncAria();\n        }\n\n        if (name === 'collapsed-variant' || name === 'variant' || name === 'breakpoint-collapse' || name === 'breakpoint-collapse-icon') {\n            this.updateCollapse();\n            this.refreshCollapsedIndicators();\n        }\n    }\n\n    /**\n     * Syncs host navigation semantics while preserving user-provided names.\n     */\n    syncAria() {\n        this.setAriaState({ role: 'navigation' });\n\n        const label = this.getAttribute('aria-label');\n        const hasLabelledBy = this.hasAttribute('aria-labelledby');\n\n        if (!label && !hasLabelledBy) {\n            this.setAriaState({ label: 'Breadcrumb' });\n        } else if (hasLabelledBy && label === 'Breadcrumb') {\n            this.removeAttribute('aria-label');\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            title: source.title === null || source.title === undefined ? null : String(source.title),\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, 'title', record.title);\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 shouldCollapseToMenu =\n            this.isBreakpointMenuCollapseActive() &&\n            (breadcrumbs.length > 1 || this.usesMobileCollapsedVariant());\n\n        if (shouldCollapseToMenu) {\n            this.applyMenuCollapse(breadcrumbs);\n            return;\n        }\n\n        const effectiveItemsAfterCollapse = this.itemsAfterCollapse;\n        const shouldUseItemCollapse = this.breakpointCollapse === 'menu' || this._isCollapsedByBreakpoint;\n        const shouldCollapse =\n            shouldUseItemCollapse &&\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            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', false);\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        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Collapses the whole breadcrumb trail into a single menu indicator.\n     * @param {Array<Element>} breadcrumbs Breadcrumb items.\n     */\n    applyMenuCollapse(breadcrumbs) {\n        const lastIndex = breadcrumbs.length - 1;\n        const usesMobileVariant = this.usesMobileCollapsedVariant();\n\n        breadcrumbs.forEach((breadcrumb, index) => {\n            const isIndicator = index === 0;\n\n            this.syncManagedAttribute(breadcrumb, 'last', index === lastIndex);\n            this.syncManagedAttribute(breadcrumb, 'show-collapsed-indicator', isIndicator);\n            this.syncManagedAttribute(breadcrumb, 'collapsed', true);\n            this.syncManagedAttribute(breadcrumb, 'mobile-collapsed-indicator', isIndicator && usesMobileVariant);\n\n            if (isIndicator) {\n                breadcrumb.classList.remove('collapsed');\n            }\n        });\n\n        this.refreshCollapsedIndicators();\n    }\n\n    /**\n     * Returns whether the active breakpoint mode should move the full trail into one menu.\n     * @returns {boolean}\n     */\n    isBreakpointMenuCollapseActive() {\n        return Boolean(\n            this.getBreakpointWidth() &&\n            this._isCollapsedByBreakpoint &&\n            this.breakpointCollapse === 'menu'\n        );\n    }\n\n    /**\n     * Returns whether the active collapsed variant is one of the mobile compact layouts.\n     * @returns {boolean}\n     */\n    usesMobileCollapsedVariant() {\n        return MOBILE_COLLAPSED_VARIANTS.has(this.normalizedCollapsedVariant);\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('mobile-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     * Redraws active collapsed indicators when parent-only rendering inputs change.\n     */\n    refreshCollapsedIndicators() {\n        this.getBreadcrumbs()\n            .filter((breadcrumb) => breadcrumb.hasAttribute('show-collapsed-indicator'))\n            .forEach((breadcrumb) => breadcrumb.refresh?.());\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     * Returns the custom trigger element configured for breakpoint menu collapse.\n     * @returns {Element|null}\n     */\n    getBreakpointCollapseTrigger() {\n        return Array.from(this.children)\n            .find((child) => child.getAttribute?.('slot') === 'breakpoint-collapse-trigger') || 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":["MANAGED_ITEM_ATTRIBUTE","MOBILE_COLLAPSED_VARIANTS","Set","Breadcrumbs","WJElement","super","className","this","last","_isCollapsedByBreakpoint","_items","_itemRecords","_hasItemsValue","handleManagedItemClick","e","dispatchManagedItemClick","value","records","normalizeItems","map","record","item","syncItems","items","setAttribute","variant","getAttribute","removeAttribute","String","collapsedVariant","trim","toLowerCase","breakpointCollapseIcon","maxItems","itemsAfterCollapse","hasAttribute","derivedItemsAfterCollapse","itemsBeforeCollapse","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","syncAria","upgradeProperty","name","oldValue","newValue","attributeChangedCallback","updateCollapse","refreshCollapsedIndicators","setAriaState","role","label","hasLabelledBy","draw","fragment","document","createDocumentFragment","element","createElement","appendChild","defaultSlot","afterDraw","onSlotChange","addEventListener","handleResize","handleBreakpointResize","getBreakpointWidth","window","length","getManagedBreadcrumbs","afterDisconnect","removeEventListener","property","Object","prototype","hasOwnProperty","call","JSON","parse","console","warn","Array","isArray","usedKeys","index","normalizeItem","source","id","key","getItemKey","href","icon","title","disabled","baseKey","suffix","has","add","managed","managedByKey","Map","breadcrumb","__wjeBreadcrumbKey","nextKeys","forEach","remove","referenceNode","firstChild","get","signature","getItemStructureSignature","__wjeBreadcrumbSignature","previousBreadcrumb","replacement","createItemElement","replaceWith","updateItemElement","insertBefore","nextSibling","__wjeBreadcrumbManaged","__wjeBreadcrumbItem","__wjeBreadcrumbIndex","syncItemAttribute","syncBooleanItemAttribute","syncItemContent","normalizedValue","isEnabled","__wjeBreadcrumbIcon","parentElement","labelNode","__wjeBreadcrumbLabelNode","parentNode","createTextNode","textContent","getManagedBreadcrumbFromEvent","preventDefault","stopPropagation","stopImmediatePropagation","itemClickEvent","CustomEvent","detail","originalEvent","bubbles","composed","cancelable","dispatchEvent","composedPath","find","node","nodeType","Node","ELEMENT_NODE","tagName","nextState","shouldApplyBreakpointCollapse","breadcrumbs","getBreadcrumbs","isBreakpointMenuCollapseActive","usesMobileCollapsedVariant","applyMenuCollapse","effectiveItemsAfterCollapse","shouldCollapse","breakpointCollapse","lastIndex","indicatorIndex","collapseStart","collapseEnd","syncManagedAttribute","isCollapsed","classList","contains","usesMobileVariant","isIndicator","Boolean","normalizedCollapsedVariant","filter","refresh","breakpointWidth","innerWidth","breakpoint","token","cssValue","getComputedStyle","getPropertyValue","namedBreakpoint","BREAKPOINTS","cssNumber","parseFloat","Number","isFinite","directNumber","getBreakpointCollapseTrigger","from","children","child","querySelectorAll","getBreadcrumbsCollapsed","static","sm","md","lg","xl","xxl","define"],"mappings":"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"}

package/dist/wje-button-group.js

@@ -1,192 +1,87 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
-import { event } from "./event.js";
-const styles = "/*\n[ WJ Button Group ]\n*/\n\n:host {\n    --wje-button-outline-width: 0;\n    --wje-button-border-color: transparent;\n    display: inline-block;\n    .native-button-group {\n        position: relative;\n    }\n    .wje-button-group-content {\n        display: flex;\n        flex-wrap: nowrap;\n        slot {\n            display: contents;\n        }\n    }\n    .wje-button-group-border {\n        top: 0;\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-button-group-border-radius);\n        border-width: var(--wje-button-group-border-width);\n        border-style: var(--wje-button-group-border-style);\n        border-color: var(--wje-button-group-border-color);\n    }\n}\n\n:host([round]) {\n    .wje-button-group-border {\n        --wje-button-group-border-radius: var(--wje-border-radius-pill);\n    }\n}\n\n::slotted(wje-button) {\n    margin: 0 !important;\n}\n";
-class ButtonGroup extends WJElement {
-  /**
-   * ButtonGroup constructor method.
-   * @class
-   */
+import t from "./wje-element.js";
+import { event as e } from "./event.js";
+class r extends t {
   constructor() {
     super();
-    /**
-     * Class name for the ButtonGroup element
-     * @type {string}
-     */
     __publicField(this, "className", "ButtonGroup");
   }
-  /**
-   * Sets the "active" attribute to indicate the active state.
-   * @param {boolean|string|number} value The value to set for the "active" attribute, indicating the active state.
-   */
-  set active(value) {
-    this.setAttribute("active", value);
-  }
-  /**
-   * Retrieves the value of the 'active' attribute.
-   * If the attribute is not set, it returns false.
-   * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.
-   */
+  set active(t2) {
+    this.setAttribute("active", t2);
+  }
   get active() {
     return +this.getAttribute("active") || false;
   }
-  /**
-   * Sets the color attribute of the element.
-   * @param {string} value The value to set for the color attribute.
-   */
-  set color(value) {
-    this.setAttribute("color", value);
-  }
-  /**
-   * Retrieves the current value of the 'color' attribute.
-   * If the 'color' attribute is not set, it defaults to 'primary'.
-   * @returns {string} The value of the 'color' attribute or the default value 'primary'.
-   */
+  set color(t2) {
+    this.setAttribute("color", t2);
+  }
   get color() {
     return this.getAttribute("color") || "primary";
   }
-  /**
-   * Sets the round attribute for the element.
-   * @param {string} value The value to set for the round attribute.
-   */
-  set round(value) {
-    this.setAttribute("round", value);
-  }
-  /**
-   * Returns whether the element has the 'round' attribute.
-   * @returns {boolean} True if the 'round' attribute is present, otherwise false.
-   */
+  set round(t2) {
+    this.setAttribute("round", t2);
+  }
   get round() {
     return this.hasAttribute("round");
   }
-  /**
-   * Sets the 'fill' attribute of the element.
-   * @param {string} value The value to assign to the 'fill' attribute.
-   */
-  set fill(value) {
-    this.setAttribute("fill", value);
-  }
-  /**
-   * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,
-   * it returns the default value 'link'.
-   * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.
-   */
+  set fill(t2) {
+    this.setAttribute("fill", t2);
+  }
   get fill() {
     return this.getAttribute("fill") || "link";
   }
-  /**
-   * Get CSS stylesheet for the ButtonGroup element.
-   * @static
-   * @returns {object} styles - The CSS styles
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ":host{--wje-button-outline-width: 0;--wje-button-border-color: transparent;display:inline-block}:host .native-button-group{position:relative}:host .wje-button-group-content{display:flex;flex-wrap:nowrap}:host .wje-button-group-content slot{display:contents}:host .wje-button-group-border{top:0;position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:var(--wje-button-group-border-radius);border-width:var(--wje-button-group-border-width);border-style:var(--wje-button-group-border-style);border-color:var(--wje-button-group-border-color)}:host([round]) .wje-button-group-border{--wje-button-group-border-radius: var(--wje-border-radius-pill)}::slotted(wje-button){margin:0!important}";
   }
-  /**
-   * Get observed attributes for the ButtonGroup element.
-   * @static
-   * @returns {Array<string>} observedAttributes - The observed attributes array
-   */
   static get observedAttributes() {
     return [];
   }
-  /**
-   * Setup attributes for the ButtonGroup element.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draw method for the ButtonGroup element.
-   * @returns {object} fragment - The document fragment
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.classList.add("native-button-group");
-    element.setAttribute("part", "native");
-    let content = document.createElement("div");
-    content.classList.add("wje-button-group-content");
-    let border = document.createElement("div");
-    border.classList.add("wje-button-group-border");
-    let slot = document.createElement("slot");
-    content.append(slot);
-    element.append(border);
-    element.append(content);
-    fragment.append(element);
-    this.slotElement = slot;
-    return fragment;
-  }
-  /**
-   * After draw method for the ButtonGroup element.
-   */
+    let t2 = document.createDocumentFragment(), e2 = document.createElement("div");
+    e2.classList.add("native-button-group"), e2.setAttribute("part", "native");
+    let r2 = document.createElement("div");
+    r2.classList.add("wje-button-group-content");
+    let o = document.createElement("div");
+    o.classList.add("wje-button-group-border");
+    let i = document.createElement("slot");
+    return r2.append(i), e2.append(o), e2.append(r2), t2.append(e2), this.slotElement = i, t2;
+  }
   afterDraw() {
     this.syncAria();
-    const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];
-    slottedElements.forEach((el) => {
-      let index = slottedElements.indexOf(el);
-      let button = this.findButton(el);
-      if (button) {
-        button.setAttribute("fill", this.fill);
-        if (this.round) {
-          button.round = true;
-        }
-        event.addListener(button, "wje-button:click", null, (e) => {
-          this.toggle(e.target, slottedElements, index);
-        });
-        if (this.active && this.active === index + 1) {
-          this.updateButtonState(button, "fill");
-        }
-      }
+    const t2 = [...this.slotElement.assignedElements({ flatten: true })];
+    t2.forEach((r2) => {
+      let o = t2.indexOf(r2), i = this.findButton(r2);
+      i && (i.setAttribute("fill", this.fill), this.round && (i.round = true), e.addListener(i, "wje-button:click", null, (e2) => {
+        this.toggle(e2.target, t2, o);
+      }), this.active && this.active === o + 1 && this.updateButtonState(i, "fill"));
     });
   }
-  /**
-   * Sync ARIA attributes on host.
-   */
   syncAria() {
-    if (!this.hasAttribute("role")) {
-      this.setAriaState({ role: "group" });
-    }
-  }
-  /**
-   * Find button method to find the button element.
-   * @param {object} el The element
-   * @returns {object} button - The button element
-   */
-  findButton(el) {
-    const selector = "wje-button";
-    return el.closest(selector) ?? el.querySelector(selector);
-  }
-  /**
-   * Toggles the state of a group of buttons based on the active button.
-   * @param {object} activeButton The button that is currently active.
-   * @param {Array<object>} buttons An array of button objects to be toggled.
-   * @returns {void} This method does not return a value.
-   */
-  toggle(activeButton, buttons, index) {
-    this.active = index + 1;
-    buttons.forEach((button) => {
-      const mode = button === activeButton ? "fill" : "color";
-      this.updateButtonState(button, mode);
+    this.hasAttribute("role") || this.setAriaState({ role: "group" });
+  }
+  findButton(t2) {
+    const e2 = "wje-button";
+    return t2.closest(e2) ?? t2.querySelector(e2);
+  }
+  toggle(t2, e2, r2) {
+    this.active = r2 + 1, e2.forEach((e3) => {
+      const r3 = e3 === t2 ? "fill" : "color";
+      this.updateButtonState(e3, r3);
     });
   }
-  /**
-   * Updates the state of a button by removing one mode attribute and setting another mode attribute.
-   * @param {HTMLElement} button The button element whose state is to be updated.
-   * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.
-   * @returns {void}
-   */
-  updateButtonState(button, modeToRemove) {
-    button.removeAttribute(modeToRemove);
-    const modeToSet = modeToRemove === "color" ? "fill" : "color";
-    button.setAttribute(modeToSet, this[modeToSet]);
+  updateButtonState(t2, e2) {
+    t2.removeAttribute(e2);
+    const r2 = "color" === e2 ? "fill" : "color";
+    t2.setAttribute(r2, this[r2]);
   }
 }
-WJElement.define("wje-button-group", ButtonGroup);
+t.define("wje-button-group", r);
 export {
-  ButtonGroup as default
+  r as default
 };
 //# sourceMappingURL=wje-button-group.js.map

package/dist/wje-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n */\n\nexport default class ButtonGroup extends WJElement {\n    /**\n     * ButtonGroup constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the \"active\" attribute to indicate the active state.\n     * @param {boolean|string|number} value The value to set for the \"active\" attribute, indicating the active state.\n     */\n    set active(value) {\n        this.setAttribute('active', value);\n    }\n\n    /**\n     * Retrieves the value of the 'active' attribute.\n     * If the attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.\n     */\n    get active() {\n        return +this.getAttribute('active') || false;\n    }\n\n    /**\n     * Sets the color attribute of the element.\n     * @param {string} value The value to set for the color attribute.\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Retrieves the current value of the 'color' attribute.\n     * If the 'color' attribute is not set, it defaults to 'primary'.\n     * @returns {string} The value of the 'color' attribute or the default value 'primary'.\n     */\n    get color() {\n        return this.getAttribute('color') || 'primary';\n    }\n\n    /**\n     * Sets the round attribute for the element.\n     * @param {string} value The value to set for the round attribute.\n     */\n    set round(value) {\n        this.setAttribute('round', value);\n    }\n\n    /**\n     * Returns whether the element has the 'round' attribute.\n     * @returns {boolean} True if the 'round' attribute is present, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the 'fill' attribute of the element.\n     * @param {string} value The value to assign to the 'fill' attribute.\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\n     * it returns the default value 'link'.\n     * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'link';\n    }\n\n    /**\n     * Class name for the ButtonGroup element\n     * @type {string}\n     */\n    className = 'ButtonGroup';\n\n    /**\n     * Get CSS stylesheet for the ButtonGroup 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 ButtonGroup element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the ButtonGroup element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draw method for the ButtonGroup element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.classList.add('native-button-group');\n        element.setAttribute('part', 'native');\n\n        let content = document.createElement('div');\n        content.classList.add('wje-button-group-content');\n\n        let border = document.createElement('div');\n        border.classList.add('wje-button-group-border');\n\n        let slot = document.createElement('slot');\n\n        content.append(slot);\n\n        element.append(border);\n        element.append(content);\n\n        fragment.append(element);\n\n        this.slotElement = slot;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the ButtonGroup element.\n     */\n    afterDraw() {\n        this.syncAria();\n        const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n        slottedElements.forEach((el) => {\n            let index = slottedElements.indexOf(el);\n            let button = this.findButton(el);\n            if (button) {\n                button.setAttribute('fill', this.fill);\n                if(this.round) {\n                    button.round = true;\n                }\n\n                event.addListener(button, 'wje-button:click', null,(e) => {\n                    this.toggle(e.target, slottedElements, index);\n                });\n\n                if(this.active && this.active === index + 1) {\n                    this.updateButtonState(button, 'fill')\n                }\n            }\n        });\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n    }\n\n    /**\n     * Find button method to find the button element.\n     * @param {object} el The element\n     * @returns {object} button - The button element\n     */\n    findButton(el) {\n        const selector = 'wje-button';\n\n        return el.closest(selector) ?? el.querySelector(selector);\n    }\n\n    /**\n     * Toggles the state of a group of buttons based on the active button.\n     * @param {object} activeButton The button that is currently active.\n     * @param {Array<object>} buttons An array of button objects to be toggled.\n     * @returns {void} This method does not return a value.\n     */\n    toggle(activeButton, buttons, index) {\n        this.active = index + 1;\n        buttons.forEach(button => {\n            const mode = button === activeButton ? 'fill' : 'color';\n            this.updateButtonState(button, mode);\n        });\n    }\n\n    /**\n     * Updates the state of a button by removing one mode attribute and setting another mode attribute.\n     * @param {HTMLElement} button The button element whose state is to be updated.\n     * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.\n     * @returns {void}\n     */\n    updateButtonState(button, modeToRemove) {\n        button.removeAttribute(modeToRemove);\n\n        const modeToSet = modeToRemove === 'color' ? 'fill' : 'color';\n        button.setAttribute(modeToSet, this[modeToSet]);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export * from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-button-group.js","sources":["../packages/wje-button-group/button-group.element.js","../packages/wje-button-group/button-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary ButtonGroup class\n * @class\n * @augments WJElement\n * @csspart native - The component's native wrapper.\n * @slot - The button group main content.\n * @csspart native - The component's native wrapper.\n */\n\nexport default class ButtonGroup extends WJElement {\n    /**\n     * ButtonGroup constructor method.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the \"active\" attribute to indicate the active state.\n     * @param {boolean|string|number} value The value to set for the \"active\" attribute, indicating the active state.\n     */\n    set active(value) {\n        this.setAttribute('active', value);\n    }\n\n    /**\n     * Retrieves the value of the 'active' attribute.\n     * If the attribute is not set, it returns false.\n     * @returns {string|boolean} The value of the 'active' attribute or false if it is not set.\n     */\n    get active() {\n        return +this.getAttribute('active') || false;\n    }\n\n    /**\n     * Sets the color attribute of the element.\n     * @param {string} value The value to set for the color attribute.\n     */\n    set color(value) {\n        this.setAttribute('color', value);\n    }\n\n    /**\n     * Retrieves the current value of the 'color' attribute.\n     * If the 'color' attribute is not set, it defaults to 'primary'.\n     * @returns {string} The value of the 'color' attribute or the default value 'primary'.\n     */\n    get color() {\n        return this.getAttribute('color') || 'primary';\n    }\n\n    /**\n     * Sets the round attribute for the element.\n     * @param {string} value The value to set for the round attribute.\n     */\n    set round(value) {\n        this.setAttribute('round', value);\n    }\n\n    /**\n     * Returns whether the element has the 'round' attribute.\n     * @returns {boolean} True if the 'round' attribute is present, otherwise false.\n     */\n    get round() {\n        return this.hasAttribute('round');\n    }\n\n    /**\n     * Sets the 'fill' attribute of the element.\n     * @param {string} value The value to assign to the 'fill' attribute.\n     */\n    set fill(value) {\n        this.setAttribute('fill', value);\n    }\n\n    /**\n     * Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set,\n     * it returns the default value 'link'.\n     * @returns {string} The value of the 'fill' attribute, or 'link' if the attribute is not present.\n     */\n    get fill() {\n        return this.getAttribute('fill') || 'link';\n    }\n\n    /**\n     * Class name for the ButtonGroup element\n     * @type {string}\n     */\n    className = 'ButtonGroup';\n\n    /**\n     * Get CSS stylesheet for the ButtonGroup 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 ButtonGroup element.\n     * @static\n     * @returns {Array<string>} observedAttributes - The observed attributes array\n     */\n    static get observedAttributes() {\n        return [];\n    }\n\n    /**\n     * Setup attributes for the ButtonGroup element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        this.syncAria();\n    }\n\n    /**\n     * Draw method for the ButtonGroup element.\n     * @returns {object} fragment - The document fragment\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.classList.add('native-button-group');\n        element.setAttribute('part', 'native');\n\n        let content = document.createElement('div');\n        content.classList.add('wje-button-group-content');\n\n        let border = document.createElement('div');\n        border.classList.add('wje-button-group-border');\n\n        let slot = document.createElement('slot');\n\n        content.append(slot);\n\n        element.append(border);\n        element.append(content);\n\n        fragment.append(element);\n\n        this.slotElement = slot;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the ButtonGroup element.\n     */\n    afterDraw() {\n        this.syncAria();\n        const slottedElements = [...this.slotElement.assignedElements({ flatten: true })];\n\n        slottedElements.forEach((el) => {\n            let index = slottedElements.indexOf(el);\n            let button = this.findButton(el);\n            if (button) {\n                button.setAttribute('fill', this.fill);\n                if(this.round) {\n                    button.round = true;\n                }\n\n                event.addListener(button, 'wje-button:click', null,(e) => {\n                    this.toggle(e.target, slottedElements, index);\n                });\n\n                if(this.active && this.active === index + 1) {\n                    this.updateButtonState(button, 'fill')\n                }\n            }\n        });\n    }\n\n    /**\n     * Sync ARIA attributes on host.\n     */\n    syncAria() {\n        if (!this.hasAttribute('role')) {\n            this.setAriaState({ role: 'group' });\n        }\n    }\n\n    /**\n     * Find button method to find the button element.\n     * @param {object} el The element\n     * @returns {object} button - The button element\n     */\n    findButton(el) {\n        const selector = 'wje-button';\n\n        return el.closest(selector) ?? el.querySelector(selector);\n    }\n\n    /**\n     * Toggles the state of a group of buttons based on the active button.\n     * @param {object} activeButton The button that is currently active.\n     * @param {Array<object>} buttons An array of button objects to be toggled.\n     * @returns {void} This method does not return a value.\n     */\n    toggle(activeButton, buttons, index) {\n        this.active = index + 1;\n        buttons.forEach(button => {\n            const mode = button === activeButton ? 'fill' : 'color';\n            this.updateButtonState(button, mode);\n        });\n    }\n\n    /**\n     * Updates the state of a button by removing one mode attribute and setting another mode attribute.\n     * @param {HTMLElement} button The button element whose state is to be updated.\n     * @param {string} modeToRemove The mode attribute to be removed from the button. Expected values are 'color' or 'fill'.\n     * @returns {void}\n     */\n    updateButtonState(button, modeToRemove) {\n        button.removeAttribute(modeToRemove);\n\n        const modeToSet = modeToRemove === 'color' ? 'fill' : 'color';\n        button.setAttribute(modeToSet, this[modeToSet]);\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport ButtonGroup from './button-group.element.js';\n\n// export * from \"./button-group.element.js\";\nexport default ButtonGroup;\n\nWJElement.define('wje-button-group', ButtonGroup);\n"],"names":["ButtonGroup","WJElement","constructor","super","className","value","this","setAttribute","active","getAttribute","color","round","hasAttribute","cssStyleSheet","observedAttributes","setupAttributes","isShadowRoot","syncAria","draw","fragment","document","createDocumentFragment","element","createElement","classList","add","content","border","slot","append","slotElement","afterDraw","slottedElements","assignedElements","flatten","forEach","el","index","indexOf","button","findButton","fill","event","addListener","e","toggle","target","updateButtonState","setAriaState","role","selector","closest","querySelector","activeButton","buttons","mode","modeToRemove","removeAttribute","modeToSet","define"],"mappings":"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"}