@luigi-project/core-modular 0.0.10 → 0.0.11-dev.20260720111

package/types/global-search.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Top-level `globalSearch` section of the Luigi configuration.
+ *
+ * See https://docs.luigi-project.io/docs/navigation-parameters-reference?section=global-search.
+ */
+export interface GlobalSearch {
+    /**
+     * Disables Luigi's internal keyup/etc. handlers on the search input field.
+     * When `true`, a `searchProvider` must be defined to attach custom logic.
+     */
+    disableInputHandlers?: boolean;
+    /**
+     * Label for the cancel button shown next to the search field on small viewports
+     * in centered mode. Only used when `searchFieldCentered` is active. Defaults to
+     * `'Cancel'`.
+     */
+    globalSearchCenteredCancelButton?: string;
+    /**
+     * Render the search input in the center of the shellbar instead of inline.
+     */
+    searchFieldCentered?: boolean;
+    /**
+     * Provider object carrying the renderers and event callbacks Luigi invokes
+     * during search interaction.
+     */
+    searchProvider?: GlobalSearchProvider;
+}
+export interface GlobalSearchProvider {
+    customSearchResultItemRenderer?: (searchResultItem: any, slot: HTMLLIElement, searchApiObj: any) => object;
+    customSearchResultRenderer?: (searchResults: any[], slot: HTMLDivElement, searchApiObj: any) => object;
+    /**
+     * Placeholder text for the search input. May be a plain string, a function
+     * returning a string, or a locale-keyed map (`{ en: '...', de: '...' }`).
+     */
+    inputPlaceholder?: string | (() => string) | Record<string, string>;
+    onEnter?: () => void;
+    onEscape?: () => void;
+    onInput?: () => void;
+    onSearchBtnClick?: () => void;
+    onSearchResultItemSelected?: (searchResultItem: any) => void;
+    toggleSearch?: (element: HTMLInputElement, visible: boolean) => void;
+}
+export interface SearchResultItem {
+    description: string;
+    label: string;
+    pathObject: Record<string, any>;
+}
+/**
+ * Imperative global-search surface exposed by a Luigi connector.
+ *
+ * The connector returns this handler from `getGlobalSearchHandler()`; if the
+ * connector does not implement global search, it may omit `getGlobalSearchHandler`
+ * entirely.
+ */
+export interface GlobalSearchHandler {
+    openSearchField(): void;
+    closeSearchField(): void;
+    clearSearchField(): void;
+    showSearchResult(searchResultItems: SearchResultItem[], searchQuery: string, isCentered: boolean, onShowCallback: (rendererSlot?: any) => void): void;
+    closeSearchResult(): void;
+    setSearchString(searchString: string, onSetCallback: (inputElem?: HTMLInputElement) => void): void;
+    setSearchInputPlaceholder(placeholder: string): void;
+    toggleSearch(isSearchFieldVisible: boolean, onToggleCallback: (inputElem?: HTMLInputElement) => void): void;
+}

package/types/navigation.d.ts

