import { LitElement } from 'lit';
import type { INavigation, INavigationOptions, ISubscription, TAG_NAME_ROUTER } from './Declarations';
import type { RouteConfig } from './Route';
import { Route } from './Route';
declare global {
interface HTMLElementTagNameMap {
[TAG_NAME_ROUTER]: RouterElement2;
}
}
/**
* The `RouterElement2` element.
*
* Usage:
* ```html
*
* ```
*
* ```ts
* const router = document.querySelector('mosaik-router-2');
* router.setRoutes([
* { path: '/', component: 'home-page' },
* { path: '/about', component: 'about-page' },
* ]);
* ```
*
* @public
*/
export declare class RouterElement2 extends LitElement {
private _currentRoute;
private readonly _routes;
private readonly _renderingTemplateTask;
private _windowPopStateSubscription;
private _windowClickSubscription;
/**
* @public
* @override
*/
connectedCallback(): void;
/**
* @public
* @override
*/
disconnectedCallback(): void;
/**
* Returns the list of registered routes.
*
* @public
*/
routes(): Route[];
/**
* Retrieves query-string parameters from the current URL.
*
* @param name - Optional key to retrieve a single parameter value.
* @returns An object of all query parameters, or a single value when `name` is provided.
*
* @example
* ```ts
* // URL: https://example.com?foo=bar&baz=qux
* router.qs() // { foo: 'bar', baz: 'qux' }
* router.qs('foo') // 'bar'
* ```
*
* @public
*/
qs(name?: string): Record | string | null;
/**
* Retrieves path parameters from the current route.
*
* @param name - Optional key to retrieve a single parameter value.
* @returns An object of all path parameters, or a single value when `name` is provided.
*
* @example
* ```ts
* // URL: https://example.com/users/1
* router.params() // { userId: '1' }
* ```
*
* @public
*/
params(name?: string): Record | string | undefined;
/**
* Registers a callback that fires whenever the router state changes
* (e.g. on `popstate`).
*
* @param callback - The callback to invoke.
* @returns An `ISubscription` that can be used to unsubscribe.
*
* @public
*/
onChange(callback: (router: RouterElement2) => void): ISubscription;
/**
* Adds a list of routes to the router configuration.
*
* @param routes - An array of partial route configurations.
*
* @example
* ```ts
* router.setRoutes([
* { path: '/', component: HomePage },
* { path: '/about', component: AboutPage },
* ]);
* ```
*
* @public
*/
setRoutes(routes: Array>): void;
/**
* Navigates to a new route.
*
* @param navigation - The navigation target (path or href).
* @param options - Optional navigation options.
*
* @example
* ```ts
* router.navigate({ path: '/about' });
* router.navigate({ path: '/users', query: { page: '1' } });
* ```
*
* @public
*/
navigate(navigation: Partial, options?: Partial): Promise;
/**
* Navigates forward in session history.
*
* @public
*/
forward(): void;
/**
* Navigates backward in session history.
*
* @public
*/
back(): void;
/**
* @override
*/
protected createRenderRoot(): HTMLElement;
/**
* @override
*/
protected render(): unknown;
/**
* Finds a route matching the given path, searching recursively through
* child routes when present.
*
* @param path - The pathname to match.
* @param routes - The route list to search (defaults to all routes).
* @param onlyLeafRoute - When `true`, only childless routes are returned.
*
* @private
*/
private findRouteByPath;
/**
* Creates a `Route` from a partial config, validating required fields.
*
* @private
*/
private createRouteFromConfig;
/**
* Recursively builds a route tree from a partial config, including
* nested children.
*
* @private
*/
private buildNestedRouteFromConfig;
/**
* Extracts parameters from a `URLSearchParams` or regex match.
*
* @private
*/
private extractParameters;
/**
* Handles anchor clicks for in-page navigation.
*
* @private
*/
private onHandleAnchorClick;
/**
* Handles popstate events (browser back/forward).
*
* @private
*/
private onHandlePopState;
/**
* Finds an anchor element in the event's composed path.
*
* @param path - The composed event path.
* @returns An `IRouterLinkLike` object if found, otherwise `undefined`.
*
* @private
*/
private findAnchor;
}
/**
* @public
*/
export declare namespace RouterElement2 {
/**
* Props interface for the `RouterElement2` element.
*
* @public
*/
interface Props {
}
}
/**
* Alias for backward compatibility with auto-generated wrappers.
*
* @public
*/
export { RouterElement2 as Router2Element };
//# sourceMappingURL=RouterElement2.d.ts.map