Issue with the Angular version for the vf-tabs component

[oss6]

Overview

Currently the vf-tabs component does not work as expected when used with Angular.

Steps to reproduce

1. Include the first example of vf-tabs in an Angular application in a route different than the homepage (e.g. /datahubs):
2. npm start
3. Select the tab links
4. Refresh the page - redirection to the homepage

Expected behaviour

The selection of tab links should work within the routes in Angular.

Current behaviour

The selection of tab links removes the path and replaces it with the hash. For example given https://example.com/datahubs the result of clicking on a tab link with href as #test will be https://example.com#test instead of https://example.com/datahubs#test.

Screenshots/video

https://watch.screencastify.com/v/xfYDVGkWmeUtsy3s44lO

Possible solution

The issue arises because of the following snippet in vf-tabs.js (lines 99 to 101):

const data = newTab.getAttribute("id");
const url = '#' + data;
window.history.replaceState(data, null, url);

When using it in Angular it will override its routing behaviour.

A proposed solution is to add an option to pass to the vfTabs which controls whether to replaceState or not.

[bhushan-ebi]

Similar to #1937 and in absence of the video at link above, this issue could not be reproduced with given conditions. #2037 has been created to further create Angular version of VF Tabs where this issue will be revisited.