le-kit 0.5.3 → 0.5.4

package/dist/collection/components/le-bar/le-bar.js

@@ -1,673 +0,0 @@
-import { h, Host, } from "@stencil/core";
-import { classnames, generateId } from "../../utils/utils";
-/**
- * A flexible bar component that handles overflow gracefully.
- *
- * Items are slotted children. The bar measures which items fit on the first
- * row and handles overflow according to the `overflow` prop.
- *
- * @slot - Bar items (children will be measured for overflow)
- * @slot more - Custom "more" button content
- * @slot hamburger - Custom hamburger button content
- * @slot start-arrow - Custom left scroll arrow
- * @slot end-arrow - Custom right scroll arrow
- * @slot all-menu - Custom "show all" menu button
- *
- * @csspart container - The main bar container
- * @csspart item - Individual items in the bar
- * @csspart more-button - The "more" overflow button
- * @csspart hamburger-button - The hamburger menu button
- * @csspart arrow-start - The start (left) scroll arrow
- * @csspart arrow-end - The end (right) scroll arrow
- * @csspart all-menu-button - The "show all" menu button
- * @csspart popover-content - The popover content wrapper
- *
- * @cmsEditable true
- * @cmsCategory Layout
- */
-export class LeBar {
-    constructor() {
-        /**
-         * Overflow behavior when items don't fit on one row.
-         * - `more`: Overflow items appear in a "more" dropdown
-         * - `scroll`: Items scroll horizontally with optional arrows
-         * - `hamburger`: All items go into a hamburger menu if any overflow
-         * - `wrap`: Items wrap to additional rows
-         */
-        this.overflow = 'more';
-        /**
-         * Alignment of items within the bar (maps to justify-content).
-         */
-        this.alignItems = 'start';
-        /**
-         * Show scroll arrows when overflow is "scroll".
-         */
-        this.arrows = false;
-        /**
-         * Disable the internal overflow popover.
-         * When true, the bar still detects overflow and hides items,
-         * but doesn't render its own popover. Use this when providing
-         * custom overflow handling via the leBarOverflowChange event.
-         */
-        this.disablePopover = false;
-        /**
-         * Minimum number of visible items required when using "more" overflow mode.
-         * If fewer items would be visible, the bar falls back to hamburger mode.
-         * Only applies when overflow is "more".
-         */
-        this.minVisibleItems = 0;
-        /**
-         * Show an "all items" menu button.
-         * - `false`: Don't show
-         * - `true` or `'end'`: Show at end
-         * - `'start'`: Show at start
-         */
-        this.showAllMenu = false;
-        /** Whether the hamburger/more popover is open */
-        this.popoverOpen = false;
-        /** Whether hamburger mode is active (for hamburger overflow) */
-        this.hamburgerActive = false;
-        /** IDs of items that are overflowing */
-        this.overflowingIds = new Set();
-        /** Whether we can scroll left */
-        this.canScrollStart = false;
-        /** Whether we can scroll right */
-        this.canScrollEnd = false;
-        /** Whether the all-menu popover is open */
-        this.allMenuOpen = false;
-        /** Current height of the items container (for overflow handling) */
-        this.containerHeight = null;
-        this.instanceId = generateId('le-bar');
-        // Map to track item elements and their IDs
-        this.itemMap = new Map();
-        // Prevent multiple recalculations in the same frame
-        this.pendingRecalc = null;
-        this.handleScroll = () => {
-            this.updateScrollState();
-        };
-        this.scrollToStart = () => {
-            if (!this.itemsContainerEl)
-                return;
-            const items = this.getSlottedItems();
-            const container = this.itemsContainerEl;
-            // Find the scroll position of the previous item
-            const currentScroll = container.scrollLeft;
-            let targetScroll = 0;
-            for (let i = items.length - 1; i >= 0; i--) {
-                const item = items[i];
-                // Calculate item's left edge relative to container's scroll position
-                const itemLeft = item.offsetLeft - container.offsetLeft;
-                // If this item starts before current scroll position, scroll to it
-                if (itemLeft < currentScroll - 1) {
-                    targetScroll = itemLeft;
-                    break;
-                }
-            }
-            container.scrollTo({ left: targetScroll, behavior: 'smooth' });
-            // Update scroll state after animation
-            setTimeout(() => this.updateScrollState(), 300);
-        };
-        this.scrollToEnd = () => {
-            if (!this.itemsContainerEl)
-                return;
-            const container = this.itemsContainerEl;
-            const items = this.getSlottedItems();
-            if (items.length === 0)
-                return;
-            const containerWidth = container.clientWidth;
-            const currentScroll = container.scrollLeft;
-            let targetScroll = container.scrollWidth - containerWidth;
-            for (const item of items) {
-                // Calculate item's right edge relative to container
-                const itemLeft = item.offsetLeft - container.offsetLeft;
-                // If this is the next item to scroll to from left to right then scroll to it
-                if (itemLeft > currentScroll + 1) {
-                    targetScroll = itemLeft;
-                    break;
-                }
-            }
-            container.scrollTo({ left: Math.max(0, targetScroll), behavior: 'smooth' });
-            // Update scroll state after animation
-            setTimeout(() => this.updateScrollState(), 300);
-        };
-        this.togglePopover = () => {
-            this.popoverOpen = !this.popoverOpen;
-        };
-        this.closePopover = () => {
-            this.popoverOpen = false;
-        };
-        this.toggleAllMenu = () => {
-            this.allMenuOpen = !this.allMenuOpen;
-        };
-        this.closeAllMenu = () => {
-            this.allMenuOpen = false;
-        };
-        this.handleItemClick = (_e, id) => {
-            // Close popover when an item inside is clicked
-            const originalItem = this.itemMap.get(id);
-            if (originalItem) {
-                // Clone the click to the original item
-                const cloneEvent = new MouseEvent('click', {
-                    bubbles: true,
-                    cancelable: true,
-                    view: window,
-                });
-                originalItem.dispatchEvent(cloneEvent);
-            }
-            this.closePopover();
-            this.closeAllMenu();
-        };
-    }
-    handleOverflowChange() {
-        this.resetOverflowState();
-        this.scheduleOverflowRecalc();
-    }
-    handleSlotChange() {
-        this.scheduleOverflowRecalc();
-    }
-    connectedCallback() {
-        this.setupObservers();
-    }
-    componentDidLoad() {
-        this.scheduleOverflowRecalc();
-    }
-    componentDidRender() {
-        // Recalculate after render in case children changed
-        this.scheduleOverflowRecalc();
-    }
-    disconnectedCallback() {
-        this.resizeObserver?.disconnect();
-        this.mutationObserver?.disconnect();
-    }
-    /**
-     * Force recalculation of overflow state.
-     */
-    async recalculate() {
-        this.computeOverflow();
-    }
-    setupObservers() {
-        // ResizeObserver for container size changes
-        if (typeof ResizeObserver !== 'undefined') {
-            this.resizeObserver = new ResizeObserver(() => {
-                this.computeOverflow();
-                this.updateScrollState();
-            });
-        }
-        // MutationObserver for child changes
-        this.mutationObserver = new MutationObserver(() => {
-            this.scheduleOverflowRecalc();
-        });
-        this.mutationObserver.observe(this.el, {
-            childList: true,
-            subtree: false,
-        });
-    }
-    observeContainer(el) {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.disconnect();
-        if (el)
-            this.resizeObserver.observe(el);
-    }
-    scheduleOverflowRecalc() {
-        // Debounce recalculations to prevent infinite loops
-        if (this.pendingRecalc !== null) {
-            cancelAnimationFrame(this.pendingRecalc);
-        }
-        this.pendingRecalc = requestAnimationFrame(() => {
-            this.pendingRecalc = null;
-            this.computeOverflow();
-        });
-    }
-    resetOverflowState() {
-        this.hamburgerActive = false;
-        this.overflowingIds = new Set();
-        this.containerHeight = null;
-        this.popoverOpen = false;
-    }
-    getSlottedItems() {
-        // Get direct children from the light DOM (excluding named slot elements)
-        return Array.from(this.el.children).filter((el) => el instanceof HTMLElement && !el.hasAttribute('slot'));
-    }
-    getItemId(el, index) {
-        return el.id || el.dataset.barId || `${this.instanceId}-item-${index}`;
-    }
-    computeOverflow() {
-        if (this.overflow === 'wrap' || this.overflow === 'scroll') {
-            // No overflow handling needed for wrap/scroll modes
-            this.resetOverflowState();
-            this.updateScrollState();
-            return;
-        }
-        const container = this.itemsContainerEl;
-        if (!container)
-            return;
-        const items = this.getSlottedItems();
-        if (items.length === 0) {
-            this.resetOverflowState();
-            return;
-        }
-        // Force a layout recalc
-        container.offsetHeight;
-        // Build item map
-        this.itemMap.clear();
-        items.forEach((item, index) => {
-            const id = this.getItemId(item, index);
-            this.itemMap.set(id, item);
-        });
-        // Get the position of items to determine which are on the first row
-        const itemRects = items.map((item, index) => ({
-            item,
-            id: this.getItemId(item, index),
-            rect: item.getBoundingClientRect(),
-        }));
-        if (itemRects.length === 0) {
-            return;
-        }
-        // Find the first row's top position (accounting for vertical alignment)
-        const containerRect = container.getBoundingClientRect();
-        const topValues = itemRects.map(i => i.rect.top - containerRect.top);
-        const minTop = Math.min(...topValues);
-        // Items are on the first row if their top is close to minTop
-        // Allow some tolerance for alignment differences
-        const tolerance = 15;
-        const firstRowItems = itemRects.filter(i => i.rect.top - containerRect.top <= minTop + tolerance);
-        const overflowItems = itemRects.filter(i => i.rect.top - containerRect.top > minTop + tolerance);
-        // Calculate the height of the first row
-        const firstRowBottom = firstRowItems.length > 0
-            ? Math.max(...firstRowItems.map(i => i.rect.bottom - containerRect.top))
-            : 0;
-        if (this.overflow === 'hamburger') {
-            // In hamburger mode, if ANY item overflows, all go into the menu
-            const shouldHamburger = overflowItems.length > 0;
-            if (shouldHamburger !== this.hamburgerActive) {
-                this.hamburgerActive = shouldHamburger;
-                this.emitOverflowChange();
-            }
-            // Set height to show only first row (or hide all if hamburger is active)
-            if (shouldHamburger && firstRowBottom > 0) {
-                this.containerHeight = firstRowBottom;
-            }
-            else {
-                this.containerHeight = null;
-            }
-        }
-        else {
-            // 'more' mode
-            let newOverflowingIds = new Set(overflowItems.map(i => i.id));
-            // Check if we need to make room for the "more" button
-            if (newOverflowingIds.size > 0 && this.moreButtonEl) {
-                const moreRect = this.moreButtonEl.getBoundingClientRect();
-                const moreTop = moreRect.top - containerRect.top;
-                // If "more" button is not on the first row, we need to hide one more item
-                if (moreTop > minTop + tolerance) {
-                    // Find the last visible item and move it to overflow
-                    const lastVisible = firstRowItems[firstRowItems.length - 1];
-                    if (lastVisible) {
-                        newOverflowingIds.add(lastVisible.id);
-                    }
-                }
-            }
-            // Check if we should fallback to hamburger mode
-            // This happens when minVisibleItems is set and fewer items would be visible
-            const visibleCount = items.length - newOverflowingIds.size;
-            const shouldFallbackToHamburger = this.minVisibleItems > 0 &&
-                newOverflowingIds.size > 0 &&
-                visibleCount < this.minVisibleItems;
-            if (shouldFallbackToHamburger) {
-                // Switch to hamburger mode - all items go into the menu
-                if (!this.hamburgerActive) {
-                    this.hamburgerActive = true;
-                    this.overflowingIds = new Set();
-                    this.emitOverflowChange();
-                }
-                // Set height to show only first row
-                if (firstRowBottom > 0) {
-                    this.containerHeight = firstRowBottom;
-                }
-                else {
-                    this.containerHeight = null;
-                }
-                return;
-            }
-            // Not falling back to hamburger - ensure hamburgerActive is false
-            if (this.hamburgerActive) {
-                this.hamburgerActive = false;
-            }
-            // Check if overflow state changed
-            const hasChanged = (newOverflowingIds?.size ?? 0) !== (this.overflowingIds?.size ?? 0) ||
-                ![...newOverflowingIds].every(id => this.overflowingIds?.has(id));
-            if (hasChanged) {
-                this.overflowingIds = newOverflowingIds;
-                this.emitOverflowChange();
-            }
-            // Set container height to show only first row
-            if ((newOverflowingIds?.size ?? 0) > 0 && firstRowBottom > 0) {
-                this.containerHeight = firstRowBottom;
-            }
-            else {
-                this.containerHeight = null;
-            }
-        }
-    }
-    emitOverflowChange() {
-        this.leBarOverflowChange.emit({
-            overflowingIds: [...(this.overflowingIds ?? [])],
-            hamburgerActive: this.hamburgerActive,
-        });
-    }
-    updateScrollState() {
-        if (this.overflow !== 'scroll' || !this.itemsContainerEl) {
-            this.canScrollStart = false;
-            this.canScrollEnd = false;
-            return;
-        }
-        const el = this.itemsContainerEl;
-        this.canScrollStart = el.scrollLeft > 0;
-        this.canScrollEnd = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
-    }
-    renderMoreButton() {
-        const hasSlottedMore = this.el.querySelector('[slot="more"]');
-        return (h("button", { class: "bar-more-button", part: "more-button", ref: el => (this.moreButtonEl = el), onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedMore ? h("slot", { name: "more" }) : h("le-icon", { name: "ellipsis-horizontal" })));
-    }
-    renderHamburgerButton() {
-        const hasSlottedHamburger = this.el.querySelector('[slot="hamburger"]');
-        return (h("button", { class: "bar-hamburger-button", part: "hamburger-button", onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedHamburger ? h("slot", { name: "hamburger" }) : h("le-icon", { name: "hamburger" })));
-    }
-    renderScrollArrows() {
-        if (!this.arrows || this.overflow !== 'scroll')
-            return null;
-        const hasSlottedStartArrow = this.el.querySelector('[slot="start-arrow"]');
-        const hasSlottedEndArrow = this.el.querySelector('[slot="end-arrow"]');
-        return [
-            h("button", { class: classnames('bar-arrow', 'bar-arrow-start', {
-                    disabled: !this.canScrollStart,
-                }), part: "arrow-start", onClick: this.scrollToStart, disabled: !this.canScrollStart, "aria-label": "Scroll to start" }, hasSlottedStartArrow ? (h("slot", { name: "start-arrow" })) : (h("le-icon", { name: "chevron-down", class: "arrow-icon-start" }))),
-            h("button", { class: classnames('bar-arrow', 'bar-arrow-end', {
-                    disabled: !this.canScrollEnd,
-                }), part: "arrow-end", onClick: this.scrollToEnd, disabled: !this.canScrollEnd, "aria-label": "Scroll to end" }, hasSlottedEndArrow ? (h("slot", { name: "end-arrow" })) : (h("le-icon", { name: "chevron-down", class: "arrow-icon-end" }))),
-        ];
-    }
-    renderAllMenuButton() {
-        if (!this.showAllMenu)
-            return null;
-        const hasSlottedAllMenu = this.el.querySelector('[slot="all-menu"]');
-        return (h("button", { class: "bar-all-menu-button", part: "all-menu-button", onClick: this.toggleAllMenu, "aria-expanded": String(this.allMenuOpen), "aria-haspopup": "true" }, hasSlottedAllMenu ? h("slot", { name: "all-menu" }) : h("le-icon", { name: "hamburger" })));
-    }
-    renderPopoverContent(itemsToShow) {
-        return (h("div", { class: "bar-popover-content", part: "popover-content" }, itemsToShow.map(({ id, item }) => (h("div", { class: "bar-popover-item", key: id, onClick: (e) => this.handleItemClick(e, id), innerHTML: item.outerHTML })))));
-    }
-    renderOverflowPopover() {
-        if (this.overflow !== 'more' && this.overflow !== 'hamburger')
-            return null;
-        const items = this.getSlottedItems();
-        let itemsToShow = [];
-        if (this.overflow === 'hamburger' && this.hamburgerActive) {
-            // Show all items in hamburger mode
-            itemsToShow = items.map((item, index) => ({
-                id: this.getItemId(item, index),
-                item,
-            }));
-        }
-        else if (this.overflow === 'more' && (this.overflowingIds?.size ?? 0) > 0) {
-            // Show only overflowing items
-            itemsToShow = items
-                .map((item, index) => ({
-                id: this.getItemId(item, index),
-                item,
-            }))
-                .filter(({ id }) => this.overflowingIds?.has(id));
-        }
-        if (itemsToShow.length === 0)
-            return null;
-        return (h("le-popover", { mode: "default", open: this.popoverOpen, position: "bottom", align: "end", showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closePopover }, h("div", { slot: "trigger", class: "bar-overflow-trigger" }, this.overflow === 'hamburger' ? this.renderHamburgerButton() : this.renderMoreButton()), this.renderPopoverContent(itemsToShow)));
-    }
-    renderAllMenuPopover() {
-        if (!this.showAllMenu)
-            return null;
-        const items = this.getSlottedItems();
-        const itemsToShow = items.map((item, index) => ({
-            id: this.getItemId(item, index),
-            item,
-        }));
-        const position = this.showAllMenu === 'start' ? 'start' : 'end';
-        return (h("le-popover", { mode: "default", open: this.allMenuOpen, position: "bottom", align: position, showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closeAllMenu }, h("div", { slot: "trigger", class: "bar-all-menu-trigger" }, this.renderAllMenuButton()), this.renderPopoverContent(itemsToShow)));
-    }
-    render() {
-        const showOverflowButton = !this.disablePopover &&
-            ((this.overflow === 'more' && (this.overflowingIds?.size ?? 0) > 0) ||
-                (this.overflow === 'hamburger' && this.hamburgerActive));
-        const containerStyle = {};
-        if (this.containerHeight !== null &&
-            (this.overflow === 'more' || this.overflow === 'hamburger')) {
-            containerStyle.height = `${this.containerHeight}px`;
-        }
-        const showAllMenuAtStart = this.showAllMenu === 'start';
-        const showAllMenuAtEnd = this.showAllMenu === true || this.showAllMenu === 'end';
-        return (h(Host, { key: '56d04e4504ed7ce1d8e78a825c71c71c074d0b62', class: classnames({
-                'overflow-more': this.overflow === 'more',
-                'overflow-scroll': this.overflow === 'scroll',
-                'overflow-hamburger': this.overflow === 'hamburger',
-                'overflow-wrap': this.overflow === 'wrap',
-                'hamburger-active': this.hamburgerActive,
-                'has-overflow': (this.overflowingIds?.size ?? 0) > 0 || this.hamburgerActive,
-            }) }, h("div", { key: '4e7aeb4c84a9964e19012c3d05827fa8406988b0', class: classnames('bar-container', {
-                [`align-${this.alignItems}`]: true,
-            }), part: "container" }, this.overflow === 'scroll' && this.arrows && (h("div", { key: '2e3ae04c00e88e5055216dbc5b6d53574c450470', class: "bar-controls bar-controls-start" }, this.renderScrollArrows()?.[0])), showAllMenuAtStart && (h("div", { key: '9628c8dc2b15d9358baad63b19c75fd933eeb19a', class: "bar-controls bar-controls-start" }, this.renderAllMenuPopover())), h("div", { key: 'd1feb9603d0ff4247852aadb62cb920a5f5a1921', class: classnames('bar-items', {
-                'is-scrollable': this.overflow === 'scroll',
-                'is-wrapping': this.overflow === 'wrap',
-            }), style: containerStyle, ref: el => {
-                this.itemsContainerEl = el;
-                this.observeContainer(el);
-            }, onScroll: this.overflow === 'scroll' ? this.handleScroll : undefined }, h("slot", { key: '338698e038b9df4c7b163017ceb0675b834160e4' })), showOverflowButton && (h("div", { key: 'd619fcda1b0c28247af60899f73cc076b0517787', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (h("div", { key: 'fd9fef90194aabb8d48e77c8f7615daa5d7297ac', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (h("div", { key: 'bcffb914e2788767c3765351a3eeae771f3e115f', class: "bar-controls bar-controls-end" }, this.renderScrollArrows()?.[1])))));
-    }
-    static get is() { return "le-bar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-bar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-bar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "overflow": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'more' | 'scroll' | 'hamburger' | 'wrap'",
-                    "resolved": "\"hamburger\" | \"more\" | \"scroll\" | \"wrap\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Overflow behavior when items don't fit on one row.\n- `more`: Overflow items appear in a \"more\" dropdown\n- `scroll`: Items scroll horizontally with optional arrows\n- `hamburger`: All items go into a hamburger menu if any overflow\n- `wrap`: Items wrap to additional rows"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "overflow",
-                "defaultValue": "'more'"
-            },
-            "alignItems": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'start' | 'end' | 'center' | 'stretch'",
-                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Alignment of items within the bar (maps to justify-content)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "align-items",
-                "defaultValue": "'start'"
-            },
-            "arrows": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show scroll arrows when overflow is \"scroll\"."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "arrows",
-                "defaultValue": "false"
-            },
-            "disablePopover": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disable the internal overflow popover.\nWhen true, the bar still detects overflow and hides items,\nbut doesn't render its own popover. Use this when providing\ncustom overflow handling via the leBarOverflowChange event."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disable-popover",
-                "defaultValue": "false"
-            },
-            "minVisibleItems": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum number of visible items required when using \"more\" overflow mode.\nIf fewer items would be visible, the bar falls back to hamburger mode.\nOnly applies when overflow is \"more\"."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-visible-items",
-                "defaultValue": "0"
-            },
-            "showAllMenu": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean | 'start' | 'end'",
-                    "resolved": "\"end\" | \"start\" | boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show an \"all items\" menu button.\n- `false`: Don't show\n- `true` or `'end'`: Show at end\n- `'start'`: Show at start"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-all-menu",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "popoverOpen": {},
-            "hamburgerActive": {},
-            "overflowingIds": {},
-            "canScrollStart": {},
-            "canScrollEnd": {},
-            "allMenuOpen": {},
-            "containerHeight": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leBarOverflowChange",
-                "name": "leBarOverflowChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when overflow state changes."
-                },
-                "complexType": {
-                    "original": "LeBarOverflowChangeDetail",
-                    "resolved": "LeBarOverflowChangeDetail",
-                    "references": {
-                        "LeBarOverflowChangeDetail": {
-                            "location": "local",
-                            "path": "/home/runner/work/le-kit/le-kit/src/components/le-bar/le-bar.tsx",
-                            "id": "src/components/le-bar/le-bar.tsx::LeBarOverflowChangeDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "recalculate": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Force recalculation of overflow state.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "overflow",
-                "methodName": "handleOverflowChange"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "slotchange",
-                "method": "handleSlotChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=le-bar.js.map