@umbraco-cms/backoffice 1.0.0-next.ea1e6e6f → 1.0.0-next.ebf3d30a

package/dist-cms/external/router-slot/index.js

@@ -1,859 +1 @@
-const CATCH_ALL_WILDCARD = "**";
-const TRAVERSE_FLAG = "\\.\\.\\/";
-const PARAM_IDENTIFIER = /:([^\\/]+)/g;
-const ROUTER_SLOT_TAG_NAME = "router-slot";
-const GLOBAL_ROUTER_EVENTS_TARGET = window;
-const HISTORY_PATCH_NATIVE_KEY = `native`;
-const DEFAULT_PATH_MATCH = "prefix";
-
-/**
- * Dispatches a did change route event.
- * @param $elem
- * @param {IRoute} detail
- */
-function dispatchRouteChangeEvent($elem, detail) {
-    $elem.dispatchEvent(new CustomEvent("changestate", { detail }));
-}
-/**
- * Dispatches an event on the window object.
- * @param name
- * @param detail
- */
-function dispatchGlobalRouterEvent(name, detail) {
-    GLOBAL_ROUTER_EVENTS_TARGET.dispatchEvent(new CustomEvent(name, { detail }));
-    // if ("debugRouterSlot" in window) {
-    // 	console.log(`%c [router-slot]: ${name}`, `color: #286ee0`, detail);
-    // }
-}
-/**
- * Adds an event listener (or more) to an element and returns a function to unsubscribe.
- * @param $elem
- * @param type
- * @param listener
- * @param options
- */
-function addListener($elem, type, listener, options) {
-    const types = Array.isArray(type) ? type : [type];
-    types.forEach(t => $elem.addEventListener(t, listener, options));
-    return () => types.forEach(t => $elem.removeEventListener(t, listener, options));
-}
-/**
- * Removes the event listeners in the array.
- * @param listeners
- */
-function removeListeners(listeners) {
-    listeners.forEach(unsub => unsub());
-}
-
-// Mapping a history functions to the events they are going to dispatch.
-const historyPatches = [
-    ["pushState", ["pushstate", "changestate"]],
-    ["replaceState", ["replacestate", "changestate"]],
-    ["forward", ["pushstate", "changestate"]],
-    ["go", ["pushstate", "changestate"]],
-    // We need to handle the popstate a little differently when it comes to the change state event.
-    ["back", ["popstate"]],
-];
-/**
- * Patches the history object by ensuring correct events are dispatches when the history changes.
- */
-function ensureHistoryEvents() {
-    for (const [name, events] of historyPatches) {
-        for (const event of events) {
-            attachCallback(history, name, event);
-        }
-    }
-    // The popstate is the only event natively dispatched when using the hardware buttons.
-    // Therefore we need to handle this case a little different. To ensure the changestate event
-    // is fired also when the hardware back button is used, we make sure to listen for the popstate
-    // event and dispatch a change state event right after. The reason for the setTimeout is because we
-    // want the popstate event to bubble up before the changestate event is dispatched.
-    window.addEventListener("popstate", (e) => {
-        // Check if the state should be allowed to change
-        if (shouldCancelChangeState({ eventName: "popstate" })) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        // Dispatch the global router event to change the routes after the popstate has bubbled up
-        setTimeout(() => dispatchGlobalRouterEvent("changestate"), 0);
-    });
-}
-/**
- * Attaches a global router event after the native function on the object has been invoked.
- * Stores the original function at the _name.
- * @param obj
- * @param functionName
- * @param eventName
- */
-function attachCallback(obj, functionName, eventName) {
-    const func = obj[functionName];
-    saveNativeFunction(obj, functionName, func);
-    obj[functionName] = (...args) => {
-        // If its push/replace state we want to send the url to the should cancel change state event
-        const url = args.length > 2 ? args[2] : null;
-        // Check if the state should be allowed to change
-        if (shouldCancelChangeState({ url, eventName }))
-            return;
-        // Navigate
-        func.apply(obj, args);
-        dispatchGlobalRouterEvent(eventName);
-    };
-}
-/**
- * Saves the native function on the history object.
- * @param obj
- * @param name
- * @param func
- */
-function saveNativeFunction(obj, name, func) {
-    // Ensure that the native object exists.
-    if (obj[HISTORY_PATCH_NATIVE_KEY] == null) {
-        obj[HISTORY_PATCH_NATIVE_KEY] = {};
-    }
-    // Save the native function.
-    obj[HISTORY_PATCH_NATIVE_KEY][`${name}`] = func.bind(obj);
-}
-/**
- * Dispatches and event and returns whether the state change should be cancelled.
- * The state will be considered as cancelled if the "willChangeState" event was cancelled.
- */
-function shouldCancelChangeState(data) {
-    return !GLOBAL_ROUTER_EVENTS_TARGET.dispatchEvent(new CustomEvent("willchangestate", {
-        cancelable: true,
-        detail: data
-    }));
-}
-
-const $anchor = document.createElement("a");
-/**
- * The current path of the location.
- * As default slashes are included at the start and end.
- * @param options
- */
-function path(options = {}) {
-    return slashify(window.location.pathname, options);
-}
-/**
- * Returns the path without the base path.
- * @param options
- */
-function pathWithoutBasePath(options = {}) {
-    return slashify(stripStart(path(), basePath()), options);
-}
-/**
- * Returns the base path as defined in the <base> tag in the head in a reliable way.
- * If eg. <base href="/router-slot/"> is defined this function will return "/router-slot/".
- *
- * An alternative would be to use regex on document.baseURI,
- * but that will be unreliable in some cases because it
- * doesn't use the built in HTMLHyperlinkElementUtils.
- *
- * To make this method more performant we could cache the anchor element.
- * As default it will return the base path with slashes in front and at the end.
- */
-function basePath(options = {}) {
-    return constructPathWithBasePath(".", options);
-}
-/**
- * Creates an URL using the built in HTMLHyperlinkElementUtils.
- * An alternative would be to use regex on document.baseURI,
- * but that will be unreliable in some cases because it
- * doesn't use the built in HTMLHyperlinkElementUtils.
- *
- * As default it will return the base path with slashes in front and at the end.
- * @param path
- * @param options
- */
-function constructPathWithBasePath(path, options = {}) {
-    $anchor.href = path;
-    return slashify($anchor.pathname, options);
-}
-/**
- * Removes the start of the path that matches the part.
- * @param path
- * @param part
- */
-function stripStart(path, part) {
-    return path.replace(new RegExp(`^${part}`), "");
-}
-/**
- * Returns the query string.
- */
-function queryString() {
-    return window.location.search;
-}
-/**
- * Returns the params for the current path.
- * @returns Params
- */
-function query() {
-    return toQuery(queryString().substr(1));
-}
-/**
- * Strips the slash from the start and end of a path.
- * @param path
- */
-function stripSlash(path) {
-    return slashify(path, { start: false, end: false });
-}
-/**
- * Ensures the path starts and ends with a slash
- * @param path
- */
-function ensureSlash(path) {
-    return slashify(path, { start: true, end: true });
-}
-/**
- * Makes sure that the start and end slashes are present or not depending on the options.
- * @param path
- * @param start
- * @param end
- */
-function slashify(path, { start = true, end = true } = {}) {
-    path = start && !path.startsWith("/") ? `/${path}` : (!start && path.startsWith("/") ? path.slice(1) : path);
-    return end && !path.endsWith("/") ? `${path}/` : (!end && path.endsWith("/") ? path.slice(0, path.length - 1) : path);
-}
-/**
- * Turns a query string into an object.
- * @param {string} queryString (example: ("test=123&hejsa=LOL&wuhuu"))
- * @returns {Query}
- */
-function toQuery(queryString) {
-    // If the query does not contain anything, return an empty object.
-    if (queryString.length === 0) {
-        return {};
-    }
-    // Grab the atoms (["test=123", "hejsa=LOL", "wuhuu"])
-    const atoms = queryString.split("&");
-    // Split by the values ([["test", "123"], ["hejsa", "LOL"], ["wuhuu"]])
-    const arrayMap = atoms.map(atom => atom.split("="));
-    // Assign the values to an object ({ test: "123", hejsa: "LOL", wuhuu: "" })
-    return Object.assign({}, ...arrayMap.map(arr => ({
-        [decodeURIComponent(arr[0])]: (arr.length > 1 ? decodeURIComponent(arr[1]) : "")
-    })));
-}
-/**
- * Turns a query object into a string query.
- * @param query
- */
-function toQueryString(query) {
-    return Object.entries(query)
-        .map(([key, value]) => `${key}${value != "" ? `=${encodeURIComponent(value)}` : ""}`)
-        .join("&");
-}
-
-/**
- * Determines whether the path is active.
- * If the full path starts with the path and is followed by the end of the string or a "/" the path is considered active.
- * @param path
- * @param fullPath
- */
-function isPathActive(path$1, fullPath = path()) {
-    return new RegExp(`^${stripSlash(path$1)}(\/|$)`, "gm").test(stripSlash(fullPath));
-}
-/**
- * Matches a route.
- * @param route
- * @param path
- */
-function matchRoute(route, path) {
-    // We start by preparing the route path by replacing the param names with a regex that matches everything
-    // until either the end of the path or the next "/". While replacing the param placeholders we make sure
-    // to store the names of the param placeholders.
-    const paramNames = [];
-    const routePath = stripSlash(route.path.replace(PARAM_IDENTIFIER, (substring, ...args) => {
-        paramNames.push(args[0]);
-        return `([^\/]+)`;
-    }));
-    // Construct the regex to match with the path or fragment
-    // If path is wildcard:
-    // - We match with /^/ to not consume any characters.
-    // If path is empty and pathmatch is not full
-    // - We match with /^/ to not consume any characters.
-    // If pathmatch is prefix
-    // - We start the match with [/]? to allow a slash in front of the path.
-    // - We end the match with (?:/|$) to make sure the match ends at either the end of the fragment or end of the path.
-    // If pathmatch is suffix:
-    // - We start the match with .*? to allow anything to be in front of what we are trying to match.
-    // - We end the match with $ to make sure the match ends at the end of the path.
-    // If pathmatch is full:
-    // - We end the match with $ to make sure the match ends at the end of the path.
-    // If pathmatch is fuzzy
-    // - We start the match with .*? to allow anything to be in front of what we are trying to match.
-    // - We end the match with .*? to allow anything to be after what we are trying to match.
-    // All matches starts with ^ to make sure the match is done from the beginning of the path.
-    const regex = route.path === CATCH_ALL_WILDCARD || (route.path.length === 0 && route.pathMatch != "full") ? /^/ : (() => {
-        switch (route.pathMatch || DEFAULT_PATH_MATCH) {
-            case "full": return new RegExp(`^${routePath}\/?$`);
-            case "suffix": return new RegExp(`^.*?${routePath}\/?$`);
-            case "fuzzy": return new RegExp(`^.*?${routePath}.*?$`);
-            case "prefix":
-            default: return new RegExp(`^[\/]?${routePath}(?:\/|$)`);
-        }
-    })();
-    // Check if there's a match
-    const match = path.match(regex);
-    if (match != null) {
-        // Match the param names with the matches. The matches starts from index 1 which is the
-        // reason why we add 1. match[0] is the entire string.
-        const params = paramNames.reduce((acc, name, i) => {
-            acc[name] = match[i + 1];
-            return acc;
-        }, {});
-        // Split up the path into two fragments: the one consumed and the rest.
-        const consumed = stripSlash(path.slice(0, match[0].length));
-        const rest = stripSlash(path.slice(match[0].length, path.length));
-        return {
-            route,
-            match,
-            params,
-            fragments: {
-                consumed,
-                rest
-            }
-        };
-    }
-    return null;
-}
-/**
- * Matches the first route that matches the given path.
- * @param routes
- * @param path
- */
-function matchRoutes(routes, path) {
-    for (const route of routes) {
-        const match = matchRoute(route, path);
-        if (match != null) {
-            return match;
-        }
-    }
-    return null;
-}
-/**
- * Returns the page from the route.
- * If the component provided is a function (and not a class) call the function to get the promise.
- * @param route
- * @param info
- */
-async function resolvePageComponent(route, info) {
-    // Figure out if the component were given as an import or class.
-    let cmp = route.component;
-    if (cmp instanceof Function) {
-        try {
-            cmp = cmp();
-        }
-        catch (err) {
-            // The invocation most likely failed because the function is a class.
-            // If it failed due to the "new" keyword not being used, the error will be of type "TypeError".
-            // This is the most reliable way to check whether the provided function is a class or a function.
-            if (!(err instanceof TypeError)) {
-                throw err;
-            }
-        }
-    }
-    // Load the module or component.
-    const moduleClassOrPage = await Promise.resolve(cmp);
-    // Instantiate the component
-    let component;
-    if (!(moduleClassOrPage instanceof HTMLElement)) {
-        component = new (moduleClassOrPage.default ? moduleClassOrPage.default : moduleClassOrPage)();
-    }
-    else {
-        component = moduleClassOrPage;
-    }
-    // Setup the component using the callback.
-    if (route.setup != null) {
-        route.setup(component, info);
-    }
-    return component;
-}
-/**
- * Determines if a route is a redirect route.
- * @param route
- */
-function isRedirectRoute(route) {
-    return "redirectTo" in route;
-}
-/**
- * Determines if a route is a resolver route.
- * @param route
- */
-function isResolverRoute(route) {
-    return "resolve" in route;
-}
-/**
- * Traverses the router tree up to the root route.
- * @param slot
- */
-function traverseRouterTree(slot) {
-    // Find the nodes from the route up to the root route
-    let routes = [slot];
-    while (slot.parent != null) {
-        slot = slot.parent;
-        routes.push(slot);
-    }
-    // Create the tree
-    const tree = routes.reduce((acc, slot) => {
-        return { slot, child: acc };
-    }, undefined);
-    const depth = routes.length;
-    return { tree, depth };
-}
-/**
- * Generates a path based on the router tree.
- * @param tree
- * @param depth
- */
-function getFragments(tree, depth) {
-    let child = tree;
-    const fragments = [];
-    // Look through all of the path fragments
-    while (child != null && child.slot.match != null && depth > 0) {
-        fragments.push(child.slot.match.fragments.consumed);
-        child = child.child;
-        depth--;
-    }
-    return fragments;
-}
-/**
- * Constructs the correct absolute path based on a router.
- * - Handles relative paths: "mypath"
- * - Handles absolute paths: "/mypath"
- * - Handles traversing paths: "../../mypath"
- * @param slot
- * @param path
- */
-function constructAbsolutePath(slot, path = "") {
-    // Grab the router tree
-    const { tree, depth } = traverseRouterTree(slot);
-    // If the path starts with "/" we treat it as an absolute path
-    // and therefore don't continue because it is already absolute.
-    if (!path.startsWith("/")) {
-        let traverseDepth = 0;
-        // If the path starts with "./" we can remove that part
-        // because we know the path is relative to its route.
-        if (path.startsWith("./")) {
-            path = path.slice(2);
-        }
-        // Match with the traverse flag.
-        const match = path.match(new RegExp(TRAVERSE_FLAG, "g"));
-        if (match != null) {
-            // If the path matched with the traverse flag we know that we have to construct
-            // a route until a certain depth. The traverse depth is the amount of "../" in the path
-            // and the depth is the part of the path we a slicing away.
-            traverseDepth = match.length;
-            // Count the amount of characters that the matches add up to and remove it from the path.
-            const length = match.reduce((acc, m) => acc + m.length, 0);
-            path = path.slice(length);
-        }
-        // Grab the fragments and construct the new path, taking the traverse depth into account.
-        // Always subtract at least 1 because we the path is relative to its parent.
-        // Filter away the empty fragments from the path.
-        const fragments = getFragments(tree, depth - 1 - traverseDepth).filter(fragment => fragment.length > 0);
-        path = `${fragments.join("/")}${fragments.length > 0 ? "/" : ""}${path}`;
-    }
-    // Add the base path in front of the path. If the path is already absolute, the path wont get the base path added.
-    return constructPathWithBasePath(path, { end: false });
-}
-/**
- * Handles a redirect.
- * @param slot
- * @param route
- */
-function handleRedirect(slot, route) {
-    history.replaceState(history.state, "", `${constructAbsolutePath(slot, route.redirectTo)}${route.preserveQuery ? queryString() : ""}`);
-}
-/**
- * Determines whether the navigation should start based on the current match and the new match.
- * @param currentMatch
- * @param newMatch
- */
-function shouldNavigate(currentMatch, newMatch) {
-    // If the current match is not defined we should always route.
-    if (currentMatch == null) {
-        return true;
-    }
-    // Extract information about the matches
-    const { route: currentRoute, fragments: currentFragments } = currentMatch;
-    const { route: newRoute, fragments: newFragments } = newMatch;
-    const isSameRoute = currentRoute == newRoute;
-    const isSameFragments = currentFragments.consumed == newFragments.consumed;
-    // Only navigate if the URL consumption is new or if the two routes are no longer the same.
-    return !isSameFragments || !isSameRoute;
-}
-
-/**
- * Queries the parent router.
- * @param $elem
- */
-function queryParentRouterSlot($elem) {
-    return queryParentRoots($elem, ROUTER_SLOT_TAG_NAME);
-}
-/**
- * Traverses the roots and returns the first match.
- * The minRoots parameter indicates how many roots should be traversed before we started matching with the query.
- * @param $elem
- * @param query
- * @param minRoots
- * @param roots
- */
-function queryParentRoots($elem, query, minRoots = 0, roots = 0) {
-    // Grab the rood node and query it
-    const $root = $elem.getRootNode();
-    // If we are at the right level or above we can query!
-    if (roots >= minRoots) {
-        // See if there's a match
-        const match = $root.querySelector(query);
-        if (match != null && match != $elem) {
-            return match;
-        }
-    }
-    // If a parent root with a host doesn't exist we don't continue the traversal
-    const $rootRootNode = $root.getRootNode();
-    if ($rootRootNode.host == null) {
-        return null;
-    }
-    // We continue the traversal if there was not matches
-    return queryParentRoots($rootRootNode.host, query, minRoots, ++roots);
-}
-
-/**
- * Hook up a click listener to the window that, for all anchor tags
- * that has a relative HREF, uses the history API instead.
- */
-function ensureAnchorHistory() {
-    window.addEventListener("click", (e) => {
-        // Find the target by using the composed path to get the element through the shadow boundaries.
-        const $anchor = "composedPath" in e ? e.composedPath().find($elem => $elem instanceof HTMLAnchorElement) : e.target;
-        // Abort if the event is not about the anchor tag
-        if ($anchor == null || !($anchor instanceof HTMLAnchorElement)) {
-            return;
-        }
-        // Get the HREF value from the anchor tag
-        const href = $anchor.href;
-        // Only handle the anchor tag if the follow holds true:
-        // - The HREF is relative to the origin of the current location.
-        // - The target is targeting the current frame.
-        // - The anchor doesn't have the attribute [data-router-slot]="disabled"
-        if (!href.startsWith(location.origin) ||
-            ($anchor.target !== "" && $anchor.target !== "_self") ||
-            $anchor.dataset["routerSlot"] === "disabled") {
-            return;
-        }
-        // Remove the origin from the start of the HREF to get the path
-        const path = $anchor.pathname + $anchor.search + $anchor.hash;
-        // Prevent the default behavior
-        e.preventDefault();
-        // Change the history!
-        history.pushState(null, "", path);
-    });
-}
-
-const template = document.createElement("template");
-template.innerHTML = `<slot></slot>`;
-// Patches the history object and ensures the correct events.
-ensureHistoryEvents();
-// Ensure the anchor tags uses the history API
-ensureAnchorHistory();
-/**
- * Slot for a node in the router tree.
- * @slot - Default content.
- * @event changestate - Dispatched when the router slot state changes.
- */
-class RouterSlot extends HTMLElement {
-    /**
-     * Listeners on the router.
-     */
-    listeners = [];
-    /**
-     * The available routes.
-     */
-    _routes = [];
-    get routes() {
-        return this._routes;
-    }
-    set routes(routes) {
-        this.clear();
-        this.add(routes);
-    }
-    /**
-     * The parent router.
-     * Is REQUIRED if this router is a child.
-     * When set, the relevant listeners are added or teared down because they depend on the parent.
-     */
-    _parent;
-    get parent() {
-        return this._parent;
-    }
-    set parent(router) {
-        this._lockParent = true;
-        this._setParent(router);
-    }
-    _lockParent = false;
-    _setParent(router) {
-        this.detachListeners();
-        this._parent = router;
-        this.attachListeners();
-    }
-    /**
-     * Whether the router is a root router.
-     */
-    get isRoot() {
-        return this.parent == null;
-    }
-    /**
-     * The current route match.
-     */
-    _routeMatch = null;
-    get match() {
-        return this._routeMatch;
-    }
-    /**
-     * The current route of the match.
-     */
-    get route() {
-        return this.match != null ? this.match.route : null;
-    }
-    /**
-     * The current path fragment of the match
-     */
-    get fragments() {
-        return this.match != null ? this.match.fragments : null;
-    }
-    /**
-     * The current params of the match.
-     */
-    get params() {
-        return this.match != null ? this.match.params : null;
-    }
-    /**
-     * Hooks up the element.
-     */
-    constructor() {
-        super();
-        this.render = this.render.bind(this);
-        // Attach the template
-        const shadow = this.attachShadow({ mode: "open" });
-        shadow.appendChild(template.content.cloneNode(true));
-    }
-    /**
-     * Query the parent router slot when the router slot is connected.
-     */
-    connectedCallback() {
-        // Do not query a parent if the parent has been set from the outside.
-        if (!this._lockParent) {
-            this._setParent(this.queryParentRouterSlot());
-        }
-        if (this.parent && this.parent.match !== null && this.match === null) {
-            requestAnimationFrame(() => {
-                this.render();
-            });
-        }
-    }
-    /**
-     * Tears down the element.
-     */
-    disconnectedCallback() {
-        this.detachListeners();
-    }
-    /**
-     * Queries the parent router.
-     */
-    queryParentRouterSlot() {
-        return queryParentRouterSlot(this);
-    }
-    /**
-     * Returns an absolute path relative to the router slot.
-     * @param path
-     */
-    constructAbsolutePath(path) {
-        return constructAbsolutePath(this, path);
-    }
-    /**
-     * Adds routes to the router.
-     * Navigates automatically if the router slot is the root and is connected.
-     * @param routes
-     * @param navigate
-     */
-    add(routes, navigate = this.isRoot && this.isConnected) {
-        // Add the routes to the array
-        this._routes.push(...routes);
-        // Register that the path has changed so the correct route can be loaded.
-        if (navigate) {
-            this.render().then();
-        }
-    }
-    /**
-     * Removes all routes.
-     */
-    clear() {
-        this._routes.length = 0;
-    }
-    /**
-     * Each time the path changes, load the new path.
-     */
-    async render() {
-        // When using ShadyDOM the disconnectedCallback in the child router slot is called async
-        // in a microtask. This means that when using the ShadyDOM polyfill, sometimes child router slots
-        // would not clear event listeners from the parent router slots and therefore route even though
-        // it was no longer in the DOM. The solution is to check whether the isConnected flag is false
-        // before rendering the path.
-        if (!this.isConnected) {
-            return;
-        }
-        // Either choose the parent fragment or the current path if no parent exists.
-        // The root router slot will always use the entire path.
-        const pathFragment = this.parent != null && this.parent.fragments != null
-            ? this.parent.fragments.rest
-            : pathWithoutBasePath();
-        // Route to the path
-        await this.renderPath(pathFragment);
-    }
-    /**
-     * Attaches listeners, either globally or on the parent router.
-     */
-    attachListeners() {
-        // Add listeners that updates the route
-        this.listeners.push(this.parent != null
-            ? // Attach child router listeners
-                addListener(this.parent, "changestate", this.render)
-            : // Add global listeners.
-                addListener(GLOBAL_ROUTER_EVENTS_TARGET, "changestate", this.render));
-    }
-    /**
-     * Clears the children in the DOM.
-     */
-    clearChildren() {
-        while (this.firstChild != null) {
-            this.firstChild.parentNode.removeChild(this.firstChild);
-        }
-    }
-    /**
-     * Detaches the listeners.
-     */
-    detachListeners() {
-        removeListeners(this.listeners);
-    }
-    /**
-     * Notify the listeners.
-     */
-    notifyChildRouters(info) {
-        // This method should be called before routeMatch is being set!
-        // This only work cause we are using a requestAnimationFrame to dispatch the event,
-        // in other words, the routeMatch will be set when the child router receives the event.
-        // Scenario:
-        // When this router came from a route(routeMatch !== null), then:
-        // Dispatch the route change event to notify the children that something happened.
-        // This is because the child routes might have to change routes further down the tree.
-        // The event is dispatched in an animation frame to allow route children to make the initial render first
-        // and hook up the new router slot.
-        if (this._routeMatch !== null) {
-            requestAnimationFrame(() => {
-                dispatchRouteChangeEvent(this, info);
-            });
-        }
-    }
-    /**
-     * Loads a new path based on the routes.
-     * Returns true if a navigation was made to a new page.
-     */
-    async renderPath(path) {
-        // Find the corresponding route.
-        const match = matchRoutes(this._routes, path);
-        // Ensure that a route was found, otherwise we just clear the current state of the route.
-        if (match == null) {
-            this._routeMatch = null;
-            return false;
-        }
-        const { route } = match;
-        const info = { match, slot: this };
-        try {
-            // Only change route if its a new route.
-            const navigate = shouldNavigate(this.match, match);
-            if (navigate) {
-                // Listen for another push state event. If another push state event happens
-                // while we are about to navigate we have to cancel.
-                let navigationInvalidated = false;
-                const cancelNavigation = () => (navigationInvalidated = true);
-                const removeChangeListener = addListener(GLOBAL_ROUTER_EVENTS_TARGET, "changestate", cancelNavigation, {
-                    once: true,
-                });
-                // Cleans up the routing by removing listeners and restoring the match from before
-                const cleanup = () => {
-                    removeChangeListener();
-                };
-                // Cleans up and dispatches a global event that a navigation was cancelled.
-                const cancel = () => {
-                    cleanup();
-                    dispatchGlobalRouterEvent("navigationcancel", info);
-                    dispatchGlobalRouterEvent("navigationend", info);
-                    return false;
-                };
-                // Dispatch globally that a navigation has started
-                dispatchGlobalRouterEvent("navigationstart", info);
-                // Check whether the guards allow us to go to the new route.
-                if (route.guards != null) {
-                    for (const guard of route.guards) {
-                        if (!(await guard(info))) {
-                            return cancel();
-                        }
-                    }
-                }
-                // We are going to navigate, so we want to notify the child routers:
-                this.notifyChildRouters(info);
-                // Redirect if necessary
-                if (isRedirectRoute(route)) {
-                    cleanup();
-                    handleRedirect(this, route);
-                    return false;
-                }
-                // Handle custom resolving if necessary
-                else if (isResolverRoute(route)) {
-                    // The resolve will handle the rest of the navigation. This includes whether or not the navigation
-                    // should be cancelled. If the resolve function returns false we cancel the navigation.
-                    if ((await route.resolve(info)) === false) {
-                        return cancel();
-                    }
-                }
-                // If the component provided is a function (and not a class) call the function to get the promise.
-                else {
-                    const page = await resolvePageComponent(route, info);
-                    // Cancel the navigation if another navigation event was sent while this one was loading
-                    if (navigationInvalidated) {
-                        return cancel();
-                    }
-                    // Remove the old page by clearing the slot
-                    this.clearChildren();
-                    // Store the new route match before we append the new page to the DOM.
-                    // We do this to ensure that we can find the match in the connectedCallback of the page.
-                    this._routeMatch = match;
-                    // Append the new page
-                    this.appendChild(page);
-                }
-                // Remember to cleanup after the navigation
-                cleanup();
-            }
-            else {
-                // We did not make a new navigation this time, but we want to notify children here:
-                this.notifyChildRouters(info);
-            }
-            // Store the new route match
-            this._routeMatch = match;
-            // Dispatch globally that a navigation has ended.
-            if (navigate) {
-                dispatchGlobalRouterEvent("navigationsuccess", info);
-                dispatchGlobalRouterEvent("navigationend", info);
-            }
-            return navigate;
-        }
-        catch (e) {
-            dispatchGlobalRouterEvent("navigationerror", info);
-            dispatchGlobalRouterEvent("navigationend", info);
-            throw e;
-        }
-    }
-}
-window.customElements.define(ROUTER_SLOT_TAG_NAME, RouterSlot);
-
-export { CATCH_ALL_WILDCARD, DEFAULT_PATH_MATCH, GLOBAL_ROUTER_EVENTS_TARGET, HISTORY_PATCH_NATIVE_KEY, PARAM_IDENTIFIER, ROUTER_SLOT_TAG_NAME, RouterSlot, TRAVERSE_FLAG, addListener, attachCallback, basePath, constructAbsolutePath, constructPathWithBasePath, dispatchGlobalRouterEvent, dispatchRouteChangeEvent, ensureAnchorHistory, ensureHistoryEvents, ensureSlash, getFragments, handleRedirect, historyPatches, isPathActive, isRedirectRoute, isResolverRoute, matchRoute, matchRoutes, path, pathWithoutBasePath, query, queryParentRoots, queryParentRouterSlot, queryString, removeListeners, resolvePageComponent, saveNativeFunction, shouldNavigate, slashify, stripSlash, stripStart, toQuery, toQueryString, traverseRouterTree };
+const y="**",A="\\.\\.\\/",L=/:([^\\/]+)/g,v="router-slot",m=window,g="native",T="prefix";function $(t,e){t.dispatchEvent(new CustomEvent("changestate",{detail:e}))}function o(t,e){m.dispatchEvent(new CustomEvent(t,{detail:e}))}function E(t,e,n,r){const s=Array.isArray(e)?e:[e];return s.forEach(a=>t.addEventListener(a,n,r)),()=>s.forEach(a=>t.removeEventListener(a,n,r))}function S(t){t.forEach(e=>e())}const M=[["pushState",["pushstate","changestate"]],["replaceState",["replacestate","changestate"]],["forward",["pushstate","changestate"]],["go",["pushstate","changestate"]],["back",["popstate"]]];function N(){for(const[t,e]of M)for(const n of e)b(history,t,n);window.addEventListener("popstate",t=>{if(F({eventName:"popstate"})){t.preventDefault(),t.stopPropagation();return}setTimeout(()=>o("changestate"),0)})}function b(t,e,n){const r=t[e];x(t,e,r),t[e]=(...s)=>{const a=s.length>2?s[2]:null;F({url:a,eventName:n})||(r.apply(t,s),o(n))}}function x(t,e,n){t[g]==null&&(t[g]={}),t[g][`${e}`]=n.bind(t)}function F(t){return!m.dispatchEvent(new CustomEvent("willchangestate",{cancelable:!0,detail:t}))}const H=document.createElement("a");function R(t={}){return h(window.location.pathname,t)}function I(t={}){return h(k(R(),W()),t)}function W(t={}){return w(".",t)}function w(t,e={}){return H.href=t,h(H.pathname,e)}function k(t,e){return t.replace(new RegExp(`^${e}`),"")}function _(){return window.location.search}function j(){return O(_().substr(1))}function l(t){return h(t,{start:!1,end:!1})}function tt(t){return h(t,{start:!0,end:!0})}function h(t,{start:e=!0,end:n=!0}={}){return t=e&&!t.startsWith("/")?`/${t}`:!e&&t.startsWith("/")?t.slice(1):t,n&&!t.endsWith("/")?`${t}/`:!n&&t.endsWith("/")?t.slice(0,t.length-1):t}function O(t){if(t.length===0)return{};const n=t.split("&").map(r=>r.split("="));return Object.assign({},...n.map(r=>({[decodeURIComponent(r[0])]:r.length>1?decodeURIComponent(r[1]):""})))}function et(t){return Object.entries(t).map(([e,n])=>`${e}${n!=""?`=${encodeURIComponent(n)}`:""}`).join("&")}function nt(t,e=R()){return new RegExp(`^${l(t)}(/|$)`,"gm").test(l(e))}function D(t,e){const n=[],r=l(t.path.replace(L,(i,...c)=>(n.push(c[0]),"([^/]+)"))),s=t.path===y||t.path.length===0&&t.pathMatch!="full"?/^/:(()=>{switch(t.pathMatch||T){case"full":return new RegExp(`^${r}/?$`);case"suffix":return new RegExp(`^.*?${r}/?$`);case"fuzzy":return new RegExp(`^.*?${r}.*?$`);case"prefix":default:return new RegExp(`^[/]?${r}(?:/|$)`)}})(),a=e.match(s);if(a!=null){const i=n.reduce((u,d,p)=>(u[d]=a[p+1],u),{}),c=l(e.slice(0,a[0].length)),f=l(e.slice(a[0].length,e.length));return{route:t,match:a,params:i,fragments:{consumed:c,rest:f}}}return null}function q(t,e){for(const n of t){const r=D(n,e);if(r!=null)return r}return null}async function U(t,e){let n=t.component;if(n instanceof Function)try{n=n()}catch(a){if(!(a instanceof TypeError))throw a}const r=await Promise.resolve(n);let s;return r instanceof HTMLElement?s=r:s=new(r.default?r.default:r),t.setup!=null&&t.setup(s,e),s}function G(t){return"redirectTo"in t}function B(t){return"resolve"in t}function Q(t){let e=[t];for(;t.parent!=null;)t=t.parent,e.push(t);const n=e.reduce((s,a)=>({slot:a,child:s}),void 0),r=e.length;return{tree:n,depth:r}}function V(t,e){let n=t;const r=[];for(;n!=null&&n.slot.match!=null&&e>0;)r.push(n.slot.match.fragments.consumed),n=n.child,e--;return r}function C(t,e=""){const{tree:n,depth:r}=Q(t);if(!e.startsWith("/")){let s=0;e.startsWith("./")&&(e=e.slice(2));const a=e.match(new RegExp(A,"g"));if(a!=null){s=a.length;const c=a.reduce((f,u)=>f+u.length,0);e=e.slice(c)}const i=V(n,r-1-s).filter(c=>c.length>0);e=`${i.join("/")}${i.length>0?"/":""}${e}`}return w(e,{end:!1})}function z(t,e){history.replaceState(history.state,"",`${C(t,e.redirectTo)}${e.preserveQuery?_():""}`)}function Y(t,e){if(t==null)return!0;const{route:n,fragments:r}=t,{route:s,fragments:a}=e,i=n==s;return!(r.consumed==a.consumed)||!i}function K(t){return P(t,v)}function P(t,e,n=0,r=0){const s=t.getRootNode();if(r>=n){const i=s.querySelector(e);if(i!=null&&i!=t)return i}const a=s.getRootNode();return a.host==null?null:P(a.host,e,n,++r)}function J(){window.addEventListener("click",t=>{const e="composedPath"in t?t.composedPath().find(s=>s instanceof HTMLAnchorElement):t.target;if(e==null||!(e instanceof HTMLAnchorElement)||!e.href.startsWith(location.origin)||e.target!==""&&e.target!=="_self"||e.dataset.routerSlot==="disabled")return;const r=e.pathname+e.search+e.hash;t.preventDefault(),history.pushState(null,"",r)})}const X=document.createElement("template");X.innerHTML="<slot></slot>",N(),J();class Z extends HTMLElement{listeners=[];_routes=[];get routes(){return this._routes}set routes(e){this.clear(),this.add(e)}_parent;get parent(){return this._parent}set parent(e){this._lockParent=!0,this._setParent(e)}_lockParent=!1;_setParent(e){this._parent!==e&&(this.detachListeners(),this._parent=e,this.attachListeners())}get isRoot(){return this.parent==null}_routeMatch=null;get match(){return this._routeMatch}get route(){return this.match!=null?this.match.route:null}get fragments(){return this.match!=null?this.match.fragments:null}get params(){return this.match!=null?this.match.params:null}constructor(){super(),this.addEventListener("router-slot:capture-parent",n=>{n.stopPropagation(),n.detail.parent=this}),this.render=this.render.bind(this),this.attachShadow({mode:"open"}).appendChild(X.content.cloneNode(!0))}connectedCallback(){if(!this._lockParent){const e=new CustomEvent("router-slot:capture-parent",{composed:!0,bubbles:!0,detail:{parent:null}});this.parentNode?(this.parentNode.dispatchEvent(e),this._setParent(e.detail.parent??null)):this._setParent(null)}this.parent&&this.parent.match!==null&&this.match===null&&requestAnimationFrame(()=>{this.render()})}disconnectedCallback(){this.detachListeners()}queryParentRouterSlot(){return K(this)}constructAbsolutePath(e){return C(this,e)}add(e,n){this._routes.push(...e),n===void 0&&(n=this._routeMatch===null),n??=this.isRoot&&this.isConnected,n&&this.render().then()}clear(){this._routes.length=0}async render(){if(!this.isConnected)return;const e=this.parent!=null&&this.parent.fragments!=null?this.parent.fragments.rest:I();await this.renderPath(e)}attachListeners(){this.listeners.push(this.parent!=null?E(this.parent,"changestate",this.render):E(m,"changestate",this.render))}clearChildren(){for(;this.firstChild!=null;)this.firstChild.parentNode.removeChild(this.firstChild)}detachListeners(){S(this.listeners)}notifyChildRouters(e){this._routeMatch!==null&&requestAnimationFrame(()=>{$(this,e)})}async renderPath(e){const n=q(this._routes,e);if(n==null)return this._routeMatch=null,!1;const{route:r}=n,s={match:n,slot:this};try{const a=Y(this.match,n);if(a){let i=!1;const f=E(m,"changestate",()=>i=!0,{once:!0}),u=()=>{f()},d=()=>(u(),o("navigationcancel",s),o("navigationend",s),!1);if(o("navigationstart",s),r.guards!=null){for(const p of r.guards)if(!await p(s))return d()}if(this.notifyChildRouters(s),G(r))return u(),z(this,r),!1;if(B(r)){if(await r.resolve(s)===!1)return d()}else{const p=await U(r,s);if(i)return d();this.clearChildren(),this._routeMatch=n,this.appendChild(p)}u()}else this.notifyChildRouters(s);return this._routeMatch=n,a&&(o("navigationsuccess",s),o("navigationend",s)),a}catch(a){throw o("navigationerror",s),o("navigationend",s),a}}}window.customElements.define(v,Z);export{y as CATCH_ALL_WILDCARD,T as DEFAULT_PATH_MATCH,m as GLOBAL_ROUTER_EVENTS_TARGET,g as HISTORY_PATCH_NATIVE_KEY,L as PARAM_IDENTIFIER,v as ROUTER_SLOT_TAG_NAME,Z as RouterSlot,A as TRAVERSE_FLAG,E as addListener,b as attachCallback,W as basePath,C as constructAbsolutePath,w as constructPathWithBasePath,o as dispatchGlobalRouterEvent,$ as dispatchRouteChangeEvent,J as ensureAnchorHistory,N as ensureHistoryEvents,tt as ensureSlash,V as getFragments,z as handleRedirect,M as historyPatches,nt as isPathActive,G as isRedirectRoute,B as isResolverRoute,D as matchRoute,q as matchRoutes,R as path,I as pathWithoutBasePath,j as query,P as queryParentRoots,K as queryParentRouterSlot,_ as queryString,S as removeListeners,U as resolvePageComponent,x as saveNativeFunction,Y as shouldNavigate,h as slashify,l as stripSlash,k as stripStart,O as toQuery,et as toQueryString,Q as traverseRouterTree};