le-kit 0.3.1 → 0.3.3

package/dist/cjs/le-bar.cjs.entry.js

@@ -1,428 +0,0 @@
-'use strict';
-
-var index = require('./index-CNRmviSz.js');
-var utils = require('./utils-CZG22_vQ.js');
-
-const leBarCss = () => `:host{display:block;--le-bar-gap:var(--le-spacing-2);--le-bar-padding:var(--le-spacing-2);--le-bar-min-height:2.5rem;--le-bar-background:transparent;--le-bar-border-color:var(--le-color-border);--le-bar-border-radius:var(--le-radius-md);--le-bar-button-size:2rem;--le-bar-button-color:var(--le-color-text-primary);--le-bar-button-hover-bg:var(--le-color-gray-100);--le-bar-button-border-radius:var(--le-radius-sm);--le-bar-arrow-size:1.5rem;--le-bar-popover-min-width:200px;--le-bar-popover-gap:var(--le-spacing-1)}.bar-container{display:flex;align-items:center;gap:var(--le-bar-gap);min-height:var(--le-bar-min-height);background:var(--le-bar-background);border-radius:var(--le-bar-border-radius);padding:var(--le-bar-padding)}.bar-container.align-start{justify-content:flex-start}.bar-container.align-end .bar-items{justify-content:flex-end}.bar-container.align-center .bar-items{justify-content:center}.bar-container.align-stretch .bar-items{justify-content:space-evenly}.bar-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--le-bar-gap);overflow:hidden;min-width:0;flex:1 1 0%;position:relative}.bar-items[style*="height"]{overflow:hidden}.bar-items.is-scrollable{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.bar-items.is-scrollable::-webkit-scrollbar{display:none}.bar-items.is-scrollable ::slotted(*){scroll-snap-align:start;flex-shrink:0}.bar-items.is-wrapping{flex-wrap:wrap;overflow:visible;height:auto !important}.bar-controls{display:flex;align-items:center;gap:var(--le-spacing-1);flex-shrink:0}.bar-controls-start{order:-1}.bar-controls-end{order:1}.bar-more-button,.bar-hamburger-button,.bar-all-menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-button-size);height:var(--le-bar-button-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease}.bar-more-button:hover,.bar-hamburger-button:hover,.bar-all-menu-button:hover{background:var(--le-bar-button-hover-bg)}.bar-more-button:focus-visible,.bar-hamburger-button:focus-visible,.bar-all-menu-button:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow{display:inline-flex;align-items:center;justify-content:center;width:var(--le-bar-arrow-size);height:var(--le-bar-arrow-size);padding:0;border:none;background:transparent;color:var(--le-bar-button-color);border-radius:var(--le-bar-button-border-radius);cursor:pointer;transition:background-color 0.15s ease, opacity 0.15s ease}.bar-arrow:hover:not(:disabled){background:var(--le-bar-button-hover-bg)}.bar-arrow:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.bar-arrow:disabled,.bar-arrow.disabled{opacity:0.3;cursor:not-allowed}.arrow-icon-start{transform:rotate(90deg)}.arrow-icon-end{transform:rotate(-90deg)}.bar-overflow-trigger,.bar-all-menu-trigger{display:inline-flex}.bar-popover-content{display:flex;flex-direction:column;gap:var(--le-bar-popover-gap);min-width:var(--le-bar-popover-min-width);padding:var(--le-spacing-2)}.bar-popover-item{cursor:pointer}.bar-popover-item:hover{background:var(--le-bar-button-hover-bg);border-radius:var(--le-bar-button-border-radius)}:host(.hamburger-active) .bar-items{visibility:hidden;pointer-events:none}`;
-
-const LeBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leBarOverflowChange = index.createEvent(this, "leBarOverflowChange");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * 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 = utils.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;
-        }
-        // 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) > 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 (index.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 ? index.h("slot", { name: "more" }) : index.h("le-icon", { name: "ellipsis-horizontal" })));
-    }
-    renderHamburgerButton() {
-        const hasSlottedHamburger = this.el.querySelector('[slot="hamburger"]');
-        return (index.h("button", { class: "bar-hamburger-button", part: "hamburger-button", onClick: this.togglePopover, "aria-expanded": String(this.popoverOpen), "aria-haspopup": "true" }, hasSlottedHamburger ? index.h("slot", { name: "hamburger" }) : index.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 [
-            index.h("button", { class: utils.classnames('bar-arrow', 'bar-arrow-start', {
-                    disabled: !this.canScrollStart,
-                }), part: "arrow-start", onClick: this.scrollToStart, disabled: !this.canScrollStart, "aria-label": "Scroll to start" }, hasSlottedStartArrow ? (index.h("slot", { name: "start-arrow" })) : (index.h("le-icon", { name: "chevron-down", class: "arrow-icon-start" }))),
-            index.h("button", { class: utils.classnames('bar-arrow', 'bar-arrow-end', {
-                    disabled: !this.canScrollEnd,
-                }), part: "arrow-end", onClick: this.scrollToEnd, disabled: !this.canScrollEnd, "aria-label": "Scroll to end" }, hasSlottedEndArrow ? (index.h("slot", { name: "end-arrow" })) : (index.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 (index.h("button", { class: "bar-all-menu-button", part: "all-menu-button", onClick: this.toggleAllMenu, "aria-expanded": String(this.allMenuOpen), "aria-haspopup": "true" }, hasSlottedAllMenu ? index.h("slot", { name: "all-menu" }) : index.h("le-icon", { name: "hamburger" })));
-    }
-    renderPopoverContent(itemsToShow) {
-        return (index.h("div", { class: "bar-popover-content", part: "popover-content" }, itemsToShow.map(({ id, item }) => (index.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 (index.h("le-popover", { mode: "default", open: this.popoverOpen, position: "bottom", align: "end", showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closePopover }, index.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 (index.h("le-popover", { mode: "default", open: this.allMenuOpen, position: "bottom", align: position, showClose: false, closeOnClickOutside: true, closeOnEscape: true, onLePopoverClose: this.closeAllMenu }, index.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 (index.h(index.Host, { key: 'b15277217f45b9a2b4015e1062192ad7bfcafae3', class: utils.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,
-            }) }, index.h("div", { key: 'cc8ff523ebc98f307cae7313a1998468e98dd712', class: utils.classnames('bar-container', {
-                [`align-${this.alignItems}`]: true,
-            }), part: "container" }, this.overflow === 'scroll' && this.arrows && (index.h("div", { key: '00f0afbd5b4280f4b231fa4d499ef8a7c0e4bd47', class: "bar-controls bar-controls-start" }, this.renderScrollArrows()?.[0])), showAllMenuAtStart && (index.h("div", { key: '57234a8145f97f7a803c0488b520786a25584a9d', class: "bar-controls bar-controls-start" }, this.renderAllMenuPopover())), index.h("div", { key: '15db1e36049182161823998fc1041ad91d327816', class: utils.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 }, index.h("slot", { key: '6b967b1c0f251e1214b0ae58b18e767ef9d096a8' })), showOverflowButton && (index.h("div", { key: 'b77c30910b01bffae047f9744f2589743a29eb29', class: "bar-controls bar-controls-end" }, this.renderOverflowPopover())), showAllMenuAtEnd && (index.h("div", { key: '971d727e51f4b4682ed1b600e930b2f33b3c0a65', class: "bar-controls bar-controls-end" }, this.renderAllMenuPopover())), this.overflow === 'scroll' && this.arrows && (index.h("div", { key: 'a6b6fc87ceae32503fc55a0da54b1e38f7f95ff7', class: "bar-controls bar-controls-end" }, this.renderScrollArrows()?.[1])))));
-    }
-    static get watchers() { return {
-        "overflow": ["handleOverflowChange"]
-    }; }
-};
-LeBar.style = leBarCss();
-
-exports.le_bar = LeBar;
-//# sourceMappingURL=le-bar.entry.cjs.js.map

package/dist/cjs/le-icon.cjs.entry.js

@@ -1,110 +0,0 @@
-'use strict';
-
-var index = require('./index-CNRmviSz.js');
-
-const leIconCss = () => `:host{display:inline-block;width:var(--le-icon-size, var(--le-size-4));height:var(--le-icon-size, var(--le-size-4));color:var(--le-icon-color, var(--le-color-text-primary))}:host svg{display:block;fill:currentColor}`;
-
-const iconCache = {};
-const requestCache = {};
-async function fetchIcon({ name }) {
-    if (iconCache[name]) {
-        return iconCache[name];
-    }
-    if (!requestCache[name]) {
-        console.log(`Fetching icon "${name}"`, index.getAssetPath(`./assets/icons/${name}.json`));
-        requestCache[name] = fetch(index.getAssetPath(`./assets/icons/${name}.json`))
-            .then(resp => resp.json())
-            .catch(() => {
-            console.error(`"${name}" is not a valid name`);
-            return '';
-        });
-    }
-    const path = await requestCache[name];
-    iconCache[name] = path;
-    return path;
-}
-const LeIcon = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Name of the icon to display. Corresponds to a JSON file in the assets folder.
-     * For example, "search" will load the "search.json" file.
-     */
-    name = null;
-    /**
-     * Size of the icon in pixels. Default is 16.
-     */
-    size = 16;
-    iconData = null;
-    visible = false;
-    async loadIconData() {
-        const { name, visible } = this;
-        if (!name || !visible) {
-            return;
-        }
-        this.iconData = await fetchIcon({ name });
-    }
-    intersectionObserver;
-    connectedCallback() {
-        this.waitUntilVisible(() => {
-            this.visible = true;
-            this.loadIconData();
-        });
-    }
-    disconnectedCallback() {
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-            this.intersectionObserver = null;
-        }
-    }
-    async componentWillLoad() {
-        this.loadIconData();
-    }
-    waitUntilVisible(callback) {
-        if (typeof window === 'undefined' ||
-            !window.IntersectionObserver) {
-            callback();
-            return;
-        }
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    this.intersectionObserver.disconnect();
-                    this.intersectionObserver = null;
-                    callback();
-                }
-            });
-        }, { rootMargin: '50px' });
-        this.intersectionObserver.observe(this.el);
-    }
-    /**
-     * Renders the SVG content out of a JSON data in a format:
-     * { "viewBox": "...", children: [{ "tag": "g", ""children": [ ... ], ...attrs }, ...] }
-     *
-     * @returns JSX.Element | null
-     */
-    renderSVGContent(children) {
-        if (!children || children.length === 0) {
-            return null;
-        }
-        const createElement = node => {
-            const { tag, children, ...attrs } = node;
-            return index.h(tag, attrs, children ? children.map(createElement) : null);
-        };
-        const svgElements = children.map(createElement);
-        return svgElements;
-    }
-    render() {
-        return (index.h("svg", { key: 'ef551908a289cd765ae88ded83b99057d510e142', xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", height: this.size || 16, width: this.size || 16, viewBox: this.iconData?.viewBox || `0 0 ${this.size || 16} ${this.size || 16}` }, this.renderSVGContent(this.iconData?.children)));
-    }
-    static get assetsDirs() { return ["assets/icons"]; }
-    static get watchers() { return {
-        "name": ["loadIconData"]
-    }; }
-};
-LeIcon.style = leIconCss();
-
-exports.le_icon = LeIcon;
-//# sourceMappingURL=le-icon.entry.cjs.js.map