@@ -1,12 +1,16 @@
+import { GlobalSearch } from './global-search';
+import { CompoundConfig } from './compound-config';
 export interface TopNavData {
     appSwitcher?: AppSwitcher;
     appTitle: string;
     contextSwitcher?: ContextSwitcher;
+    globalSearch?: GlobalSearch;
     logo: string;
     navClick?: (item: NavItem) => Promise<void>;
     productSwitcher?: ProductSwitcher;
     profile?: ProfileSettings;
     topNodes: NavItem[];
+    totalBadgeNode?: BadgeCounter;
 }
 export interface AppSwitcher {
     showMainAppEntry?: boolean;
@@ -97,6 +101,7 @@ export interface LeftNavData {
     items: NavItem[];
     basePath: string;
     sideNavFooterText?: string;
+    totalBadgeNode?: BadgeCounter;
     navClick?: (item: NavItem) => Promise<void>;
 }
 export interface PathData {
@@ -111,13 +116,14 @@ export interface PathData {
 export interface RootNode {
     node: Node;
 }
+export interface BadgeCounter {
+    count?: () => number | Promise<number>;
+    label?: string;
+}
 export interface Node {
     altText?: string;
     anonymousAccess?: any;
-    badgeCounter?: {
-        count?: () => number | Promise<number>;
-        label?: string;
-    };
+    badgeCounter?: BadgeCounter;
     category?: any;
     children?: Node[];
     clientPermissions?: {
@@ -142,7 +148,7 @@ export interface Node {
     };
     navigationContext?: string;
     onNodeActivation?: (node: Node) => boolean | void;
-    openNodeInModal?: boolean;
+    openNodeInModal?: boolean | ModalSettings;
     pageErrorHandler?: PageErrorHandler;
     parent?: Node;
     pathSegment?: string;
@@ -195,6 +201,7 @@ export interface BreadcrumbItem {
 }
 export interface NavItem {
     altText?: string;
+    badgeCounter?: BadgeCounter;
     category?: Category;
     externalLink?: ExternalLink;
     href?: string;
@@ -205,10 +212,11 @@ export interface NavItem {
     tooltip?: string;
 }
 export interface TabNavData {
-    selectedNode?: any;
-    items?: NavItem[];
     basePath?: string;
+    items?: NavItem[];
     navClick?: (item: NavItem) => Promise<void>;
+    selectedNode?: any;
+    totalBadgeNode?: BadgeCounter;
 }
 export interface BreadcrumbData {
     basePath?: string;
@@ -217,9 +225,12 @@ export interface BreadcrumbData {
     renderer?: any;
     selectedNode?: Node;
 }
+export interface DrawerHeader {
+    title: string;
+}
 export interface DrawerSettings {
     backdrop?: boolean;
-    header?: any;
+    header?: DrawerHeader;
     overlap?: boolean;
     size?: 'l' | 'm' | 's' | 'xs';
 }
@@ -255,11 +266,11 @@ export interface ExternalLink {
     sameWindow?: boolean;
 }
 export interface NavigationOptions {
-    fromContext?: any;
+    fromContext?: string | null;
     fromClosestContext?: boolean;
     fromVirtualTreeRoot?: boolean;
     fromParent?: boolean;
-    relative?: any;
+    relative?: boolean;
     nodeParams?: Record<string, any>;
 }
 export interface NavigationRequestBase {
@@ -290,216 +301,13 @@ export interface NavigationRequestDetail {
     preventContextUpdate: boolean;
     preventHistoryEntry: boolean;
     fromVirtualTreeRoot: boolean;
-    fromContext: boolean;
+    fromContext: string | null;
     fromClosestContext: boolean;
     fromParent: boolean;
     relative: boolean;
     nodeParams: Record<string, string>;
 }
-/**
- * Configuration for compound web components in Luigi.
- * Compound allows you to layout multiple web components in one micro frontend.
- */
-export interface CompoundConfig {
-    /**
-     * Renderer configuration for the compound layout
-     */
-    renderer?: {
-        /**
-         * The renderer to use - can be 'grid', a custom renderer object, or undefined for default
-         */
-        use?: 'grid' | string | {
-            /**
-             * Base renderer to extend (e.g., 'grid')
-             */
-            extends?: string;
-            /**
-             * Custom function to create the compound container
-             * @param config - The renderer configuration
-             * @param renderer - The parent/super renderer (if extending)
-             */
-            createCompoundContainer?: (config: RendererConfig, renderer?: any) => HTMLDivElement;
-            /**
-             * Custom function to create individual compound item containers
-             * @param layoutConfig - Layout configuration for the item
-             * @param config - The overall renderer configuration
-             * @param renderer - The parent/super renderer (if extending)
-             */
-            createCompoundItemContainer?: (layoutConfig?: LayoutConfig, config?: RendererConfig, renderer?: any) => HTMLDivElement;
-            /**
-             * Custom function to attach an item to the compound container
-             * @param compoundCnt - The compound container element
-             * @param compoundItemCnt - The item container to attach
-             * @param renderer - The parent/super renderer (if extending)
-             */
-            attachCompoundItem?: (compoundCnt: HTMLElement, compoundItemCnt: HTMLElement, renderer?: any) => void;
-        };
-        /**
-         * Configuration for the grid layout
-         */
-        config?: {
-            /**
-             * CSS grid-template-columns value (e.g., '1fr 2fr')
-             */
-            columns?: string;
-            /**
-             * CSS grid-template-rows value (e.g., '150px 150px')
-             */
-            rows?: string;
-            /**
-             * CSS grid-gap value (e.g., 'auto', '10px')
-             */
-            gap?: string;
-            /**
-             * Minimum height for the grid container
-             */
-            minHeight?: string;
-            /**
-             * Responsive layout configurations for different viewport sizes
-             */
-            layouts?: Array<{
-                /**
-                 * CSS grid-template-columns for this breakpoint
-                 */
-                columns?: string | number;
-                /**
-                 * CSS grid-template-rows for this breakpoint
-                 */
-                rows?: string | number;
-                /**
-                 * CSS grid-gap for this breakpoint
-                 */
-                gap?: string | number;
-                /**
-                 * Minimum viewport width for this layout (in pixels)
-                 */
-                minWidth?: number;
-                /**
-                 * Maximum viewport width for this layout (in pixels)
-                 */
-                maxWidth?: number;
-            }>;
-        };
-    };
-    /**
-     * Lazy loading configuration for compound children
-     */
-    lazyLoadingOptions?: {
-        /**
-         * Enable lazy loading using IntersectionObserver
-         * @default false
-         */
-        enabled?: boolean;
-        /**
-         * IntersectionObserver rootMargin option
-         * Controls when children are loaded relative to viewport visibility
-         * @default "0px"
-         */
-        intersectionRootMargin?: string;
-        /**
-         * Default temporary height for child containers before they load
-         * @default "500px"
-         */
-        temporaryContainerHeight?: string;
-        /**
-         * Disable automatic temporary container heights
-         * Useful for custom renderers that manage heights themselves
-         * @default false
-         */
-        noTemporaryContainerHeight?: boolean;
-    };
-    /**
-     * Array of child web component configurations
-     */
-    children?: Array<{
-        /**
-         * Unique identifier for this child web component
-         */
-        id: string;
-        /**
-         * URL pointing to the web component JavaScript file
-         * Supports {i18n.currentLocale} placeholder for localization
-         */
-        viewUrl: string;
-        /**
-         * Context object passed to the web component
-         */
-        context?: Record<string, any>;
-        /**
-         * Layout configuration for positioning this child
-         */
-        layoutConfig?: {
-            /**
-             * CSS grid-row value (e.g., '1 / 3', 'auto')
-             * @default "auto"
-             */
-            row?: string;
-            /**
-             * CSS grid-column value (e.g., '1 / -1', 'auto')
-             * @default "auto"
-             */
-            column?: string;
-            /**
-             * Slot name for nested web components
-             * Use this instead of row/column to plug into a parent's slot
-             */
-            slot?: string;
-            /**
-             * Override the default temporary container height for this specific child
-             * Only used when lazy loading is enabled
-             * * @default undefined
-             */
-            temporaryContainerHeight?: string;
-        };
-        /**
-         * Event listeners for cross-component communication via event bus
-         */
-        eventListeners?: Array<{
-            /**
-             * ID of the source web component (use '*' for any source)
-             */
-            source: string;
-            /**
-             * Name of the event to listen for
-             */
-            name: string;
-            /**
-             * Type of action to perform (e.g., 'update')
-             */
-            action: string;
-            /**
-             * Optional function to convert event data before passing to listener
-             * @param data - The event data
-             */
-            dataConverter?: (data: any) => any;
-        }>;
-    }>;
-}
-/**
- * Supporting type for layout configuration
- */
-export interface LayoutConfig {
-    column?: string;
-    row?: string;
-    slot?: string;
-    temporaryContainerHeight?: string;
-}
-/**
- * Supporting type for renderer configuration
- */
-export interface RendererConfig {
-    columns?: string;
-    rows?: string;
-    gap?: string;
-    minHeight?: string;
-    layouts?: Array<{
-        columns?: string;
-        rows?: string;
-        gap?: string | number;
-        minWidth?: number;
-        maxWidth?: number;
-    }>;
-}
+export type { CompoundConfig, LayoutConfig, RendererConfig } from './compound-config';
 export interface TitleResolverCache {
     key: string;
     value: {

package/types/ux.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Public UX-related types: alert and confirmation modal settings, plus the handlers
+ * a connector receives when rendering them.
+ */
+export interface AlertSettings {
+    closeAfter?: number;
+    id?: string;
+    links?: Record<string, Link>;
+    text?: string;
+    ttl?: number;
+    type?: string;
+}
+export interface Link {
+    elemId: string;
+    url?: string;
+    dismissKey?: string;
+}
+/**
+ * Imperative alert surface a connector receives when rendering an alert. The connector
+ * invokes `close()` when the user dismisses the alert and `link(linkKey)` when a link
+ * inside the alert is activated.
+ */
+export interface AlertHandler {
+    openFromClient: boolean;
+    close(): void;
+    link(linkKey: string): boolean;
+}
+export interface ConfirmationModalSettings {
+    icon?: string;
+    type?: string;
+    header?: string;
+    body?: string;
+    buttonConfirm?: string;
+    buttonDismiss?: string;
+}
+/**
+ * Imperative confirmation-modal surface a connector receives when rendering the modal.
+ * The connector invokes `confirm()` or `dismiss()` based on the user's choice.
+ */
+export interface ConfirmationModalHandler {
+    confirm(): void;
+    dismiss(): void;
+}

package/utilities/helpers/global-search-helpers.d.ts

@@ -0,0 +1,7 @@
+import { GlobalSearchProvider, SearchResultItem } from '../../types/global-search';
+import { Luigi } from '../../core-api/luigi';
+export declare const GlobalSearchHelpers: {
+    handleSearchResultRenderer(searchProvider: GlobalSearchProvider, searchResultItems: SearchResultItem[], rendererSlot: any): void;
+    getSearchPlaceholder(luigi: Luigi): string | undefined;
+    toggleSearch(isSearchFieldVisible: boolean, searchProvider: GlobalSearchProvider, inputElem?: HTMLInputElement): void;
+};