APIs dropdown close fix and Product API widget target fix

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.html

@@ -17,7 +17,7 @@
         <button class="input-group-addon no-border" data-toggle="dropdown" aria-label="Expand APIs list">
             <i class="icon-emb icon-emb-chevron-down"></i>
         </button>
-        <div class="dropdown">
+        <div class="dropdown api-list-dropdown">
             <input type="search" class="form-control form-control-light" aria-label="Search" placeholder="Search APIs"
                 data-bind="textInput: pattern" autofocus />
 
@@ -49,7 +49,7 @@
                 <div class="menu menu-vertical" role="list">
                     <!-- ko foreach: { data: group.items, as: 'item' } -->
                     <a href="#" role="listitem" class="nav-link text-truncate" data-dismiss
-                        data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }">
+                        data-bind="attr: { href: $component.getReferenceUrl(item) }, css: { 'nav-link-active': $component.selectedApiName() === item.name }, activate: $component.closeDropdown">
                         <span data-bind="text: item.displayName"></span>
                         <!-- ko if: item.type === 'soap' -->
                         <span class="badge badge-soap">SOAP</span>

src/components/apis/list-of-apis/ko/runtime/api-list-dropdown.ts

@@ -184,6 +184,14 @@ export class ApiListDropdown {
         this.groupTagsExpanded(newSet);
     }
 
+    public closeDropdown(): void {
+        const apiDropdowns = document.getElementsByClassName('api-list-dropdown');
+        for (var i = 0; i < apiDropdowns.length; i++) {
+            if (apiDropdowns[i].classList.contains('show'))
+                apiDropdowns[i].classList.remove('show');
+        }
+    }
+
     @OnDestroyed()
     public dispose(): void {
         this.router.removeRouteChangeListener(this.onRouteChange);

src/components/products/product-apis/ko/productApisViewModelBinder.ts

@@ -13,7 +13,10 @@ export class ProductApisViewModelBinder implements ViewModelBinder<ProductApisMo
         componentInstance.runtimeConfig(JSON.stringify({
             detailsPageUrl: state.detailsPageHyperlink
                 ? state.detailsPageHyperlink.href
-                : undefined
+                : undefined,
+            detailsPageTarget: state.detailsPageHyperlink
+                ? state.detailsPageHyperlink.target
+                : undefined,
         }));
     }
 

src/components/products/product-apis/ko/runtime/product-apis.html

@@ -23,7 +23,7 @@
         <!-- ko foreach: { data: apis, as: 'item' } -->
         <div class="table-row">
             <div class="col-5 text-truncate">
-                <a href="#" data-bind="attr: { href: $component.getReferenceUrl(item), title: item.displayName }">
+                <a href="#" data-bind="attr: { href: $component.getReferenceUrl(item), target: $component.detailsPageTarget(), title: item.displayName }">
                     <span data-bind="text: item.displayName"></span>
                     <!-- ko if: item.type === 'soap' -->
                     <span class="badge badge-soap">SOAP</span>

src/components/products/product-apis/ko/runtime/product-apis.ts

@@ -29,6 +29,7 @@ export class ProductApis {
         private readonly routeHelper: RouteHelper
     ) {
         this.detailsPageUrl = ko.observable();
+        this.detailsPageTarget = ko.observable();
         this.apis = ko.observableArray([]);
         this.working = ko.observable();
         this.pattern = ko.observable();
@@ -39,6 +40,9 @@ export class ProductApis {
     @Param()
     public detailsPageUrl: ko.Observable<string>;
 
+    @Param()
+    public detailsPageTarget: ko.Observable<string>;
+
     @OnMounted()
     public async initialize(): Promise<void> {
         await this.searchApis();