atomicuilibrary 0.0.1

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js

@@ -0,0 +1,1231 @@
+import { Host, h } from "@stencil/core";
+export class NavigationBar {
+    el;
+    // --------------------------------------------------------------------------
+    // Props: Configuration API
+    // --------------------------------------------------------------------------
+    /** Main data source: Array of navigation items */
+    items = [];
+    /** Secondary data source: Categories to show at the top */
+    categories = [];
+    /** Bottom items data source */
+    bottomItems = [];
+    /** Secondary items data source */
+    secondaryItems = [];
+    /** Secondary bottom items data source */
+    bottomItemsSecondary = [];
+    /** Show search bar in expanded mode */
+    showSearch = false;
+    /** Mode of the navigation */
+    mode = 'collapsed';
+    /** Positioning of the navigation */
+    position = 'left';
+    /** Whether the navigation is collapsible */
+    collapsible = true;
+    /** Width when expanded (css unit) */
+    expandedWidth = '280px';
+    /** Width when collapsed (css unit) */
+    collapsedWidth = '64px';
+    /** Show only icons in collapsed mode */
+    iconOnly = true;
+    /** Accordion mode: one expanded at a time */
+    accordion = false;
+    /** ID of the currently active item (route aware) */
+    activeId;
+    /** Theme preference (just sets a class or attribute) */
+    theme = 'auto';
+    /** Layout orientation */
+    orientation = 'vertical';
+    /** Density of items */
+    density = 'comfortable';
+    /** Position of the active item indicator bar: 'start' (left) or 'end' (right) */
+    indicatorPosition = 'start';
+    /** Maximum number of items to show before overflowing to "More" menu */
+    maxItems = 4;
+    /** Company Logo URL */
+    companyLogo;
+    /** Company Name */
+    companyName;
+    /** Default library for icons */
+    iconLibrary = 'default';
+    // --------------------------------------------------------------------------
+    // State
+    // --------------------------------------------------------------------------
+    isExpanded = true;
+    isMobile = false;
+    expandedItems = new Set();
+    keyword = '';
+    effectiveTheme = 'light';
+    gliderTop = 0;
+    gliderHeight = 0;
+    gliderLeft = 0;
+    gliderWidth = 0;
+    gliderOpacity = 0;
+    hoveredId = null;
+    hoveredIconId = null;
+    // --------------------------------------------------------------------------
+    // Events
+    // --------------------------------------------------------------------------
+    navOpen;
+    navClose;
+    navToggle;
+    navItemClick;
+    itemExpand;
+    itemCollapse;
+    // --------------------------------------------------------------------------
+    // Lifecycle & Watchers
+    // --------------------------------------------------------------------------
+    componentWillLoad() {
+        this.checkScreenSize();
+        this.handleModeChange();
+        this.expandParents();
+        this.syncTheme();
+    }
+    componentDidLoad() {
+        // Resize Observer for Glider
+        this.resizeObserver = new ResizeObserver(() => {
+            this.checkScreenSize();
+            this.updateGlider();
+        });
+        this.resizeObserver.observe(document.body);
+        // Theme Observer (watch for runtime theme changes)
+        this.themeObserver = new MutationObserver(() => this.syncTheme());
+        this.themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+        this.themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
+        // Initial Glider
+        requestAnimationFrame(() => this.updateGlider());
+    }
+    componentDidRender() {
+        requestAnimationFrame(() => this.updateGlider());
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver)
+            this.resizeObserver.disconnect();
+        if (this.themeObserver)
+            this.themeObserver.disconnect();
+    }
+    handleResize() {
+        if (this.mode === 'auto') {
+            this.checkScreenSize();
+        }
+    }
+    checkScreenSize() {
+        const isMobileNow = window.innerWidth < 768;
+        if (isMobileNow !== this.isMobile) {
+            this.isMobile = isMobileNow;
+            // If switching to mobile, collapse by default
+            if (isMobileNow) {
+                this.isExpanded = false;
+            }
+            else {
+                this.isExpanded = true;
+            }
+        }
+    }
+    handleModeChange() {
+        if (this.mode === 'auto') {
+            this.checkScreenSize();
+        }
+        else {
+            this.isExpanded = this.mode === 'expanded';
+        }
+        this.isMobile = window.innerWidth < 768;
+        this.isMobile = window.innerWidth < 768;
+    }
+    handleScroll() {
+        this.updateGlider();
+    }
+    onThemeChange() {
+        this.syncTheme();
+    }
+    onActiveIdChange() {
+        this.expandParents();
+        requestAnimationFrame(() => this.updateGlider());
+    }
+    onExpandChange() {
+        requestAnimationFrame(() => this.updateGlider());
+    }
+    resizeObserver;
+    themeObserver;
+    // onWindowResize already defined or needs to be matched
+    syncTheme() {
+        if (this.theme === 'auto') {
+            const el = document.documentElement;
+            const body = document.body;
+            const themeAttr = el.getAttribute('data-theme');
+            if (el.classList.contains('green') || body.classList.contains('green') || themeAttr === 'green') {
+                this.effectiveTheme = 'green';
+            }
+            else if (el.classList.contains('dark') || body.classList.contains('dark') || themeAttr === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.effectiveTheme = 'dark';
+            }
+            else {
+                this.effectiveTheme = 'light';
+            }
+        }
+        else {
+            this.effectiveTheme = this.theme;
+        }
+    }
+    updateGlider() {
+        if (!this.el)
+            return;
+        // Target both active item and active ancestor, or the hovered item
+        const selector = this.hoveredId ? `#nav-item-${this.hoveredId}` : '.nav-item.active, .nav-item.active-ancestor';
+        const activeItem = this.el.shadowRoot?.querySelector(selector);
+        if (activeItem) {
+            const hostRect = this.el.getBoundingClientRect();
+            const itemRect = activeItem.getBoundingClientRect();
+            if (this.orientation === 'horizontal') {
+                const left = itemRect.left - hostRect.left;
+                const width = itemRect.width;
+                if (this.gliderLeft !== left || this.gliderWidth !== width || this.gliderOpacity !== 1) {
+                    this.gliderLeft = left;
+                    this.gliderWidth = width;
+                    this.gliderOpacity = 1;
+                }
+            }
+            else {
+                const top = itemRect.top - hostRect.top;
+                const height = itemRect.height;
+                // Only update if values actually changed to prevent render loops
+                if (this.gliderTop !== top || this.gliderHeight !== height || this.gliderOpacity !== 1) {
+                    this.gliderTop = top;
+                    this.gliderHeight = height;
+                    this.gliderOpacity = 1;
+                }
+            }
+        }
+        else {
+            if (this.gliderOpacity !== 0) {
+                this.gliderOpacity = 0;
+            }
+        }
+    }
+    expandParents() {
+        if (!this.activeId)
+            return;
+        const newExpanded = new Set(this.expandedItems);
+        let changed = false;
+        const findAndExpand = (items) => {
+            for (const item of items) {
+                if (item.children && item.children.length > 0) {
+                    if (this.hasActiveChild(item)) {
+                        if (!newExpanded.has(item.id)) {
+                            newExpanded.add(item.id);
+                            changed = true;
+                        }
+                        findAndExpand(item.children);
+                    }
+                }
+            }
+        };
+        findAndExpand(this.categories || []);
+        findAndExpand(this.items || []);
+        findAndExpand(this.bottomItems || []);
+        findAndExpand(this.secondaryItems || []);
+        findAndExpand(this.bottomItemsSecondary || []);
+        if (changed) {
+            this.expandedItems = newExpanded;
+        }
+    }
+    // --------------------------------------------------------------------------
+    // Public API (Methods)
+    // --------------------------------------------------------------------------
+    async open() {
+        if (!this.collapsible)
+            return;
+        this.isExpanded = true;
+        if (this.mode !== 'auto')
+            this.mode = 'expanded';
+        this.navOpen.emit();
+    }
+    async close() {
+        if (!this.collapsible)
+            return;
+        this.isExpanded = false;
+        if (this.mode !== 'auto')
+            this.mode = 'collapsed';
+        this.navClose.emit();
+    }
+    async toggle() {
+        if (this.isExpanded)
+            await this.close();
+        else
+            await this.open();
+        this.navToggle.emit({ expanded: this.isExpanded });
+    }
+    async setActive(id) {
+        this.activeId = id;
+    }
+    // --------------------------------------------------------------------------
+    // Internal Logic
+    // --------------------------------------------------------------------------
+    handleItemClick(item) {
+        if (item.children && item.children.length > 0) {
+            if (!this.isExpanded || this.orientation === 'horizontal') {
+                let firstChild = item.children[0];
+                while (firstChild && firstChild.children && firstChild.children.length > 0) {
+                    firstChild = firstChild.children[0];
+                }
+                if (firstChild && !firstChild.disabled) {
+                    this.activeId = firstChild.id;
+                    this.navItemClick.emit(firstChild);
+                    if (this.isMobile) {
+                        this.close();
+                    }
+                }
+                return;
+            }
+            // Toggle the item's expansion state
+            this.toggleItem(item.id);
+        }
+        else {
+            if (item.disabled)
+                return;
+            this.activeId = item.id;
+            this.navItemClick.emit(item);
+            // Auto-close on mobile selection
+            if (this.isMobile) {
+                this.close();
+            }
+        }
+    }
+    hasActiveChild(item) {
+        if (!item.children)
+            return false;
+        return item.children.some(child => child.id === this.activeId || this.hasActiveChild(child));
+    }
+    toggleItem(id) {
+        const newSet = new Set(this.expandedItems);
+        if (newSet.has(id)) {
+            newSet.delete(id);
+            this.itemCollapse.emit(id);
+        }
+        else {
+            if (this.accordion && this.isExpanded) {
+                // Simple accordion: only one root item expanded?
+                // Implementing root-level accordion behavior
+                // Only remove siblings at the same level (Simplify to clear all for now if simple)
+                // Better: don't enforce strict accordion to allow sub-nested multiple
+            }
+            newSet.add(id);
+            this.itemExpand.emit(id);
+        }
+        this.expandedItems = newSet;
+    }
+    // --------------------------------------------------------------------------
+    // Keyboard Navigation
+    // --------------------------------------------------------------------------
+    handleKeyDown(e, item) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.handleItemClick(item);
+        }
+        else if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.focusNext(e.target);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.focusPrev(e.target);
+        }
+        else if (e.key === 'ArrowRight') {
+            if (!this.expandedItems.has(item.id)) {
+                this.toggleItem(item.id);
+            }
+        }
+        else if (e.key === 'ArrowLeft') {
+            if (this.expandedItems.has(item.id)) {
+                this.toggleItem(item.id);
+            }
+        }
+    }
+    focusNext(current) {
+        const all = Array.from(this.el.shadowRoot.querySelectorAll('.nav-item'));
+        const index = all.indexOf(current);
+        if (index > -1 && index < all.length - 1) {
+            all[index + 1].focus();
+        }
+    }
+    focusPrev(current) {
+        const all = Array.from(this.el.shadowRoot.querySelectorAll('.nav-item'));
+        const index = all.indexOf(current);
+        if (index > 0) {
+            all[index - 1].focus();
+        }
+    }
+    // --------------------------------------------------------------------------
+    // Render Helpers
+    // --------------------------------------------------------------------------
+    renderToggle() {
+        if (!this.collapsible || this.isMobile)
+            return null;
+        return (h("div", { class: "nav-toggle-edge", onClick: () => this.toggle() }, h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", stroke: "currentColor", "stroke-width": "2", fill: "none" }, h("path", { d: "M15 18l-6-6 6-6" }))));
+    }
+    filterItems(items) {
+        if (!this.keyword)
+            return items;
+        const lower = this.keyword.toLowerCase();
+        // Recursive filter
+        const filterRec = (list) => {
+            return list
+                .filter(item => {
+                const match = item.label.toLowerCase().includes(lower);
+                const childMatch = item.children && filterRec(item.children).length > 0;
+                return match || childMatch;
+            })
+                .map(item => {
+                // Return shallow clone with filtered children if needed?
+                // For simplicity, just return item, but if we assume children need filtering for display:
+                if (item.children) {
+                    return { ...item, children: filterRec(item.children) };
+                }
+                return item;
+            });
+        };
+        return filterRec(items);
+    }
+    /**
+     * Render a list of items with Overflow logic (Max 4 items -> 3 + More)
+     */
+    renderNavList(items, keySuffix) {
+        const filtered = this.filterItems(items);
+        const threshold = this.maxItems;
+        // If searching OR in horizontal mode, show all matches (disable overflow for "all items" request)
+        if (this.keyword || this.orientation === 'horizontal' || filtered.length <= threshold) {
+            return filtered.map(item => this.renderItem(item));
+        }
+        // Overflow Logic: Show (threshold-1) items + "More"
+        const visibleCount = threshold - 1;
+        const visible = filtered.slice(0, visibleCount);
+        const hidden = filtered.slice(visibleCount);
+        const moreItem = {
+            id: `nav-overflow-${keySuffix}`,
+            label: 'More',
+            icon: 'more-horizontal',
+            iconLibrary: 'lucide', // Defaulting to lucide for 'More' dots
+            children: hidden,
+        };
+        return [...visible.map(item => this.renderItem(item)), this.renderItem(moreItem)];
+    }
+    getBlocks() {
+        return {
+            categories: [...(this.categories || []), ...(this.items || []).filter(i => i.block === 'categories')],
+            primary: (this.items || []).filter(i => !i.block || i.block === 'primary'),
+            secondary: [...(this.secondaryItems || []), ...(this.items || []).filter(i => i.block === 'secondary')],
+            bottom: [...(this.bottomItems || []), ...(this.items || []).filter(i => i.block === 'bottom')],
+            bottomSecondary: [...(this.bottomItemsSecondary || []), ...(this.items || []).filter(i => i.block === 'bottomSecondary')],
+        };
+    }
+    // --------------------------------------------------------------------------
+    // Render
+    // --------------------------------------------------------------------------
+    render() {
+        const blocks = this.getBlocks();
+        const hostClass = [
+            !this.isExpanded && 'is-collapsed',
+            this.isMobile && 'is-drawer',
+            this.isMobile && this.isExpanded && 'drawer-open',
+            `pos-${typeof this.position === 'string' ? this.position : ''}`,
+            `indicator-${typeof this.indicatorPosition === 'string' ? this.indicatorPosition : ''}`,
+        ].filter(Boolean).join(' ');
+        const vars = {
+            '--nav-width': typeof this.isExpanded === 'boolean' ? (this.isExpanded ? this.expandedWidth : this.isMobile ? '0px' : this.collapsedWidth) : this.collapsedWidth,
+        };
+        return (h(Host, { key: '5d7d3ba7a371bb0b2c7067c9ef6ffadf1cc5cf2c', style: vars, class: hostClass, theme: null, "data-theme": this.effectiveTheme }, h("div", { key: '822e6bca215424cf97ee14360e5474f279898d08', class: "nav-glider", style: {
+                top: this.orientation === 'horizontal' ? 'auto' : `${typeof this.gliderTop === 'number' ? this.gliderTop : 0}px`,
+                height: this.orientation === 'horizontal' ? '3px' : `${typeof this.gliderHeight === 'number' ? this.gliderHeight : 0}px`,
+                left: this.orientation === 'horizontal' ? `${typeof this.gliderLeft === 'number' ? this.gliderLeft : 0}px` : this.position === 'left' ? '6px' : 'auto',
+                right: this.orientation === 'horizontal' ? 'auto' : this.position === 'right' ? '6px' : 'auto',
+                width: this.orientation === 'horizontal' ? `${typeof this.gliderWidth === 'number' ? this.gliderWidth : 0}px` : '4px',
+                bottom: this.orientation === 'horizontal' ? '0' : 'auto',
+                opacity: `${typeof this.gliderOpacity === 'number' ? this.gliderOpacity : 0}`,
+            } }), this.renderToggle(), this.isMobile && this.isExpanded && h("div", { key: 'e561f5ba73dcded187227d24c05271ffe8cd35be', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '00336a31f7c62f1e4225811a8526316869eacb67', class: "nav-blocks-container" }, h("div", { key: '08bb7aa63e515127943aa1858b6246e924752237', class: "nav-header" }, h("slot", { key: '5052017567308f9e24e13c273fa6e6f81bdabb54', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: '3a374287ff56db7e8e48786a9fd82d046eb27a24', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: 'c51ab5c8072dce6e11738da2df7a2c2d77534989', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'c37a8d0bc5ea530ac6e4c90d45aed571e401ad65', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: 'b552595e83958add3197c9bd83eda6454d975dad', name: "logo" }), this.isMobile && (h("div", { key: 'dfc692bd4d940e34bdd3c1ee0f7bab24e390623a', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: '38bc9e4c9799d01510b8c0a354d4c4be370775c8', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: '9e5ce385a716770a940247a2e97d5a002928f536', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: '6210ee48a40ec6ac0a1b37c6064be9539041d89a', class: "nav-search-bar" }, h("div", { key: '91be6b4b089065dec8601ad39d6f5ee6314c2743', style: {
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                background: 'var(--nav-item-hover-bg, #f1f5f9)',
+                borderRadius: '6px',
+                padding: '4px 8px',
+            } }, h("svg", { key: 'eb7de33bd4feea4137a01b38a3c461536d471d0e', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", style: { opacity: '0.5', marginRight: '8px' } }, h("circle", { key: 'e38c3bf011c65f5f6adf7283cfa4362afba456d6', cx: "11", cy: "11", r: "8" }), h("line", { key: '62dbce91bf5b3cce61f4fe711b9d70b9ddb2192f', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '2e3c9743f142fe4fec5e5d232edbfa7a453a5520', type: "text", placeholder: "Search...", value: this.keyword, onInput: e => (this.keyword = e.target.value), style: {
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                width: '100%',
+                fontSize: '14px',
+                color: 'inherit',
+            } })))), blocks.categories.length > 0 && (h("div", { key: 'bbfc7918309d8a05aa89f1cf29564f4a7e0f5657', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: '856526bb6ebc4fb642f895e9d3977068562df9db', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: 'f7f37b72d9b37144f7a982028d04dc2a182dd792', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: '53ca544ecb67734f153b7c327c85100f33c74092', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: '2d23b401f03faaa7c27aae850e84a5de3751b667', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: 'e7f4d57d73f042d7c300f6a960469a8cef50afdd', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '4ae38e3116a10f7ab3a244fb0ae3cfc3ad91e7d6', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: 'e79b2b33ccf1e47902376599065562024a45eaff', class: "nav-block-profile", role: "tree" }, blocks.bottomSecondary.map(item => this.renderItem(item)))))));
+    }
+    isBottomItem(id) {
+        const blocks = this.getBlocks();
+        return blocks.bottom.some(item => item.id === id) || blocks.bottomSecondary.some(item => item.id === id);
+    }
+    /**
+     * Recursive Item Renderer
+     */
+    renderItem(item, level = 0) {
+        if (item.type === 'divider') {
+            return h("div", { class: "nav-divider", style: { height: '1px', background: 'var(--ui-input-border, #e2e8f0)', margin: '8px 0' } });
+        }
+        if (item.type === 'title') {
+            return this.isExpanded || this.orientation === 'horizontal' ? (h("div", { class: `nav-title level-${level}`, style: { fontSize: '11px', fontWeight: 'bold', textTransform: 'uppercase', color: '#94a3b8', padding: '12px 16px 4px 16px' } }, item.label)) : null;
+        }
+        const expanded = this.expandedItems.has(item.id);
+        const isDirectlyActive = this.activeId === item.id;
+        // In collapsed mode, highlight parent if child is active
+        const active = isDirectlyActive || (!this.isExpanded && this.hasActiveChild(item));
+        const activeAncestor = this.isExpanded && this.hasActiveChild(item);
+        const hasChildren = item.children && item.children.length > 0;
+        const paddingLeft = level * 16 + 16 + 'px';
+        const itemId = `nav-item-${item.id}`;
+        // Determine tag type: use 'a' if href exists and no children (leaf node), otherwise 'div'
+        const Tag = item.href && !hasChildren ? 'a' : 'div';
+        const attrs = item.href && !hasChildren ? { href: item.href } : {};
+        const itemClass = [
+            'nav-item',
+            active && 'active',
+            activeAncestor && 'active-ancestor',
+            expanded && 'expanded',
+            item.id === 'user-profile' && 'is-user-profile',
+            !item.icon && 'no-icon',
+        ].filter(Boolean).join(' ');
+        return (h("div", { key: item.id, class: `nav-item-wrapper level-${level}`, role: "none" }, h(Tag, { id: itemId, ...attrs, class: itemClass, style: { paddingLeft: this.orientation === 'horizontal' ? '0' : this.isExpanded ? paddingLeft : '0' }, onMouseEnter: () => {
+                if (this.orientation === 'horizontal') {
+                    this.hoveredId = item.id;
+                    this.updateGlider();
+                }
+                // Set hover for tooltip (collapsed mode, items without children)
+                if (!hasChildren && !this.isExpanded) {
+                    this.hoveredIconId = item.id;
+                }
+            }, onMouseLeave: () => {
+                if (this.orientation === 'horizontal') {
+                    this.hoveredId = null;
+                    this.updateGlider();
+                }
+                // Clear hover for tooltip
+                this.hoveredIconId = null;
+            }, onClick: e => {
+                e.stopPropagation();
+                this.handleItemClick(item);
+            }, onKeyDown: e => this.handleKeyDown(e, item), title: !this.isExpanded && hasChildren ? item.label : '', tabindex: "0", role: "treeitem", "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-selected": active ? 'true' : 'false' }, (item.icon || item.avatar || item.type === 'image' || item.type === 'icon' || item.type === 'avatar' || item.imageUrl) && (h("span", { class: "nav-icon-container" }, item.avatar || item.type === 'avatar' ? (h("ui-avatar", { src: item.avatar || item.imageUrl, shape: "circle", class: "nav-avatar-icon", size: this.isExpanded || this.orientation === 'horizontal' ? '1.5rem' : '2rem', status: item.status })) : item.type === 'image' || item.imageUrl ? (h("img", { src: item.imageUrl, alt: item.label, class: "nav-image-icon", style: { width: '24px', height: '24px', borderRadius: '4px', objectFit: 'cover' } })) : (h("span", { class: "nav-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), item.status && !item.avatar && item.type !== 'avatar' && h("span", { class: `nav-status-dot status-${item.status}` }), !this.isExpanded && item.badge && h("span", { class: "nav-badge-mini" }, item.badge), this.orientation === 'horizontal' && (item.id === 'user-profile' || this.isBottomItem(item.id)) && item.badge && h("span", { class: "nav-badge-mini" }, item.badge))), !hasChildren && !this.isExpanded && this.hoveredIconId === item.id && h("div", { class: { 'nav-tooltip': true, 'visible': true } }, item.label), (this.isExpanded || (this.orientation === 'horizontal' && !this.isBottomItem(item.id))) && (h("span", { class: "nav-label-container" }, h("span", { class: "nav-label" }, item.label), item.badge && h("span", { class: "nav-badge" }, item.badge))), hasChildren && (this.isExpanded || this.orientation === 'horizontal') && (h("span", { class: "nav-arrow" }, h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", fill: "none", class: expanded && this.orientation !== 'horizontal' ? 'rotate-180' : '' }, h("path", { d: "M6 9l6 6 6-6" }))))), (() => {
+            const contextItems = hasChildren ? item.children : [];
+            if (!contextItems || contextItems.length === 0)
+                return null;
+            if (!this.isExpanded || this.orientation === 'horizontal') {
+                return (h("ui-context-menu", { target: `#${itemId}`, items: contextItems, selectedId: this.activeId, theme: this.effectiveTheme, openOn: "hover", placement: this.orientation === 'horizontal' ? 'bottom' : this.position === 'left' ? 'right' : 'left', onItemSelect: e => {
+                        e.stopPropagation();
+                        if (hasChildren) {
+                            this.handleItemClick(e.detail.item);
+                        }
+                        else {
+                            this.handleItemClick(item);
+                        }
+                    } }));
+            }
+            return null;
+        })(), hasChildren && expanded && this.isExpanded && this.orientation !== 'horizontal' && (h("div", { class: "nav-children", role: "group" }, item.children.map(child => this.renderItem(child, level + 1))))));
+    }
+    static get is() { return "ui-navigation-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navigation-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navigation-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationItem[]",
+                    "resolved": "NavigationItem[]",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Main data source: Array of navigation items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "categories": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationItem[]",
+                    "resolved": "NavigationItem[]",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary data source: Categories to show at the top"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "bottomItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationItem[]",
+                    "resolved": "NavigationItem[]",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Bottom items data source"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "secondaryItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationItem[]",
+                    "resolved": "NavigationItem[]",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary items data source"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "bottomItemsSecondary": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NavigationItem[]",
+                    "resolved": "NavigationItem[]",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary bottom items data source"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "showSearch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show search bar in expanded mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-search",
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'expanded' | 'collapsed' | 'auto'",
+                    "resolved": "\"auto\" | \"collapsed\" | \"expanded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'collapsed'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Positioning of the navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'left'"
+            },
+            "collapsible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the navigation is collapsible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsible",
+                "defaultValue": "true"
+            },
+            "expandedWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width when expanded (css unit)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded-width",
+                "defaultValue": "'280px'"
+            },
+            "collapsedWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width when collapsed (css unit)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed-width",
+                "defaultValue": "'64px'"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show only icons in collapsed mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "true"
+            },
+            "accordion": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accordion mode: one expanded at a time"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accordion",
+                "defaultValue": "false"
+            },
+            "activeId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the currently active item (route aware)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-id"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark' | 'green' | 'auto'",
+                    "resolved": "\"auto\" | \"dark\" | \"green\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme preference (just sets a class or attribute)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "theme",
+                "defaultValue": "'auto'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'vertical'"
+            },
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'comfortable' | 'compact'",
+                    "resolved": "\"comfortable\" | \"compact\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Density of items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'comfortable'"
+            },
+            "indicatorPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Position of the active item indicator bar: 'start' (left) or 'end' (right)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator-position",
+                "defaultValue": "'start'"
+            },
+            "maxItems": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of items to show before overflowing to \"More\" menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-items",
+                "defaultValue": "4"
+            },
+            "companyLogo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Company Logo URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "company-logo"
+            },
+            "companyName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Company Name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "company-name"
+            },
+            "iconLibrary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'se' | 'fontawesome' | 'icons8' | 'iconoir' | 'ionicons' | 'lucide' | 'bootstrap' | 'default'",
+                    "resolved": "\"bootstrap\" | \"default\" | \"fontawesome\" | \"iconoir\" | \"icons8\" | \"ionicons\" | \"lucide\" | \"se\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default library for icons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-library",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isExpanded": {},
+            "isMobile": {},
+            "expandedItems": {},
+            "keyword": {},
+            "effectiveTheme": {},
+            "gliderTop": {},
+            "gliderHeight": {},
+            "gliderLeft": {},
+            "gliderWidth": {},
+            "gliderOpacity": {},
+            "hoveredId": {},
+            "hoveredIconId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "navOpen",
+                "name": "navOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "navClose",
+                "name": "navClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "navToggle",
+                "name": "navToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ expanded: boolean }",
+                    "resolved": "{ expanded: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "navItemClick",
+                "name": "navItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "NavigationItem",
+                    "resolved": "NavigationItem",
+                    "references": {
+                        "NavigationItem": {
+                            "location": "import",
+                            "path": "./navigation-types",
+                            "id": "src/components/ui-navigation-bar/navigation-bar/navigation-types.ts::NavigationItem",
+                            "referenceLocation": "NavigationItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "itemExpand",
+                "name": "itemExpand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "itemCollapse",
+                "name": "itemCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setActive": {
+                "complexType": {
+                    "signature": "(id: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "mode",
+                "methodName": "handleModeChange"
+            }, {
+                "propName": "theme",
+                "methodName": "onThemeChange"
+            }, {
+                "propName": "activeId",
+                "methodName": "onActiveIdChange"
+            }, {
+                "propName": "isExpanded",
+                "methodName": "onExpandChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": undefined,
+                "capture": true,
+                "passive": true
+            }];
+    }
+}