feat: Add an option to reverse the order of the route titles

[cedx]

🙋 Feature Request

Most websites, and even Windows applications, put the root title as the last component. The general pattern is: <document/page name> - <application name> or <routeTitle> - <rootTitle> (like: "Material Symbols and Icons - Google Fonts" or "Document1 - Word")

But the router produces the opposite title pattern: <rootTitle> - <routeTitle>

So, I would like an option to set the direction of the title order. This could also be interesting for RTL languages.

🤔 Expected Behavior

The document title follows this pattern if the newly created option is set: <child2> - <child1> - <root>

😯 Current Behavior

The document title follows this pattern: <root> - <child1> - <child2>

💁 Possible Solution

Add an option to the DefaultTitleBuilder constructor? And let folks override the RouterConfiguration.createTitleBuilder() method...

💻 Examples

Currently, I use a custom TitleBuilder just for this purpose:

class TitleBuilder {
    readonly #fragmentSeparator: string;
    readonly #reverseOrder: boolean;
    readonly #segmentSeparator: string;

    constructor(segmentSeparator = " - ", fragmentSeparator = ":", reverseOrder = false) {
        this.#fragmentSeparator = fragmentSeparator;
        this.#reverseOrder = reverseOrder;
        this.#segmentSeparator = segmentSeparator;
    }

    buildTitle(rootTitle: string, routeTitles: string[][]) {
        const segments = [rootTitle];
        for (const fragments of routeTitles) segments.push(fragments.filter(title => title.length).join(this.#fragmentSeparator));

        const titles = segments.filter(title => title.length);
        if (this.#reverseOrder) titles.reverse();
        return titles.join(this.#segmentSeparator);
    }

    joinTitles(parentTitle: string, childTitle: string): string {
        const titles = [parentTitle, childTitle].filter(title => title.length);
        if (this.#reverseOrder) titles.reverse();
        return titles.join(this.#segmentSeparator);
    }
}