Task/add icon to indicate external links in page tabs component (#7081)

* Add icon to indicate external links

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added an icon to indicate external links in the page tabs component
 - Added the Korean (`ko`) language to the footer
 
 ### Changed

libs/ui/src/lib/page-tabs/page-tabs.component.html

@@ -20,6 +20,10 @@
           <ng-container
             *ngTemplateOutlet="tabContent; context: { $implicit: tab }"
           />
+          <ion-icon
+            class="d-none d-sm-block external-link-icon ml-auto text-muted"
+            name="open-outline"
+          />
         </button>
       } @else {
         <a

libs/ui/src/lib/page-tabs/page-tabs.component.scss

@@ -6,6 +6,10 @@
   height: 100%;
   width: 100%;
 
+  .external-link-icon {
+    font-size: 0.75rem;
+  }
+
   @include mat.tabs-overrides(
     (
       active-indicator-height: 0,
@@ -65,6 +69,11 @@
               background-color: rgba(var(--palette-foreground-base), 0.05);
               font-weight: 500;
             }
+
+            .mdc-tab__content,
+            .mdc-tab__text-label {
+              width: 100%;
+            }
           }
         }
       }

libs/ui/src/lib/page-tabs/page-tabs.component.ts

@@ -8,6 +8,8 @@ import {
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 
 import { TabConfiguration } from './interfaces/interfaces';
@@ -27,5 +29,7 @@ export class GfPageTabsComponent {
 
   public constructor() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    addIcons({ openOutline });
   }
 }