@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-navbar.js

@@ -1,680 +1 @@
-import { createDbIcon } from './db-icons.js';
-
-const SIZES = ['s', 'm', 'l'];
-const VARIANTS = ['default', 'transparent'];
-const POSITIONS = ['fixed', 'sticky', 'static'];
-function resolveIcon(name) {
-    if (!name)
-        return undefined;
-    return name;
-}
-class DbNavbar extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.mobileOpen = false;
-        this.userMenuOpen = false;
-        this.expandedMobile = {};
-        this.outsideHandler = null;
-    }
-    static get observedAttributes() {
-        return [
-            'items',
-            'user-menu-items',
-            'user-profile',
-            'size',
-            'variant',
-            'position',
-            'is-authenticated',
-            'show-search',
-            'search-placeholder',
-            'full-width',
-            'shadow',
-        ];
-    }
-    connectedCallback() {
-        this.render();
-        this.bindOutsideClick();
-    }
-    disconnectedCallback() {
-        this.unbindOutsideClick();
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.render();
-    }
-    get items() {
-        return this.parseItems('items');
-    }
-    set items(value) {
-        this.setAttribute('items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get userMenuItems() {
-        return this.parseItems('user-menu-items');
-    }
-    set userMenuItems(value) {
-        this.setAttribute('user-menu-items', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    get userProfile() {
-        return this.parseUserProfile();
-    }
-    set userProfile(value) {
-        if (value === null || value === undefined)
-            this.removeAttribute('user-profile');
-        else
-            this.setAttribute('user-profile', typeof value === 'string' ? value : JSON.stringify(value));
-    }
-    parseItems(attr = 'items') {
-        try {
-            const parsed = JSON.parse(this.getAttribute(attr) || '[]');
-            return Array.isArray(parsed) ? parsed : [];
-        }
-        catch {
-            return [];
-        }
-    }
-    parseUserProfile() {
-        const raw = this.getAttribute('user-profile');
-        if (!raw)
-            return null;
-        try {
-            return JSON.parse(raw);
-        }
-        catch {
-            return null;
-        }
-    }
-    iconSize(size) {
-        if (size === 's')
-            return 16;
-        if (size === 'l')
-            return 24;
-        return 20;
-    }
-    bindOutsideClick() {
-        if (this.outsideHandler)
-            return;
-        this.outsideHandler = (event) => {
-            if (!this.contains(event.target)) {
-                this.userMenuOpen = false;
-                this.updateUserMenuVisibility();
-            }
-        };
-        document.addEventListener('mousedown', this.outsideHandler);
-    }
-    unbindOutsideClick() {
-        if (!this.outsideHandler)
-            return;
-        document.removeEventListener('mousedown', this.outsideHandler);
-        this.outsideHandler = null;
-    }
-    dispatchItemClick(item, source) {
-        this.dispatchEvent(new CustomEvent(source === 'user' ? 'db-user-menu-item-click' : 'db-item-click', {
-            bubbles: true,
-            composed: true,
-            detail: { item, source },
-        }));
-    }
-    syncHostClasses() {
-        const size = this.getAttribute('size') || 'm';
-        const variant = this.getAttribute('variant') || 'default';
-        const position = this.getAttribute('position') || 'static';
-        this.className = [
-            'designbase-wc-navbar',
-            `designbase-wc-navbar--${SIZES.includes(size) ? size : 'm'}`,
-            `designbase-wc-navbar--${VARIANTS.includes(variant) ? variant : 'default'}`,
-            `designbase-wc-navbar--${POSITIONS.includes(position) ? position : 'static'}`,
-            this.hasAttribute('full-width') && 'designbase-wc-navbar--full-width',
-            this.hasAttribute('shadow') && 'designbase-wc-navbar--shadow',
-            this.mobileOpen && 'designbase-wc-navbar--mobile-open',
-        ]
-            .filter(Boolean)
-            .join(' ');
-    }
-    isMegaMenu(item) {
-        return Boolean(item.megaMenu && item.columns?.length);
-    }
-    createNavToggleButton(item, iconPx) {
-        const button = document.createElement('button');
-        button.type = 'button';
-        button.className = [
-            'designbase-wc-navbar__nav-link',
-            'designbase-wc-navbar__nav-link--has-children',
-            item.active && 'designbase-wc-navbar__nav-link--active',
-            item.disabled && 'designbase-wc-navbar__nav-link--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        button.disabled = Boolean(item.disabled);
-        const icon = resolveIcon(item.icon);
-        if (icon)
-            button.append(createDbIcon(icon, iconPx));
-        button.append(document.createTextNode(item.label));
-        const chevron = createDbIcon('chevron-down', 12);
-        chevron.classList.add('designbase-wc-navbar__chevron');
-        button.append(chevron);
-        return button;
-    }
-    createMegaLink(link, iconPx) {
-        const anchor = document.createElement('a');
-        anchor.href = link.href || '#';
-        anchor.className = [
-            'designbase-wc-navbar__mega-link',
-            link.active && 'designbase-wc-navbar__mega-link--active',
-            link.disabled && 'designbase-wc-navbar__mega-link--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const icon = resolveIcon(link.icon);
-        if (icon) {
-            const iconWrap = document.createElement('span');
-            iconWrap.className = 'designbase-wc-navbar__mega-link-icon';
-            iconWrap.append(createDbIcon(icon, iconPx));
-            anchor.append(iconWrap);
-        }
-        const body = document.createElement('span');
-        body.className = 'designbase-wc-navbar__mega-link-body';
-        const label = document.createElement('span');
-        label.className = 'designbase-wc-navbar__mega-link-label';
-        label.textContent = link.label;
-        body.append(label);
-        if (link.description) {
-            const desc = document.createElement('span');
-            desc.className = 'designbase-wc-navbar__mega-link-desc';
-            desc.textContent = link.description;
-            body.append(desc);
-        }
-        anchor.append(body);
-        anchor.addEventListener('click', (event) => {
-            event.preventDefault();
-            if (link.disabled)
-                return;
-            this.dispatchItemClick(link, 'nav');
-        });
-        return anchor;
-    }
-    createMegaMenu(item, iconPx) {
-        const li = document.createElement('li');
-        li.className = 'designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega';
-        const button = this.createNavToggleButton(item, iconPx);
-        const mega = document.createElement('div');
-        mega.className = 'designbase-wc-navbar__mega';
-        const inner = document.createElement('div');
-        inner.className = 'designbase-wc-navbar__mega-inner';
-        const columnsWrap = document.createElement('div');
-        columnsWrap.className = 'designbase-wc-navbar__mega-columns';
-        columnsWrap.style.setProperty('--db-navbar-mega-columns', String(item.columns.length));
-        item.columns.forEach((column) => {
-            const col = document.createElement('div');
-            col.className = 'designbase-wc-navbar__mega-column';
-            if (column.title) {
-                const title = document.createElement('span');
-                title.className = 'designbase-wc-navbar__mega-column-title';
-                title.textContent = column.title;
-                col.append(title);
-            }
-            const list = document.createElement('ul');
-            list.className = 'designbase-wc-navbar__mega-list';
-            column.items.forEach((link) => {
-                const linkLi = document.createElement('li');
-                linkLi.append(this.createMegaLink(link, iconPx));
-                list.append(linkLi);
-            });
-            col.append(list);
-            columnsWrap.append(col);
-        });
-        inner.append(columnsWrap);
-        if (item.featured) {
-            inner.append(this.createMegaFeatured(item.featured, iconPx));
-        }
-        mega.append(inner);
-        li.append(button, mega);
-        return li;
-    }
-    createMegaFeatured(featured, iconPx) {
-        const card = document.createElement('a');
-        card.href = featured.href || '#';
-        card.className = 'designbase-wc-navbar__mega-featured';
-        if (featured.image) {
-            card.style.setProperty('--db-navbar-mega-featured-image', `url("${featured.image}")`);
-            card.classList.add('designbase-wc-navbar__mega-featured--image');
-        }
-        const featuredIcon = resolveIcon(featured.icon);
-        if (featuredIcon) {
-            const iconWrap = document.createElement('span');
-            iconWrap.className = 'designbase-wc-navbar__mega-featured-icon';
-            iconWrap.append(createDbIcon(featuredIcon, iconPx + 4));
-            card.append(iconWrap);
-        }
-        if (featured.title) {
-            const title = document.createElement('span');
-            title.className = 'designbase-wc-navbar__mega-featured-title';
-            title.textContent = featured.title;
-            card.append(title);
-        }
-        if (featured.description) {
-            const desc = document.createElement('span');
-            desc.className = 'designbase-wc-navbar__mega-featured-desc';
-            desc.textContent = featured.description;
-            card.append(desc);
-        }
-        if (featured.ctaLabel) {
-            const cta = document.createElement('span');
-            cta.className = 'designbase-wc-navbar__mega-featured-cta';
-            cta.append(document.createTextNode(featured.ctaLabel));
-            cta.append(createDbIcon('chevron-right', 14));
-            card.append(cta);
-        }
-        card.addEventListener('click', (event) => {
-            event.preventDefault();
-            this.dispatchItemClick({ id: `${featured.href || 'featured'}`, label: featured.title || 'featured', href: featured.href }, 'nav');
-        });
-        return card;
-    }
-    createDesktopNavItem(item, iconPx) {
-        if (this.isMegaMenu(item)) {
-            return this.createMegaMenu(item, iconPx);
-        }
-        const li = document.createElement('li');
-        li.className = 'designbase-wc-navbar__nav-item';
-        const hasChildren = Boolean(item.children?.length);
-        if (hasChildren) {
-            const dropdown = document.createElement('div');
-            dropdown.className = 'designbase-wc-navbar__dropdown';
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = [
-                'designbase-wc-navbar__nav-link',
-                'designbase-wc-navbar__nav-link--has-children',
-                item.active && 'designbase-wc-navbar__nav-link--active',
-                item.disabled && 'designbase-wc-navbar__nav-link--disabled',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            button.disabled = Boolean(item.disabled);
-            const icon = resolveIcon(item.icon);
-            if (icon)
-                button.append(createDbIcon(icon, iconPx));
-            button.append(document.createTextNode(item.label));
-            const chevron = createDbIcon('chevron-down', 12);
-            chevron.classList.add('designbase-wc-navbar__chevron');
-            button.append(chevron);
-            const menu = document.createElement('ul');
-            menu.className = 'designbase-wc-navbar__dropdown-menu';
-            item.children.forEach((child) => {
-                const childLi = document.createElement('li');
-                const link = document.createElement('a');
-                link.href = child.href || '#';
-                link.className = [
-                    'designbase-wc-navbar__dropdown-item',
-                    child.active && 'designbase-wc-navbar__dropdown-item--active',
-                    child.disabled && 'designbase-wc-navbar__dropdown-item--disabled',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-                const childIcon = resolveIcon(child.icon);
-                if (childIcon)
-                    link.append(createDbIcon(childIcon, iconPx));
-                link.append(document.createTextNode(child.label));
-                link.addEventListener('click', (event) => {
-                    if (child.disabled) {
-                        event.preventDefault();
-                        return;
-                    }
-                    event.preventDefault();
-                    this.dispatchItemClick(child, 'nav');
-                });
-                childLi.append(link);
-                menu.append(childLi);
-            });
-            dropdown.append(button, menu);
-            li.append(dropdown);
-            return li;
-        }
-        const link = document.createElement('a');
-        link.href = item.href || '#';
-        link.className = [
-            'designbase-wc-navbar__nav-link',
-            item.active && 'designbase-wc-navbar__nav-link--active',
-            item.disabled && 'designbase-wc-navbar__nav-link--disabled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const icon = resolveIcon(item.icon);
-        if (icon)
-            link.append(createDbIcon(icon, iconPx));
-        link.append(document.createTextNode(item.label));
-        link.addEventListener('click', (event) => {
-            if (item.disabled) {
-                event.preventDefault();
-                return;
-            }
-            event.preventDefault();
-            this.dispatchItemClick(item, 'nav');
-        });
-        li.append(link);
-        return li;
-    }
-    createUserMenuItemElement(item, size, onSelect) {
-        const menuItem = document.createElement('db-menu-item');
-        menuItem.setAttribute('label', item.label);
-        menuItem.setAttribute('type', 'block');
-        menuItem.setAttribute('menu-style', 'dropdown');
-        menuItem.setAttribute('size', size);
-        if (item.href)
-            menuItem.setAttribute('href', item.href);
-        if (item.icon)
-            menuItem.setAttribute('icon', item.icon);
-        if (item.disabled)
-            menuItem.setAttribute('disabled', '');
-        menuItem.addEventListener('db-click', () => {
-            if (item.disabled)
-                return;
-            onSelect();
-            this.dispatchItemClick(item, 'user');
-        });
-        return menuItem;
-    }
-    bindSearchEvents(search) {
-        search.addEventListener('db-search', (event) => {
-            const detail = event.detail;
-            const query = detail.query ?? detail.value ?? '';
-            this.dispatchEvent(new CustomEvent('db-search', {
-                bubbles: true,
-                composed: true,
-                detail: { query, value: query },
-            }));
-        });
-    }
-    applyAvatarProfile(avatar, userProfile, size) {
-        avatar.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
-        avatar.setAttribute('initials', userProfile.name);
-        avatar.setAttribute('alt', userProfile.name);
-        if (userProfile.avatar)
-            avatar.setAttribute('src', userProfile.avatar);
-        if (userProfile.badge !== undefined)
-            avatar.setAttribute('badge', String(userProfile.badge));
-        if (userProfile.badgeVariant)
-            avatar.setAttribute('badge-variant', userProfile.badgeVariant);
-        if (userProfile.badgeStyle)
-            avatar.setAttribute('badge-style', userProfile.badgeStyle);
-        if (userProfile.badgeText)
-            avatar.setAttribute('badge-text', userProfile.badgeText);
-    }
-    getMobileChildren(item) {
-        if (this.isMegaMenu(item)) {
-            const flattened = (item.columns || []).flatMap((column) => column.items);
-            if (item.featured?.href) {
-                flattened.push({
-                    id: `${item.id}-featured`,
-                    label: item.featured.title || item.featured.ctaLabel || item.label,
-                    href: item.featured.href,
-                    icon: item.featured.icon,
-                });
-            }
-            return flattened;
-        }
-        return item.children || [];
-    }
-    createMobileMenuItem(item, size) {
-        const children = this.getMobileChildren(item);
-        const hasChildren = children.length > 0;
-        const expanded = Boolean(this.expandedMobile[item.id]);
-        const menuItem = document.createElement('db-menu-item');
-        menuItem.setAttribute('label', item.label);
-        menuItem.setAttribute('type', 'block');
-        menuItem.setAttribute('menu-style', 'accordion');
-        menuItem.setAttribute('size', size);
-        if (item.href)
-            menuItem.setAttribute('href', item.href);
-        if (item.icon)
-            menuItem.setAttribute('icon', item.icon);
-        if (item.active)
-            menuItem.setAttribute('active', '');
-        if (item.disabled)
-            menuItem.setAttribute('disabled', '');
-        if (hasChildren) {
-            menuItem.setAttribute('expandable', '');
-            menuItem.subItems = children.map((child) => ({
-                id: child.id,
-                label: child.label,
-                href: child.href,
-                icon: child.icon,
-                active: child.active,
-                disabled: child.disabled,
-            }));
-            if (expanded)
-                menuItem.setAttribute('expanded', '');
-        }
-        menuItem.addEventListener('db-click', () => {
-            if (item.disabled)
-                return;
-            if (hasChildren) {
-                this.expandedMobile[item.id] = !expanded;
-                this.renderMobileMenu();
-                return;
-            }
-            this.mobileOpen = false;
-            this.dispatchItemClick(item, 'mobile');
-            this.render();
-        });
-        menuItem.addEventListener('db-child-click', (event) => {
-            const detail = event.detail;
-            this.mobileOpen = false;
-            this.dispatchItemClick(detail.child, 'mobile');
-            this.render();
-        });
-        return menuItem;
-    }
-    updateUserMenuVisibility() {
-        const menu = this.querySelector('.designbase-wc-navbar__user-dropdown-menu');
-        if (menu)
-            menu.hidden = !this.userMenuOpen;
-    }
-    renderMobileMenu() {
-        const list = this.querySelector('.designbase-wc-navbar__mobile-nav-list');
-        if (!list)
-            return;
-        const size = this.getAttribute('size') || 'm';
-        const items = this.parseItems();
-        list.replaceChildren(...items.map((item) => this.createMobileMenuItem(item, size)));
-    }
-    render() {
-        this.syncHostClasses();
-        this.setAttribute('role', 'navigation');
-        this.setAttribute('aria-label', '메인 네비게이션');
-        const size = this.getAttribute('size') || 'm';
-        const iconPx = this.iconSize(size);
-        const items = this.parseItems();
-        const userMenuItems = this.parseItems('user-menu-items');
-        const userProfile = this.parseUserProfile();
-        const isAuthenticated = this.hasAttribute('is-authenticated');
-        const showSearch = this.hasAttribute('show-search');
-        this.replaceChildren();
-        const container = document.createElement('div');
-        container.className = [
-            'designbase-wc-navbar__container',
-            this.hasAttribute('full-width') && 'designbase-wc-navbar__container--full-width',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const left = document.createElement('div');
-        left.className = 'designbase-wc-navbar__left';
-        const brand = document.createElement('div');
-        brand.className = 'designbase-wc-navbar__brand';
-        const logoWrap = document.createElement('div');
-        logoWrap.className = 'designbase-wc-navbar__logo';
-        const logo = document.createElement('db-logo');
-        logo.setAttribute('type', 'designbase');
-        logo.setAttribute('size', 's');
-        logo.setAttribute('clickable', '');
-        logo.addEventListener('db-click', () => {
-            this.dispatchEvent(new CustomEvent('db-logo-click', { bubbles: true, composed: true }));
-        });
-        logoWrap.append(logo);
-        brand.append(logoWrap);
-        left.append(brand);
-        const right = document.createElement('div');
-        right.className = 'designbase-wc-navbar__right';
-        const desktopNav = document.createElement('div');
-        desktopNav.className = 'designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop';
-        const desktopList = document.createElement('ul');
-        desktopList.className = 'designbase-wc-navbar__nav-list';
-        items.forEach((item) => desktopList.append(this.createDesktopNavItem(item, iconPx)));
-        desktopNav.append(desktopList);
-        right.append(desktopNav);
-        if (showSearch) {
-            const searchWrap = document.createElement('div');
-            searchWrap.className = 'designbase-wc-navbar__search';
-            const search = document.createElement('db-search-bar');
-            search.setAttribute('variant', 'outlined');
-            search.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
-            search.setAttribute('placeholder', this.getAttribute('search-placeholder') || '검색...');
-            this.bindSearchEvents(search);
-            searchWrap.append(search);
-            right.append(searchWrap);
-        }
-        const userMenu = document.createElement('div');
-        userMenu.className = 'designbase-wc-navbar__user-menu';
-        if (isAuthenticated && userProfile) {
-            const dropdown = document.createElement('div');
-            dropdown.className = 'designbase-wc-navbar__user-dropdown';
-            const toggle = document.createElement('button');
-            toggle.type = 'button';
-            toggle.className = 'designbase-wc-navbar__user-toggle';
-            toggle.setAttribute('aria-expanded', String(this.userMenuOpen));
-            const avatar = document.createElement('db-avatar');
-            this.applyAvatarProfile(avatar, userProfile, size);
-            const name = document.createElement('span');
-            name.className = 'designbase-wc-navbar__user-name';
-            name.textContent = userProfile.name;
-            toggle.append(avatar, name, createDbIcon('chevron-down', 12));
-            toggle.addEventListener('click', () => {
-                this.userMenuOpen = !this.userMenuOpen;
-                toggle.setAttribute('aria-expanded', String(this.userMenuOpen));
-                this.updateUserMenuVisibility();
-            });
-            const userDropdownMenu = document.createElement('ul');
-            userDropdownMenu.className = 'designbase-wc-navbar__user-dropdown-menu';
-            userDropdownMenu.hidden = !this.userMenuOpen;
-            if (userProfile.email) {
-                const info = document.createElement('li');
-                info.className = 'designbase-wc-navbar__user-info';
-                const email = document.createElement('span');
-                email.className = 'designbase-wc-navbar__user-email';
-                email.textContent = userProfile.email;
-                info.append(email);
-                userDropdownMenu.append(info);
-            }
-            userMenuItems.forEach((item) => {
-                const li = document.createElement('li');
-                li.append(this.createUserMenuItemElement(item, size, () => {
-                    this.userMenuOpen = false;
-                    this.updateUserMenuVisibility();
-                }));
-                userDropdownMenu.append(li);
-            });
-            dropdown.append(toggle, userDropdownMenu);
-            userMenu.append(dropdown);
-        }
-        else {
-            const login = document.createElement('db-button');
-            login.setAttribute('variant', 'primary');
-            login.setAttribute('size', size === 's' ? 's' : size === 'l' ? 'l' : 'm');
-            login.textContent = '로그인';
-            login.addEventListener('db-click', () => {
-                this.dispatchEvent(new CustomEvent('db-login-click', { bubbles: true, composed: true }));
-            });
-            userMenu.append(login);
-        }
-        right.append(userMenu);
-        const mobileToggle = document.createElement('button');
-        mobileToggle.type = 'button';
-        mobileToggle.className = 'designbase-wc-navbar__mobile-toggle';
-        mobileToggle.setAttribute('aria-expanded', String(this.mobileOpen));
-        mobileToggle.setAttribute('aria-label', '메뉴 열기');
-        for (let i = 0; i < 3; i += 1) {
-            const line = document.createElement('span');
-            line.className = 'designbase-wc-navbar__mobile-toggle-line';
-            mobileToggle.append(line);
-        }
-        mobileToggle.addEventListener('click', () => {
-            this.mobileOpen = !this.mobileOpen;
-            this.render();
-        });
-        container.append(left, right, mobileToggle);
-        this.append(container);
-        if (this.mobileOpen) {
-            const mobileMenu = document.createElement('div');
-            mobileMenu.className = 'designbase-wc-navbar__mobile-menu';
-            if (showSearch) {
-                const mobileSearch = document.createElement('div');
-                mobileSearch.className = 'designbase-wc-navbar__mobile-search';
-                const search = document.createElement('db-search-bar');
-                search.setAttribute('variant', 'outlined');
-                search.setAttribute('size', 's');
-                search.setAttribute('full-width', '');
-                search.setAttribute('placeholder', this.getAttribute('search-placeholder') || '검색...');
-                this.bindSearchEvents(search);
-                mobileSearch.append(search);
-                mobileMenu.append(mobileSearch);
-            }
-            const mobileList = document.createElement('ul');
-            mobileList.className = 'designbase-wc-navbar__mobile-nav-list';
-            mobileMenu.append(mobileList);
-            const mobileUser = document.createElement('div');
-            mobileUser.className = 'designbase-wc-navbar__mobile-user';
-            if (isAuthenticated && userProfile) {
-                const info = document.createElement('div');
-                info.className = 'designbase-wc-navbar__mobile-user-info';
-                const avatar = document.createElement('db-avatar');
-                this.applyAvatarProfile(avatar, userProfile, 'm');
-                const details = document.createElement('div');
-                const name = document.createElement('div');
-                name.className = 'designbase-wc-navbar__mobile-user-name';
-                name.textContent = userProfile.name;
-                details.append(name);
-                if (userProfile.email) {
-                    const email = document.createElement('div');
-                    email.className = 'designbase-wc-navbar__mobile-user-email';
-                    email.textContent = userProfile.email;
-                    details.append(email);
-                }
-                info.append(avatar, details);
-                mobileUser.append(info);
-                if (userMenuItems.length) {
-                    const userMenuList = document.createElement('ul');
-                    userMenuList.className = 'designbase-wc-navbar__mobile-user-menu';
-                    userMenuItems.forEach((item) => {
-                        const li = document.createElement('li');
-                        li.append(this.createUserMenuItemElement(item, 'm', () => {
-                            this.mobileOpen = false;
-                            this.render();
-                        }));
-                        userMenuList.append(li);
-                    });
-                    mobileUser.append(userMenuList);
-                }
-            }
-            else {
-                const login = document.createElement('db-button');
-                login.setAttribute('variant', 'primary');
-                login.setAttribute('size', 'm');
-                login.setAttribute('full-width', '');
-                login.textContent = '로그인';
-                login.addEventListener('db-click', () => {
-                    this.dispatchEvent(new CustomEvent('db-login-click', { bubbles: true, composed: true }));
-                });
-                mobileUser.append(login);
-            }
-            mobileMenu.append(mobileUser);
-            this.append(mobileMenu);
-            this.renderMobileMenu();
-        }
-    }
-}
-if (!customElements.get('db-navbar')) {
-    customElements.define('db-navbar', DbNavbar);
-}
-
-export { DbNavbar };
+import{createDbIcon as e}from"./db-icons.js";const t=["s","m","l"],a=["default","transparent"],n=["fixed","sticky","static"];function resolveIcon(e){if(e)return e}class DbNavbar extends HTMLElement{constructor(){super(...arguments),this.mobileOpen=!1,this.userMenuOpen=!1,this.expandedMobile={},this.outsideHandler=null}static get observedAttributes(){return["items","user-menu-items","user-profile","size","variant","position","is-authenticated","show-search","search-placeholder","full-width","shadow"]}connectedCallback(){this.render(),this.bindOutsideClick()}disconnectedCallback(){this.unbindOutsideClick()}attributeChangedCallback(){this.isConnected&&this.render()}get items(){return this.parseItems("items")}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get userMenuItems(){return this.parseItems("user-menu-items")}set userMenuItems(e){this.setAttribute("user-menu-items","string"==typeof e?e:JSON.stringify(e))}get userProfile(){return this.parseUserProfile()}set userProfile(e){null==e?this.removeAttribute("user-profile"):this.setAttribute("user-profile","string"==typeof e?e:JSON.stringify(e))}parseItems(e="items"){try{const t=JSON.parse(this.getAttribute(e)||"[]");return Array.isArray(t)?t:[]}catch{return[]}}parseUserProfile(){const e=this.getAttribute("user-profile");if(!e)return null;try{return JSON.parse(e)}catch{return null}}iconSize(e){return"s"===e?16:"l"===e?24:20}bindOutsideClick(){this.outsideHandler||(this.outsideHandler=e=>{this.contains(e.target)||(this.userMenuOpen=!1,this.updateUserMenuVisibility())},document.addEventListener("mousedown",this.outsideHandler))}unbindOutsideClick(){this.outsideHandler&&(document.removeEventListener("mousedown",this.outsideHandler),this.outsideHandler=null)}dispatchItemClick(e,t){this.dispatchEvent(new CustomEvent("user"===t?"db-user-menu-item-click":"db-item-click",{bubbles:!0,composed:!0,detail:{item:e,source:t}}))}syncHostClasses(){const e=this.getAttribute("size")||"m",s=this.getAttribute("variant")||"default",i=this.getAttribute("position")||"static";this.className=["designbase-wc-navbar",`designbase-wc-navbar--${t.includes(e)?e:"m"}`,`designbase-wc-navbar--${a.includes(s)?s:"default"}`,`designbase-wc-navbar--${n.includes(i)?i:"static"}`,this.hasAttribute("full-width")&&"designbase-wc-navbar--full-width",this.hasAttribute("shadow")&&"designbase-wc-navbar--shadow",this.mobileOpen&&"designbase-wc-navbar--mobile-open"].filter(Boolean).join(" ")}isMegaMenu(e){return Boolean(e.megaMenu&&e.columns?.length)}createNavToggleButton(t,a){const n=document.createElement("button");n.type="button",n.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),n.disabled=Boolean(t.disabled);const s=resolveIcon(t.icon);s&&n.append(e(s,a)),n.append(document.createTextNode(t.label));const i=e("chevron-down",12);return i.classList.add("designbase-wc-navbar__chevron"),n.append(i),n}createMegaLink(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className=["designbase-wc-navbar__mega-link",t.active&&"designbase-wc-navbar__mega-link--active",t.disabled&&"designbase-wc-navbar__mega-link--disabled"].filter(Boolean).join(" ");const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-link-icon",t.append(e(s,a)),n.append(t)}const i=document.createElement("span");i.className="designbase-wc-navbar__mega-link-body";const r=document.createElement("span");if(r.className="designbase-wc-navbar__mega-link-label",r.textContent=t.label,i.append(r),t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-link-desc",e.textContent=t.description,i.append(e)}return n.append(i),n.addEventListener("click",e=>{e.preventDefault(),t.disabled||this.dispatchItemClick(t,"nav")}),n}createMegaMenu(e,t){const a=document.createElement("li");a.className="designbase-wc-navbar__nav-item designbase-wc-navbar__nav-item--mega";const n=this.createNavToggleButton(e,t),s=document.createElement("div");s.className="designbase-wc-navbar__mega";const i=document.createElement("div");i.className="designbase-wc-navbar__mega-inner";const r=document.createElement("div");return r.className="designbase-wc-navbar__mega-columns",r.style.setProperty("--db-navbar-mega-columns",String(e.columns.length)),e.columns.forEach(e=>{const a=document.createElement("div");if(a.className="designbase-wc-navbar__mega-column",e.title){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-column-title",t.textContent=e.title,a.append(t)}const n=document.createElement("ul");n.className="designbase-wc-navbar__mega-list",e.items.forEach(e=>{const a=document.createElement("li");a.append(this.createMegaLink(e,t)),n.append(a)}),a.append(n),r.append(a)}),i.append(r),e.featured&&i.append(this.createMegaFeatured(e.featured,t)),s.append(i),a.append(n,s),a}createMegaFeatured(t,a){const n=document.createElement("a");n.href=t.href||"#",n.className="designbase-wc-navbar__mega-featured",t.image&&(n.style.setProperty("--db-navbar-mega-featured-image",`url("${t.image}")`),n.classList.add("designbase-wc-navbar__mega-featured--image"));const s=resolveIcon(t.icon);if(s){const t=document.createElement("span");t.className="designbase-wc-navbar__mega-featured-icon",t.append(e(s,a+4)),n.append(t)}if(t.title){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-title",e.textContent=t.title,n.append(e)}if(t.description){const e=document.createElement("span");e.className="designbase-wc-navbar__mega-featured-desc",e.textContent=t.description,n.append(e)}if(t.ctaLabel){const a=document.createElement("span");a.className="designbase-wc-navbar__mega-featured-cta",a.append(document.createTextNode(t.ctaLabel)),a.append(e("chevron-right",14)),n.append(a)}return n.addEventListener("click",e=>{e.preventDefault(),this.dispatchItemClick({id:`${t.href||"featured"}`,label:t.title||"featured",href:t.href},"nav")}),n}createDesktopNavItem(t,a){if(this.isMegaMenu(t))return this.createMegaMenu(t,a);const n=document.createElement("li");n.className="designbase-wc-navbar__nav-item";if(Boolean(t.children?.length)){const s=document.createElement("div");s.className="designbase-wc-navbar__dropdown";const i=document.createElement("button");i.type="button",i.className=["designbase-wc-navbar__nav-link","designbase-wc-navbar__nav-link--has-children",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" "),i.disabled=Boolean(t.disabled);const r=resolveIcon(t.icon);r&&i.append(e(r,a)),i.append(document.createTextNode(t.label));const c=e("chevron-down",12);c.classList.add("designbase-wc-navbar__chevron"),i.append(c);const d=document.createElement("ul");return d.className="designbase-wc-navbar__dropdown-menu",t.children.forEach(t=>{const n=document.createElement("li"),s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__dropdown-item",t.active&&"designbase-wc-navbar__dropdown-item--active",t.disabled&&"designbase-wc-navbar__dropdown-item--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),d.append(n)}),s.append(i,d),n.append(s),n}const s=document.createElement("a");s.href=t.href||"#",s.className=["designbase-wc-navbar__nav-link",t.active&&"designbase-wc-navbar__nav-link--active",t.disabled&&"designbase-wc-navbar__nav-link--disabled"].filter(Boolean).join(" ");const i=resolveIcon(t.icon);return i&&s.append(e(i,a)),s.append(document.createTextNode(t.label)),s.addEventListener("click",e=>{t.disabled?e.preventDefault():(e.preventDefault(),this.dispatchItemClick(t,"nav"))}),n.append(s),n}createUserMenuItemElement(e,t,a){const n=document.createElement("db-menu-item");return n.setAttribute("label",e.label),n.setAttribute("type","block"),n.setAttribute("menu-style","dropdown"),n.setAttribute("size",t),e.href&&n.setAttribute("href",e.href),e.icon&&n.setAttribute("icon",e.icon),e.disabled&&n.setAttribute("disabled",""),n.addEventListener("db-click",()=>{e.disabled||(a(),this.dispatchItemClick(e,"user"))}),n}bindSearchEvents(e){e.addEventListener("db-search",e=>{const t=e.detail,a=t.query??t.value??"";this.dispatchEvent(new CustomEvent("db-search",{bubbles:!0,composed:!0,detail:{query:a,value:a}}))})}applyAvatarProfile(e,t,a){e.setAttribute("size","s"===a?"s":"l"===a?"l":"m"),e.setAttribute("initials",t.name),e.setAttribute("alt",t.name),t.avatar&&e.setAttribute("src",t.avatar),void 0!==t.badge&&e.setAttribute("badge",String(t.badge)),t.badgeVariant&&e.setAttribute("badge-variant",t.badgeVariant),t.badgeStyle&&e.setAttribute("badge-style",t.badgeStyle),t.badgeText&&e.setAttribute("badge-text",t.badgeText)}getMobileChildren(e){if(this.isMegaMenu(e)){const t=(e.columns||[]).flatMap(e=>e.items);return e.featured?.href&&t.push({id:`${e.id}-featured`,label:e.featured.title||e.featured.ctaLabel||e.label,href:e.featured.href,icon:e.featured.icon}),t}return e.children||[]}createMobileMenuItem(e,t){const a=this.getMobileChildren(e),n=a.length>0,s=Boolean(this.expandedMobile[e.id]),i=document.createElement("db-menu-item");return i.setAttribute("label",e.label),i.setAttribute("type","block"),i.setAttribute("menu-style","accordion"),i.setAttribute("size",t),e.href&&i.setAttribute("href",e.href),e.icon&&i.setAttribute("icon",e.icon),e.active&&i.setAttribute("active",""),e.disabled&&i.setAttribute("disabled",""),n&&(i.setAttribute("expandable",""),i.subItems=a.map(e=>({id:e.id,label:e.label,href:e.href,icon:e.icon,active:e.active,disabled:e.disabled})),s&&i.setAttribute("expanded","")),i.addEventListener("db-click",()=>{if(!e.disabled){if(n)return this.expandedMobile[e.id]=!s,void this.renderMobileMenu();this.mobileOpen=!1,this.dispatchItemClick(e,"mobile"),this.render()}}),i.addEventListener("db-child-click",e=>{const t=e.detail;this.mobileOpen=!1,this.dispatchItemClick(t.child,"mobile"),this.render()}),i}updateUserMenuVisibility(){const e=this.querySelector(".designbase-wc-navbar__user-dropdown-menu");e&&(e.hidden=!this.userMenuOpen)}renderMobileMenu(){const e=this.querySelector(".designbase-wc-navbar__mobile-nav-list");if(!e)return;const t=this.getAttribute("size")||"m",a=this.parseItems();e.replaceChildren(...a.map(e=>this.createMobileMenuItem(e,t)))}render(){this.syncHostClasses(),this.setAttribute("role","navigation"),this.setAttribute("aria-label","메인 네비게이션");const t=this.getAttribute("size")||"m",a=this.iconSize(t),n=this.parseItems(),s=this.parseItems("user-menu-items"),i=this.parseUserProfile(),r=this.hasAttribute("is-authenticated"),c=this.hasAttribute("show-search");this.replaceChildren();const d=document.createElement("div");d.className=["designbase-wc-navbar__container",this.hasAttribute("full-width")&&"designbase-wc-navbar__container--full-width"].filter(Boolean).join(" ");const l=document.createElement("div");l.className="designbase-wc-navbar__left";const o=document.createElement("div");o.className="designbase-wc-navbar__brand";const b=document.createElement("div");b.className="designbase-wc-navbar__logo";const u=document.createElement("db-logo");u.setAttribute("type","designbase"),u.setAttribute("size","s"),u.setAttribute("clickable",""),u.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-logo-click",{bubbles:!0,composed:!0}))}),b.append(u),o.append(b),l.append(o);const m=document.createElement("div");m.className="designbase-wc-navbar__right";const p=document.createElement("div");p.className="designbase-wc-navbar__nav designbase-wc-navbar__nav--desktop";const h=document.createElement("ul");if(h.className="designbase-wc-navbar__nav-list",n.forEach(e=>h.append(this.createDesktopNavItem(e,a))),p.append(h),m.append(p),c){const e=document.createElement("div");e.className="designbase-wc-navbar__search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),e.append(a),m.append(e)}const v=document.createElement("div");if(v.className="designbase-wc-navbar__user-menu",r&&i){const a=document.createElement("div");a.className="designbase-wc-navbar__user-dropdown";const n=document.createElement("button");n.type="button",n.className="designbase-wc-navbar__user-toggle",n.setAttribute("aria-expanded",String(this.userMenuOpen));const r=document.createElement("db-avatar");this.applyAvatarProfile(r,i,t);const c=document.createElement("span");c.className="designbase-wc-navbar__user-name",c.textContent=i.name,n.append(r,c,e("chevron-down",12)),n.addEventListener("click",()=>{this.userMenuOpen=!this.userMenuOpen,n.setAttribute("aria-expanded",String(this.userMenuOpen)),this.updateUserMenuVisibility()});const d=document.createElement("ul");if(d.className="designbase-wc-navbar__user-dropdown-menu",d.hidden=!this.userMenuOpen,i.email){const e=document.createElement("li");e.className="designbase-wc-navbar__user-info";const t=document.createElement("span");t.className="designbase-wc-navbar__user-email",t.textContent=i.email,e.append(t),d.append(e)}s.forEach(e=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(e,t,()=>{this.userMenuOpen=!1,this.updateUserMenuVisibility()})),d.append(a)}),a.append(n,d),v.append(a)}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","s"===t?"s":"l"===t?"l":"m"),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),v.append(e)}m.append(v);const g=document.createElement("button");g.type="button",g.className="designbase-wc-navbar__mobile-toggle",g.setAttribute("aria-expanded",String(this.mobileOpen)),g.setAttribute("aria-label","메뉴 열기");for(let e=0;e<3;e+=1){const e=document.createElement("span");e.className="designbase-wc-navbar__mobile-toggle-line",g.append(e)}if(g.addEventListener("click",()=>{this.mobileOpen=!this.mobileOpen,this.render()}),d.append(l,m,g),this.append(d),this.mobileOpen){const e=document.createElement("div");if(e.className="designbase-wc-navbar__mobile-menu",c){const t=document.createElement("div");t.className="designbase-wc-navbar__mobile-search";const a=document.createElement("db-search-bar");a.setAttribute("variant","outlined"),a.setAttribute("size","s"),a.setAttribute("full-width",""),a.setAttribute("placeholder",this.getAttribute("search-placeholder")||"검색..."),this.bindSearchEvents(a),t.append(a),e.append(t)}const t=document.createElement("ul");t.className="designbase-wc-navbar__mobile-nav-list",e.append(t);const a=document.createElement("div");if(a.className="designbase-wc-navbar__mobile-user",r&&i){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-info";const t=document.createElement("db-avatar");this.applyAvatarProfile(t,i,"m");const n=document.createElement("div"),r=document.createElement("div");if(r.className="designbase-wc-navbar__mobile-user-name",r.textContent=i.name,n.append(r),i.email){const e=document.createElement("div");e.className="designbase-wc-navbar__mobile-user-email",e.textContent=i.email,n.append(e)}if(e.append(t,n),a.append(e),s.length){const e=document.createElement("ul");e.className="designbase-wc-navbar__mobile-user-menu",s.forEach(t=>{const a=document.createElement("li");a.append(this.createUserMenuItemElement(t,"m",()=>{this.mobileOpen=!1,this.render()})),e.append(a)}),a.append(e)}}else{const e=document.createElement("db-button");e.setAttribute("variant","primary"),e.setAttribute("size","m"),e.setAttribute("full-width",""),e.textContent="로그인",e.addEventListener("db-click",()=>{this.dispatchEvent(new CustomEvent("db-login-click",{bubbles:!0,composed:!0}))}),a.append(e)}e.append(a),this.append(e),this.renderMobileMenu()}}}customElements.get("db-navbar")||customElements.define("db-navbar",DbNavbar);export{DbNavbar};