le-kit 0.2.4 → 0.2.6

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

@@ -0,0 +1,628 @@
+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 {
+    el;
+    /**
+     * 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
+     */
+    overflow = 'more';
+    /**
+     * Alignment of items within the bar (maps to justify-content).
+     */
+    alignItems = 'start';
+    /**
+     * Show scroll arrows when overflow is "scroll".
+     */
+    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.
+     */
+    disablePopover = false;
+    /**
+     * Show an "all items" menu button.
+     * - `false`: Don't show
+     * - `true` or `'end'`: Show at end
+     * - `'start'`: Show at start
+     */
+    showAllMenu = false;
+    /**
+     * Emitted when overflow state changes.
+     */
+    leBarOverflowChange;
+    /** Whether the hamburger/more popover is open */
+    popoverOpen = false;
+    /** Whether hamburger mode is active (for hamburger overflow) */
+    hamburgerActive = false;
+    /** IDs of items that are overflowing */
+    overflowingIds = new Set();
+    /** Whether we can scroll left */
+    canScrollStart = false;
+    /** Whether we can scroll right */
+    canScrollEnd = false;
+    /** Whether the all-menu popover is open */
+    allMenuOpen = false;
+    /** Current height of the items container (for overflow handling) */
+    containerHeight = null;
+    itemsContainerEl;
+    moreButtonEl;
+    resizeObserver;
+    mutationObserver;
+    instanceId = generateId('le-bar');
+    // Map to track item elements and their IDs
+    itemMap = new Map();
+    // Prevent multiple recalculations in the same frame
+    pendingRecalc = null;
+    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
+            const 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 overflow state changed
+            const hasChanged = newOverflowingIds.size !== this.overflowingIds.size ||
+                ![...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 && 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;
+    }
+    handleScroll = () => {
+        this.updateScrollState();
+    };
+    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);
+    };
+    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);
+    };
+    togglePopover = () => {
+        this.popoverOpen = !this.popoverOpen;
+    };
+    closePopover = () => {
+        this.popoverOpen = false;
+    };
+    toggleAllMenu = () => {
+        this.allMenuOpen = !this.allMenuOpen;
+    };
+    closeAllMenu = () => {
+        this.allMenuOpen = false;
+    };
+    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();
+    };
+    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) {
+            // 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) ||
+                (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: 'ee31d28cdad15267c6a31503d1a102d050114af1', 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 || this.hamburgerActive,
+            }) }, h("div", { key: 'd9dbc7ccd3256697362f701dcef24b26e6c36765', class: classnames('bar-container', {
+                [`align-${this.alignItems}`]: true,
+            }), part: "container" }, this.overflow === 'scroll' && this.arrows && (h("div", { key: '08e73b775740388f2b6bdb5f85965870713d119c', class: "bar-controls bar-controls-start" }, this.renderScrollArrows()?.[0])), showAllMenuAtStart && (h("div", { key: '919e6491693afb2095c4100744f53aa266f142d1', class: "bar-controls bar-controls-start" }, this.renderAllMenuPopover())), h("div", { key: '9a8251f1a1fe359efc266fb4787010f140ab4f5a', 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: '89f54e7a897583fec944db086958f5211df4e347' })), showOverflowButton && (h("div", { key: 'b7a2eab419de82a26d8af0a352706737c07f3d5e', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (h("div", { key: '1dd1b9d97f389f4668a69643f8ff4424c847e85f', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (h("div", { key: '5f0abf7e091380b5e6769127271c192b56e8f573', 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"
+            },
+            "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