Merge pull request #2925 from Licen-it/master

fix(SideNavItem): implemented more future proof navigation extras without dropping routerlink support

Author: zvonimirfras

angular.json

@@ -71,7 +71,8 @@
 							"-t"
 						],
 						"configDir": ".storybook",
-						"outputDir": "dist/docs/storybook"
+						"outputDir": "dist/docs/storybook",
+						"enableProdMode": false
 					}
 				}
 			}

src/ui-shell/sidenav/routerlink-extended.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, Input, OnChanges, SimpleChanges } from "@angular/core";
+import { NavigationExtras, RouterLinkWithHref } from "@angular/router";
+import { keys } from "lodash";
+
+@Directive({
+	// tslint:disable-next-line
+	selector: "[routerLink]"
+})
+export class RouterLinkExtendedDirective extends RouterLinkWithHref implements OnChanges {
+	// TODO: Change RouterLinkWithHref with RouterLink from angular 15 since RouterLinkWithHref has been deprecated
+	@Input() routeExtras: NavigationExtras;
+
+	ngOnChanges(changes: SimpleChanges): void {
+		if (changes.routeExtras && this.routeExtras) {
+			keys(this.routeExtras).forEach(routeExtraProperty => this[routeExtraProperty] = this.routeExtras[routeExtraProperty]);
+		}
+
+		super.ngOnChanges(changes);
+	}
+}

src/ui-shell/sidenav/sidenav-item.component.ts

@@ -33,14 +33,7 @@ import { Router } from "@angular/router";
 			<a
 				[attr.title]="title ? title : null"
 				[routerLink]="route"
- 				[relativeTo]="routeExtras?.relativeTo"
-				[queryParams]="routeExtras?.queryParams"
-				[fragment]="routeExtras?.fragment"
-				[queryParamsHandling]="routeExtras?.queryParamsHandling"
-				[preserveFragment]="routeExtras?.preserveFragment"
-				[skipLocationChange]="routeExtras?.skipLocationChange"
-				[replaceUrl]="routeExtras?.replaceUrl"
-				[state]="routeExtras?.state"
+				[routeExtras]="routeExtras"
 				routerLinkActive="cds--side-nav__item--active"
 				ariaCurrentWhenActive="page"
 				class="cds--side-nav__link">

src/ui-shell/sidenav/sidenav.module.ts

@@ -7,6 +7,7 @@ import { I18nModule } from "carbon-components-angular/i18n";
 import { SideNav } from "./sidenav.component";
 import { SideNavItem } from "./sidenav-item.component";
 import { SideNavMenu } from "./sidenav-menu.component";
+import { RouterLinkExtendedDirective } from "./routerlink-extended.directive";
 
 export { SideNavItemInterface } from "./sidenav-item.interface";
 
@@ -20,7 +21,8 @@ export {
 	declarations: [
 		SideNav,
 		SideNavItem,
-		SideNavMenu
+		SideNavMenu,
+		RouterLinkExtendedDirective
 	],
 	imports: [CommonModule, I18nModule, RouterModule],
 	exports: [

src/ui-shell/ui-shell.stories.ts

@@ -319,9 +319,9 @@ const SideNavigationUseRouterTemplate = (args) => ({
 					<svg cdsIcon="fade" size="16"></svg>
 					Link
 				</cds-sidenav-item>
-				<cds-sidenav-item [route]="['bar']" [useRouter]="true">
+				<cds-sidenav-item [route]="['bar']" [useRouter]="true" [routeExtras]="routeExtras">
 					<svg cdsIcon="fade" size="16"></svg>
-					Link
+					Link with query params
 				</cds-sidenav-item>
 				<cds-sidenav-menu title="Category title">
 					<svg cdsIcon="fade" icon size="16"></svg>
@@ -338,6 +338,13 @@ const SideNavigationUseRouterTemplate = (args) => ({
 });
 export const SideNavigationUseRouter = SideNavigationUseRouterTemplate.bind({});
 SideNavigationUseRouter.storyName = "Side Navigation with useRouter";
+SideNavigationUseRouter.args = {
+	routeExtras: {
+		queryParams: {
+			key: "value"
+		}
+	}
+};
 
 const SidePanelTemplate = (args) => ({
 	props: args,