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);
	}
}