web-mojo 2.1.550 → 2.1.626

package/dist/chunks/TopNav-DGtRj5F4.js

@@ -0,0 +1,1039 @@
+import { V as View } from "./WebApp-ciExPk0c.js";
+import Dialog from "./Dialog-aTTrQ6uW.js";
+import { G as GroupList } from "./ContextMenu-Ckttp-rD.js";
+class ResultsView extends View {
+  constructor(options = {}) {
+    super({
+      className: "search-results-view flex-grow-1 overflow-auto d-flex flex-column",
+      template: `
+                <div class="flex-grow-1 overflow-auto">
+                {{#data.loading}}
+                    <div class="text-center p-4">
+                        <div class="spinner-border spinner-border-sm text-muted" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <div class="mt-2 small text-muted">{{data.loadingText}}</div>
+                    </div>
+                {{/data.loading}}
+
+                {{^data.loading}}
+                    {{#data.items}}
+                        <div class="simple-search-item position-relative"
+                             data-action="select-item"
+                             data-item-index="{{index}}">
+                            {{{itemContent}}}
+                            <i class="bi bi-chevron-right position-absolute end-0 top-50 translate-middle-y me-3 text-muted"></i>
+                        </div>
+                    {{/data.items}}
+
+                    {{#data.showNoResults}}
+                        <div class="text-center p-4">
+                            <i class="bi bi-search text-muted mb-2" style="font-size: 1.5rem;"></i>
+                            <div class="text-muted small">{{data.noResultsText}}</div>
+                            <button type="button"
+                                    class="btn btn-link btn-sm mt-2 p-0"
+                                    data-action="clear-search">
+                                Clear search
+                            </button>
+                        </div>
+                    {{/data.showNoResults}}
+
+                    {{#data.showEmpty}}
+                        <div class="text-center p-4">
+                            <i class="{{data.emptyIcon}} text-muted mb-2" style="font-size: 2rem;"></i>
+                            <div class="text-muted small mb-2">{{data.emptyText}}</div>
+                            {{#data.emptySubtext}}
+                            <div class="text-muted" style="font-size: 0.75rem;">
+                                {{data.emptySubtext}}
+                            </div>
+                            {{/data.emptySubtext}}
+                        </div>
+                    {{/data.showEmpty}}
+                {{/data.loading}}
+                </div>
+
+                {{#data.showResultsCount}}
+                <div class="border-top bg-light p-2 text-center">
+                    <small class="text-muted">
+                        {{data.filteredCount}} of {{data.totalCount}}
+                    </small>
+                </div>
+                {{/data.showResultsCount}}
+            `,
+      ...options
+    });
+    this.parentView = options.parentView;
+  }
+  async handleActionSelectItem(event, element) {
+    event.preventDefault();
+    const itemIndex = parseInt(element.getAttribute("data-item-index"));
+    if (this.parentView) {
+      this.parentView.handleItemSelection(itemIndex);
+    }
+  }
+  async handleActionClearSearch(event, _element) {
+    event.preventDefault();
+    if (this.parentView) {
+      this.parentView.clearSearch();
+    }
+  }
+}
+class SimpleSearchView extends View {
+  constructor(options = {}) {
+    super({
+      className: "simple-search-view h-100 d-flex flex-column",
+      template: `
+                <div class="p-3 border-bottom bg-light">
+                    <div class="d-flex justify-content-between align-items-start mb-3">
+                        <h6 class="text-muted fw-semibold mb-0">
+                            {{#data.headerIcon}}<i class="{{data.headerIcon}} me-2"></i>{{/data.headerIcon}}
+                            {{{data.headerText}}}
+                        </h6>
+                        {{#data.showExitButton}}
+                        <button class="btn btn-link p-0 text-muted simple-search-exit-btn"
+                                type="button"
+                                data-action="exit-view"
+                                title="Exit"
+                                aria-label="Exit view">
+                            <i class="bi bi-x-lg" aria-hidden="true"></i>
+                        </button>
+                        {{/data.showExitButton}}
+                    </div>
+                    <div class="position-relative">
+                        <input type="text"
+                               class="form-control form-control-sm pe-5"
+                               placeholder="{{data.searchPlaceholder}}"
+                               value="{{data.searchValue}}"
+                               data-filter="live-search"
+                               data-filter-debounce="{{data.debounceMs}}"
+                               data-change-action="search-items">
+                        <button class="btn btn-link p-0 position-absolute top-50 end-0 translate-middle-y me-2 text-muted simple-search-clear-btn"
+                                type="button"
+                                data-action="clear-search"
+                                title="Clear search"
+                                aria-label="Clear search">
+                            <i class="bi bi-x-circle-fill" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div data-container="results"></div>
+
+                {{#data.showFooter}}
+                <div class="p-3 border-top bg-light">
+                    <small class="text-muted">
+                        <i class="{{data.footerIcon}} me-1"></i>
+                        {{{data.footerContent}}}
+                    </small>
+                </div>
+                {{/data.showFooter}}
+            `,
+      ...options
+    });
+    this.Collection = options.Collection;
+    this.collection = options.collection;
+    this.itemTemplate = options.itemTemplate || this.getDefaultItemTemplate();
+    this.searchFields = options.searchFields || ["name"];
+    this.collectionParams = { size: 25, ...options.collectionParams };
+    this.headerText = options.headerText || "Select Item";
+    this.headerIcon = options.headerIcon || "bi bi-list";
+    this.searchPlaceholder = options.searchPlaceholder || "Search...";
+    this.loadingText = options.loadingText || "Loading items...";
+    this.noResultsText = options.noResultsText || "No items match your search";
+    this.emptyText = options.emptyText || "No items available";
+    this.emptySubtext = options.emptySubtext || null;
+    this.emptyIcon = options.emptyIcon || "bi bi-inbox";
+    this.footerContent = options.footerContent || null;
+    this.footerIcon = options.footerIcon || "bi bi-info-circle";
+    this.showExitButton = options.showExitButton || false;
+    this.searchValue = "";
+    this.filteredItems = [];
+    this.loading = false;
+    this.hasSearched = false;
+    this.searchTimer = null;
+    this.debounceMs = options.debounceMs || 800;
+    this.resultsView = new ResultsView({
+      parentView: this
+    });
+    if (!this.collection && this.Collection) {
+      this.collection = new this.Collection();
+    }
+    this.addChild(this.resultsView);
+  }
+  onInit() {
+    if (this.collection) {
+      this.setupCollection();
+    }
+    if (this.collection && this.options.autoLoad !== false) {
+      this.loadItems();
+    }
+  }
+  setupCollection() {
+    Object.assign(this.collection.params, this.collectionParams);
+    this.collection.on("fetch:success", () => {
+      this.loading = false;
+      this.updateFilteredItems();
+    });
+    this.collection.on("fetch:error", () => {
+      this.loading = false;
+    });
+  }
+  async loadItems() {
+    if (!this.collection) {
+      console.warn("SimpleSearchView: No collection provided");
+      return;
+    }
+    this.loading = true;
+    this.updateResultsView();
+    try {
+      await this.collection.fetch();
+      this.updateFilteredItems();
+    } catch (error) {
+      console.error("Error loading items:", error);
+      const app = this.getApp();
+      app?.showError?.("Failed to load items. Please try again.");
+    } finally {
+      this.loading = false;
+      this.updateFilteredItems();
+    }
+  }
+  updateFilteredItems() {
+    if (!this.collection) {
+      this.filteredItems = [];
+      return;
+    }
+    const items = this.collection.toJSON();
+    if (!this.searchValue || !this.searchValue.trim()) {
+      this.filteredItems = items;
+    } else {
+      const searchTerm = this.searchValue.toLowerCase().trim();
+      this.filteredItems = items.filter((item) => {
+        return this.searchFields.some((field) => {
+          const value = this.getNestedValue(item, field);
+          return value && value.toString().toLowerCase().includes(searchTerm);
+        });
+      });
+    }
+    this.updateResultsView();
+  }
+  getNestedValue(obj, path) {
+    return path.split(".").reduce((current, key) => current?.[key], obj);
+  }
+  async getViewData() {
+    return {
+      searchValue: this.searchValue,
+      showFooter: !!this.footerContent,
+      showExitButton: this.showExitButton,
+      debounceMs: this.debounceMs,
+      // UI text
+      headerText: this.headerText,
+      headerIcon: this.headerIcon,
+      searchPlaceholder: this.searchPlaceholder,
+      footerContent: this.footerContent,
+      footerIcon: this.footerIcon
+    };
+  }
+  updateResultsView() {
+    if (!this.resultsView) return;
+    const hasItems = this.collection && this.collection.length() > 0;
+    const hasFilteredItems = this.filteredItems.length > 0;
+    const hasSearchValue = this.searchValue.length > 0;
+    const processedItems = this.filteredItems.map((item, index) => {
+      return {
+        ...item,
+        index,
+        itemContent: this.processItemTemplate(item)
+      };
+    });
+    this.resultsView.data = {
+      loading: this.loading,
+      items: processedItems,
+      showEmpty: !this.loading && !hasItems,
+      showNoResults: !this.loading && hasItems && !hasFilteredItems && hasSearchValue,
+      showResultsCount: !this.loading && hasItems,
+      filteredCount: this.filteredItems.length,
+      totalCount: this.collection?.restEnabled ? this.collection?.meta?.count || 0 : this.collection?.length() || 0,
+      // UI text
+      loadingText: this.loadingText,
+      noResultsText: this.noResultsText,
+      emptyText: this.emptyText,
+      emptySubtext: this.emptySubtext,
+      emptyIcon: this.emptyIcon
+    };
+    this.resultsView.render();
+  }
+  processItemTemplate(item) {
+    let template = this.itemTemplate;
+    template = template.replace(/\{\{(\w+)\}\}/g, (match, prop) => {
+      return this.getNestedValue(item, prop) || "";
+    });
+    return template;
+  }
+  getDefaultItemTemplate() {
+    return `
+            <div class="p-3 border-bottom">
+                <div class="fw-semibold text-dark">{{name}}</div>
+                <small class="text-muted">{{id}}</small>
+            </div>
+        `;
+  }
+  async onPassThruActionSearchItems(event, element) {
+    const searchValue = element.value || "";
+    console.log("search change...");
+    this.searchValue = searchValue;
+    this.hasSearched = true;
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+    this.performSearch();
+  }
+  async performSearch() {
+    const searchParams = { ...this.collectionParams };
+    if (this.searchValue && this.searchValue.length > 1) {
+      searchParams.search = this.searchValue.trim();
+    }
+    this.collection.setParams(searchParams, true);
+  }
+  handleItemSelection(itemIndex) {
+    if (isNaN(itemIndex) || itemIndex < 0 || itemIndex >= this.filteredItems.length) {
+      console.error("Invalid item index:", itemIndex);
+      return;
+    }
+    const item = this.filteredItems[itemIndex];
+    const model = this.collection ? this.collection.get(item.id) : null;
+    this.emit("item:selected", {
+      item,
+      model,
+      index: itemIndex
+    });
+  }
+  /**
+   * Set the collection for this search view
+   */
+  setCollection(collection) {
+    this.collection = collection;
+    this.setupCollection();
+    return this;
+  }
+  /**
+   * Set the item template
+   */
+  setItemTemplate(template) {
+    this.itemTemplate = template;
+    this.updateResultsView();
+    return this;
+  }
+  /**
+   * Set search fields
+   */
+  setSearchFields(fields) {
+    this.searchFields = Array.isArray(fields) ? fields : [fields];
+    return this;
+  }
+  /**
+   * Refresh items list
+   */
+  async refresh() {
+    await this.loadItems();
+  }
+  /**
+   * Focus the search input
+   */
+  focusSearch() {
+    const searchInput = this.element?.querySelector('input[data-action="search-items"]');
+    if (searchInput) {
+      searchInput.focus();
+    }
+  }
+  /**
+   * Handle exit button click - emits event instead of closing
+   */
+  async handleActionExitView(event, element) {
+    this.emit("exit", { view: this });
+  }
+  /**
+   * Clear search and reset
+   */
+  async handleActionClearSearch(event, element) {
+    this.clearSearch();
+  }
+  clearSearch() {
+    this.searchValue = "";
+    this.hasSearched = false;
+    const searchInput = this.element?.querySelector('input[data-change-action="search-items"]');
+    if (searchInput) {
+      searchInput.value = "";
+      searchInput.focus();
+    }
+    this.performSearch();
+  }
+  /**
+   * Get the number of available items
+   */
+  getItemCount() {
+    return this.collection ? this.collection.length() : 0;
+  }
+  /**
+   * Get the number of filtered items
+   */
+  getFilteredItemCount() {
+    return this.filteredItems.length;
+  }
+  /**
+   * Check if items are loaded
+   */
+  hasItems() {
+    return this.getItemCount() > 0;
+  }
+  /**
+   * Get current search value
+   */
+  getSearchValue() {
+    return this.searchValue;
+  }
+  /**
+   * Set search value programmatically
+   */
+  setSearchValue(value) {
+    this.searchValue = value || "";
+    this.hasSearched = !!this.searchValue;
+    const searchInput = this.element?.querySelector('input[data-action="search-items"]');
+    if (searchInput) {
+      searchInput.value = this.searchValue;
+    }
+    this.performSearch();
+    return this;
+  }
+  async onAfterRender() {
+    await super.onAfterRender();
+    if (this.resultsView && !this.resultsView.isMounted()) {
+      const container = this.element?.querySelector('[data-container="results"]');
+      if (container) {
+        await this.resultsView.render(true, container);
+      }
+    }
+    this.updateResultsView();
+  }
+  /**
+   * Cleanup on destroy
+   */
+  async onBeforeDestroy() {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer);
+    }
+    if (this.collection) {
+      this.collection.off("update");
+    }
+    await super.onBeforeDestroy();
+  }
+}
+class GroupSelectorButton extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "nav-item",
+      ...options
+    });
+    const app = this.getApp();
+    this.Collection = options.Collection || app?.GroupCollection || GroupList;
+    this.collection = options.collection || new this.Collection();
+    this.currentGroup = options.currentGroup !== void 0 ? options.currentGroup : app?.activeGroup;
+    this.buttonClass = options.buttonClass || "btn btn-link nav-link";
+    this.buttonIcon = options.buttonIcon || "bi-building";
+    this.defaultText = options.defaultText || "Select Group";
+    this.itemTemplate = options.itemTemplate;
+    this.searchFields = options.searchFields || ["name"];
+    this.headerText = options.headerText || "Select Group";
+    this.searchPlaceholder = options.searchPlaceholder || "Search groups...";
+    this.autoSetActiveGroup = options.autoSetActiveGroup !== false;
+    this.onGroupSelected = options.onGroupSelected;
+    this.dialog = null;
+    if (app?.events) {
+      app.events.on("group:changed", (data) => {
+        if (data.group !== this.currentGroup) {
+          this.setCurrentGroup(data.group);
+        }
+      });
+    }
+  }
+  async getTemplate() {
+    return `
+            <button class="{{buttonClass}}" 
+                    data-action="show-selector"
+                    type="button"
+                    style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                <i class="{{buttonIcon}} me-1"></i>
+                <span class="group-name">{{displayName}}</span>
+            </button>
+        `;
+  }
+  async onBeforeRender() {
+    await super.onBeforeRender();
+    console.log("GroupSelectorButton onBeforeRender - currentGroup:", this.currentGroup?.get?.("name") || this.currentGroup?.name || "none");
+    this.buttonClass = this.buttonClass;
+    this.buttonIcon = this.buttonIcon;
+    this.displayName = this.currentGroup?.get?.("name") || this.currentGroup?.name || this.defaultText;
+  }
+  /**
+   * Show the group selector dialog
+   */
+  async onActionShowSelector(event) {
+    const searchView = new SimpleSearchView({
+      Collection: this.Collection,
+      collection: this.collection,
+      itemTemplate: this.itemTemplate || this.getDefaultItemTemplate(),
+      searchFields: this.searchFields,
+      headerText: this.headerText,
+      searchPlaceholder: this.searchPlaceholder,
+      headerIcon: this.buttonIcon,
+      showExitButton: false
+    });
+    this.dialog = new Dialog({
+      title: this.headerText,
+      body: searchView,
+      size: "md",
+      scrollable: true,
+      noBodyPadding: true,
+      buttons: [],
+      closeButton: true
+    });
+    searchView.on("item:selected", (data) => {
+      this.handleGroupSelection(data.model || data.item);
+      if (this.dialog) {
+        this.dialog.hide();
+      }
+    });
+    this.dialog.on("hidden", () => {
+      this.dialog.destroy();
+      this.dialog = null;
+    });
+    await this.dialog.render(true, document.body);
+    this.dialog.show();
+    return true;
+  }
+  /**
+   * Handle group selection
+   */
+  handleGroupSelection(group) {
+    this.currentGroup = group;
+    this.displayName = group?.get?.("name") || group?.name || this.defaultText;
+    this.render();
+    const app = this.getApp();
+    if (this.autoSetActiveGroup && app?.setActiveGroup) {
+      app.setActiveGroup(group);
+    }
+    if (this.onGroupSelected) {
+      this.onGroupSelected({ group });
+    }
+    this.emit("group-selected", { group });
+    if (app?.events) {
+      app.events.emit("group:selected", { group });
+      app.events.emit("group:changed", { group });
+    }
+  }
+  /**
+   * Default item template for groups (matches Sidebar pattern)
+   * Note: data-action and data-item-index are added by ResultsView wrapper
+   */
+  getDefaultItemTemplate() {
+    return `
+            <div class="d-flex align-items-center p-3 border-bottom">
+                <div class="flex-grow-1">
+                    <div class="fw-semibold text-dark">{{name}}</div>
+                    <small class="text-muted">#{{id}}  {{kind}}</small>
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Set the current group programmatically
+   */
+  setCurrentGroup(group) {
+    this.currentGroup = group;
+    this.displayName = group?.get?.("name") || group?.name || this.defaultText;
+    if (this.mounted) {
+      this.render();
+    }
+  }
+  /**
+   * Get the current group
+   */
+  getCurrentGroup() {
+    return this.currentGroup;
+  }
+}
+class TopNav extends View {
+  constructor(options = {}) {
+    const themes = {
+      light: "navbar navbar-expand-lg navbar-light topnav-light",
+      dark: "navbar navbar-expand-lg navbar-dark topnav-dark",
+      clean: "navbar navbar-expand-lg navbar-light topnav-clean",
+      gradient: "navbar navbar-expand-lg navbar-dark topnav-gradient"
+    };
+    const themeName = options.theme || "light";
+    let navbarClass = themes[themeName] || themes.light;
+    if (options.shadow) {
+      navbarClass += ` topnav-shadow-${options.shadow}`;
+    }
+    super({
+      tagName: "nav",
+      className: navbarClass,
+      style: "position: relative; z-index: 1030;",
+      ...options
+    });
+    this.displayMode = options.displayMode || "both";
+    this.showPageIcon = options.showPageIcon !== false;
+    this.showPageDescription = options.showPageDescription || false;
+    this.showBreadcrumbs = options.showBreadcrumbs || false;
+    this.groupIcon = options.groupIcon || "bi-building";
+    this.currentPage = null;
+    this.previousPage = null;
+    this.config = {
+      brand: options.brand || "MOJO App",
+      brandIcon: options.brandIcon || "bi bi-play-circle",
+      brandRoute: options.brandRoute || "/",
+      navItems: options.navItems || [],
+      rightItems: options.rightItems || [],
+      showSidebarToggle: options.showSidebarToggle || false,
+      sidebarToggleAction: options.sidebarToggleAction || "toggle-sidebar",
+      ...options
+    };
+    this.userMenu = options.userMenu || this.findMenuItem("user");
+    if (this.userMenu) this.userMenu.id = "user";
+    this.loginMenu = options.loginMenu || this.findMenuItem("login");
+    this.setupPageListeners();
+    this.setupGroupListeners();
+    this.groupSelectorButton = null;
+    this.currentGroup = null;
+  }
+  findMenuItem(id) {
+    let item = this.config.navItems.find((item2) => item2.id === id);
+    if (!item) {
+      item = this.config.rightItems.find((item2) => item2.id === id);
+    }
+    return item || null;
+  }
+  replaceMenuItem(id, new_menu) {
+    const navIndex = this.config.navItems.findIndex((item) => item.id === id);
+    if (navIndex !== -1) {
+      this.config.navItems[navIndex] = new_menu;
+      return true;
+    }
+    const rightIndex = this.config.rightItems.findIndex((item) => item.id === id);
+    if (rightIndex !== -1) {
+      this.config.rightItems[rightIndex] = new_menu;
+      return true;
+    }
+    return false;
+  }
+  setBrand(brand, icon = null) {
+    this.config.brand = brand;
+    this.config.brandIcon = icon || this.config.brandIcon;
+    this.render();
+  }
+  setUser(user) {
+    if (!user) {
+      this.replaceMenuItem("user", this.loginMenu);
+    } else {
+      this.userMenu.label = user.get("display_name");
+      this.replaceMenuItem("login", this.userMenu);
+    }
+    this.setModel(user);
+  }
+  _onModelChange() {
+    if (this.model) {
+      this.userMenu.label = this.model.get("display_name");
+    }
+    if (this.isMounted()) {
+      this.render();
+    }
+  }
+  /**
+   * Get template based on display mode
+   */
+  async getTemplate() {
+    return `
+            <div class="container-fluid">
+                {{#data.showSidebarToggle}}
+                <button class="topnav-sidebar-toggle me-2" data-action="{{data.sidebarToggleAction}}" aria-label="Toggle Sidebar">
+                    <i class="bi bi-chevron-right toggle-chevron"></i>
+                </button>
+                {{/data.showSidebarToggle}}
+
+                {{#data.showGroupInfo}}
+                <div class="navbar-brand d-flex align-items-center">
+                    {{#data.groupIcon}}<i class="{{data.groupIcon}} me-2"></i>{{/data.groupIcon}}
+                    <div>
+                        <span class="topnav-group-name" 
+                              role="button" 
+                              tabindex="0"
+                              data-action="open-group-selector"
+                              style="cursor: pointer;">
+                            {{data.currentGroupName}}
+                        </span>
+                        {{#data.showPageTitle}}
+                        <span class="text-muted mx-2">|</span>
+                        <span>{{data.currentPageName}}</span>
+                        {{/data.showPageTitle}}
+                    </div>
+                </div>
+                {{/data.showGroupInfo}}
+
+                {{#data.showPageInfo}}
+                <div class="navbar-brand d-flex align-items-center">
+                    {{#data.currentPageIcon}}<i class="{{data.currentPageIcon}} me-2"></i>{{/data.currentPageIcon}}
+                    <div>
+                        <span>{{data.currentPageName}}</span>
+                        {{#data.currentPageDescription}}
+                        <small class="d-block" style="font-size: 0.75rem; line-height: 1;">{{data.currentPageDescription}}</small>
+                        {{/data.currentPageDescription}}
+                    </div>
+                </div>
+                {{/data.showPageInfo}}
+
+                {{#data.showBrand}}
+                <a class="navbar-brand" href="{{data.brandRoute}}">
+                    {{#data.brandIcon}}<i class="{{data.brandIcon}} me-2"></i>{{/data.brandIcon}}
+                    {{data.brand}}
+                </a>
+                {{/data.showBrand}}
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{{data.navbarId}}">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="{{data.navbarId}}">
+                    {{#data.showNavItems}}
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        {{#data.navItems}}
+                        <li class="nav-item">
+                            <a class="nav-link {{#active}}active{{/active}}" href="{{route}}">
+                                {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                                {{text}}
+                            </a>
+                        </li>
+                        {{/data.navItems}}
+                    </ul>
+                    {{/data.showNavItems}}
+
+                    {{#data.hasRightItems}}
+                    <div class="navbar-nav ms-auto">
+                        {{#data.rightItems}}
+                        {{#isGroupSelector}}
+                        <div data-container="group-selector-{{id}}"></div>
+                        {{/isGroupSelector}}
+                        {{^isGroupSelector}}
+                        {{#isDropdown}}
+                        <div class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                                {{label}}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end">
+                                {{#items}}
+                                {{#divider}}
+                                <li><hr class="dropdown-divider"></li>
+                                {{/divider}}
+                                {{^divider}}
+                                <li>
+                                    <a class="dropdown-item" role="button" {{#action}}data-action="{{action}}"{{/action}}>
+                                        {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                                        {{label}}
+                                    </a>
+                                </li>
+                                {{/divider}}
+                                {{/items}}
+                            </ul>
+                        </div>
+                        {{/isDropdown}}
+                        {{^isDropdown}}
+                        {{#isButton}}
+                        <button class="{{buttonClass}}" data-action="{{action}}" data-id="{{id}}">
+                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                            {{label}}
+                        </button>
+                        {{/isButton}}
+                        {{^isButton}}
+                        <a class="nav-link" href="{{href}}" {{#action}}data-action="{{action}}"{{/action}}>
+                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}
+                            {{label}}
+                        </a>
+                        {{/isButton}}
+                        {{/isDropdown}}
+                        {{/isGroupSelector}}
+                        {{/data.rightItems}}
+                    </div>
+                    {{/data.hasRightItems}}
+                </div>
+            </div>
+        `;
+  }
+  /**
+   * Process and normalize data before rendering (like Sidebar)
+   */
+  async onBeforeRender() {
+    await super.onBeforeRender();
+    const app = this.getApp();
+    const activeGroup = this.currentGroup || app?.activeGroup;
+    const showGroupInfo = this.displayMode === "group" || this.displayMode === "group_page_titles";
+    const showPageTitle = this.displayMode === "group_page_titles";
+    const showPageInfo = this.displayMode === "page" || this.displayMode === "both";
+    const showBrand = !showGroupInfo && !showPageInfo;
+    const showNavItems = this.displayMode === "menu" || this.displayMode === "both";
+    const navItems = this.filterItemsByPermissions(this.config.navItems || []);
+    const rightItems = this.processRightItems(this.config.rightItems || []);
+    this.data = {
+      // Brand information
+      brand: this.config.brand,
+      brandIcon: this.config.brandIcon,
+      brandRoute: this.config.brandRoute,
+      showBrand,
+      // Navbar configuration
+      navbarId: `navbar-${this.id}`,
+      // Navigation items
+      navItems,
+      showNavItems,
+      // Right items
+      rightItems,
+      hasRightItems: rightItems.length > 0,
+      // Group display
+      showGroupInfo,
+      showPageTitle,
+      currentGroupName: activeGroup?.get?.("name") || activeGroup?.name || "Select Group",
+      groupIcon: this.groupIcon,
+      // Page display
+      showPageInfo,
+      currentPageName: this.currentPage?.title || this.currentPage?.name || "",
+      currentPageIcon: this.currentPage?.icon || this.currentPage?.pageIcon || "",
+      currentPageDescription: this.showPageDescription ? this.currentPage?.description : "",
+      // Sidebar toggle
+      showSidebarToggle: this.config.showSidebarToggle,
+      sidebarToggleAction: this.config.sidebarToggleAction,
+      // Display mode
+      displayMode: this.displayMode
+    };
+  }
+  /**
+   * Process right items configuration
+   */
+  processRightItems(rightItems) {
+    return this.filterItemsByPermissions(rightItems).map((item) => {
+      const processedItem = { ...item };
+      if (item.items) {
+        processedItem.items = this.filterItemsByPermissions(item.items);
+      }
+      if (item.type === "group-selector") {
+        processedItem.isGroupSelector = true;
+        processedItem.isDropdown = false;
+        processedItem.isButton = false;
+        const groupSelectorOptions = {
+          containerId: `group-selector-${item.id || "default"}`
+        };
+        if (item.Collection !== void 0) groupSelectorOptions.Collection = item.Collection;
+        if (item.collection !== void 0) groupSelectorOptions.collection = item.collection;
+        if (item.currentGroup !== void 0) groupSelectorOptions.currentGroup = item.currentGroup;
+        if (item.buttonClass !== void 0) groupSelectorOptions.buttonClass = item.buttonClass;
+        if (item.buttonIcon !== void 0) groupSelectorOptions.buttonIcon = item.buttonIcon;
+        if (item.defaultText !== void 0) groupSelectorOptions.defaultText = item.defaultText;
+        if (item.itemTemplate !== void 0) groupSelectorOptions.itemTemplate = item.itemTemplate;
+        if (item.searchFields !== void 0) groupSelectorOptions.searchFields = item.searchFields;
+        if (item.headerText !== void 0) groupSelectorOptions.headerText = item.headerText;
+        if (item.searchPlaceholder !== void 0) groupSelectorOptions.searchPlaceholder = item.searchPlaceholder;
+        if (item.autoSetActiveGroup !== void 0) groupSelectorOptions.autoSetActiveGroup = item.autoSetActiveGroup;
+        if (item.onGroupSelected !== void 0) groupSelectorOptions.onGroupSelected = item.onGroupSelected;
+        const groupSelector = new GroupSelectorButton(groupSelectorOptions);
+        this.groupSelectorButton = groupSelector;
+        this.addChild(groupSelector);
+      } else if (processedItem.items && processedItem.items.length > 0) {
+        processedItem.isDropdown = true;
+        processedItem.isButton = false;
+      } else if (item.buttonClass) {
+        processedItem.isButton = true;
+        processedItem.isDropdown = false;
+      } else {
+        processedItem.isButton = false;
+        processedItem.isDropdown = false;
+      }
+      if (item.handler) {
+        this.rightItemHandlers = this.rightItemHandlers || /* @__PURE__ */ new Map();
+        this.rightItemHandlers.set(item.id, item.handler);
+      }
+      return processedItem;
+    });
+  }
+  /**
+   * Setup listeners for page change events
+   */
+  setupPageListeners() {
+    this.getApp().events.on(["page:show", "page:hide", "page:denied"], (data) => {
+      this.onPageChanged(data);
+    });
+  }
+  /**
+   * Setup listeners for group change events
+   */
+  setupGroupListeners() {
+    const app = this.getApp();
+    if (!app?.events) return;
+    app.events.on(["group:changed", "group:loaded"], (data) => {
+      if (data?.group) {
+        this.currentGroup = data.group;
+      }
+      if (this.displayMode === "group" || this.displayMode === "group_page_titles") {
+        if (this.mounted) {
+          this.render();
+        }
+      }
+    });
+  }
+  /**
+   * Handle page before change event
+   * @param {object} data - Event data
+   */
+  onPageBeforeChange(data) {
+    if (this.displayMode === "page" || this.displayMode === "both") ;
+  }
+  /**
+   * Handle page changed event
+   * @param {object} data - Event data with previousPage and currentPage
+   */
+  onPageChanged(data) {
+    this.previousPage = this.currentPage;
+    this.currentPage = data.page;
+    if (this.displayMode === "page" || this.displayMode === "both") {
+      this.updatePageDisplay();
+    }
+    if (this.displayMode === "menu" || this.displayMode === "both") {
+      if (this.currentPage && this.currentPage.route) {
+        this.updateActiveItem(this.currentPage.route);
+      }
+    }
+  }
+  /**
+   * Update the display to show current page info
+   */
+  updatePageDisplay() {
+    if (!this.currentPage) return;
+    if (this.mounted) {
+      this.render();
+    }
+  }
+  updateActiveItem(currentRoute) {
+    const normalizeRoute = (route) => {
+      if (!route) return "/";
+      return route.startsWith("/") ? route : `/${route}`;
+    };
+    const normalizedCurrentRoute = normalizeRoute(currentRoute);
+    const navItems = this.data.navItems.map((item) => {
+      const normalizedItemRoute = normalizeRoute(item.route);
+      let isActive = false;
+      if (normalizedItemRoute === "/" && normalizedCurrentRoute === "/") {
+        isActive = true;
+      } else if (normalizedItemRoute !== "/" && normalizedCurrentRoute !== "/") {
+        isActive = normalizedCurrentRoute.startsWith(normalizedItemRoute) || normalizedCurrentRoute === normalizedItemRoute;
+      }
+      return {
+        ...item,
+        active: isActive
+      };
+    });
+    this.updateData({ navItems }, true);
+  }
+  onPassThruActionProfile() {
+    this.getApp().events.emit("portal:action", { action: "profile" });
+  }
+  onActionSettings() {
+    this.getApp().events.emit("portal:action", { action: "settings" });
+  }
+  onActionLogout() {
+    this.getApp().events.emit("auth:logout", { action: "logout" });
+  }
+  /**
+   * Handle open group selector action (from clicking group name in brand)
+   */
+  async onActionOpenGroupSelector(event) {
+    if (this.groupSelectorButton) {
+      await this.groupSelectorButton.onActionShowSelector(event);
+      return true;
+    }
+    const { GroupList: GroupList2 } = await import("./ContextMenu-Ckttp-rD.js").then((n) => n.k);
+    const tempSelector = new GroupSelectorButton({
+      Collection: GroupList2,
+      currentGroup: this.getApp()?.activeGroup
+    });
+    await tempSelector.onActionShowSelector(event);
+    return true;
+  }
+  /**
+   * Handle dynamic action dispatch for right items
+   */
+  async handleAction(actionName, event, element) {
+    const itemId = element.getAttribute("data-id");
+    if (itemId && this.rightItemHandlers && this.rightItemHandlers.has(itemId)) {
+      const handler = this.rightItemHandlers.get(itemId);
+      if (typeof handler === "function") {
+        return await handler.call(this, actionName, event, element);
+      }
+    }
+    const methodName = `onAction${actionName.charAt(0).toUpperCase() + actionName.slice(1).replace(/-([a-z])/g, (g) => g[1].toUpperCase())}`;
+    if (typeof this[methodName] === "function") {
+      return await this[methodName](event, element);
+    }
+    this.emit("action", {
+      action: actionName,
+      event,
+      element,
+      topnav: this
+    });
+  }
+  /**
+   * Handle default actions by searching through rightItems and navItems
+   */
+  async onActionDefault(action, event, el) {
+    if (this.config.navItems) {
+      for (const item of this.config.navItems) {
+        if (item.action === action && item.handler) {
+          await item.handler.call(this, action, event, el);
+          return true;
+        }
+      }
+    }
+    if (this.config.rightItems) {
+      for (const item of this.config.rightItems) {
+        if (item.action === action && item.handler) {
+          await item.handler.call(this, action, event, el);
+          return true;
+        }
+        if (item.items) {
+          for (const subItem of item.items) {
+            if (subItem.action === action && subItem.handler) {
+              await subItem.handler.call(this, action, event, el);
+              return true;
+            }
+          }
+        }
+      }
+    }
+    this.getApp().events.emit("portal:action", { action, event, el });
+    return false;
+  }
+  /**
+   * Filter items by user permissions
+   */
+  filterItemsByPermissions(items) {
+    if (!items) return [];
+    const app = this.getApp();
+    const activeUser = app?.activeUser;
+    return items.filter((item) => {
+      if (item.permissions && activeUser) {
+        return activeUser.hasPermission(item.permissions);
+      }
+      return true;
+    });
+  }
+}
+export {
+  SimpleSearchView as S,
+  TopNav as T
+};
+//# sourceMappingURL=TopNav-DGtRj5F4.js.map