@flusys/ng-storage 5.5.0 → 6.0.0-beta.2

package/fesm2022/flusys-ng-storage.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
 import { inject, signal, computed, Directive, DestroyRef, Injectable, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
+import { Router, RouterOutlet } from '@angular/router';
 import { APP_CONFIG, DEFAULT_APP_NAME, BaseApiService, getDefaultStorageConfigId } from '@flusys/ng-core';
 import { LAYOUT_AUTH_STATE } from '@flusys/ng-layout';
-import { TranslateService, ApiResourceService, FILE_PROVIDER, permissionGuard, FILE_PERMISSIONS, FOLDER_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES, PermissionValidatorService, TranslatePipe } from '@flusys/ng-shared';
-import { MessageService, ConfirmationService } from 'primeng/api';
+import { TranslateService, ApiResourceService, FILE_PROVIDER, permissionGuard, FILE_PERMISSIONS, FOLDER_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, resolveTranslationModule, SHARED_MESSAGES, PermissionValidatorService, RouterTabsComponent, TranslatePipe } from '@flusys/ng-shared';
+import { MessageService, ConfirmationService } from '@flusys/ng-ui';
 import { from, switchMap, map } from 'rxjs';
-import { CommonModule } from '@angular/common';
 
 const STORAGE_MESSAGES = {
     // File entity CRUD (API keys)
@@ -201,22 +200,22 @@ const PROVIDER_LABEL_KEYS = {
 const PROVIDER_CONFIGS = {
     [FileLocationEnum.LOCAL]: {
         labelKey: 'storage.local.title',
-        icon: 'pi pi-folder',
+        icon: 'folder',
         severity: 'secondary',
     },
     [FileLocationEnum.AWS]: {
         labelKey: 'storage.aws.title',
-        icon: 'pi pi-cloud',
+        icon: 'cloud',
         severity: 'warn',
     },
     [FileLocationEnum.AZURE]: {
         labelKey: 'storage.azure.title',
-        icon: 'pi pi-cloud',
+        icon: 'cloud',
         severity: 'info',
     },
     [FileLocationEnum.SFTP]: {
         labelKey: 'storage.sftp.title',
-        icon: 'pi pi-server',
+        icon: 'server',
         severity: 'contrast',
     },
 };
@@ -232,10 +231,10 @@ function getProviderLabelKey(storage) {
  */
 function getProviderIcon(storage) {
     const enumValue = storage;
-    return PROVIDER_CONFIGS[enumValue]?.icon ?? 'pi pi-database';
+    return PROVIDER_CONFIGS[enumValue]?.icon ?? 'database';
 }
 /**
- * Get provider severity for p-tag
+ * Get provider severity for f-tag
  */
 function getProviderSeverity(storage) {
     const enumValue = storage;
@@ -246,18 +245,18 @@ function getProviderSeverity(storage) {
  */
 function getFileIcon(contentType) {
     if (contentType.startsWith('image/'))
-        return 'pi pi-image';
+        return 'image';
     if (contentType.startsWith('video/'))
-        return 'pi pi-video';
+        return 'video';
     if (contentType.startsWith('audio/'))
-        return 'pi pi-volume-up';
+        return 'volume-up';
     if (contentType.includes('pdf'))
-        return 'pi pi-file-pdf';
+        return 'file-pdf';
     if (contentType.includes('word') || contentType.includes('document'))
-        return 'pi pi-file-word';
+        return 'file-word';
     if (contentType.includes('excel') || contentType.includes('spreadsheet'))
-        return 'pi pi-file-excel';
-    return 'pi pi-file';
+        return 'file-excel';
+    return 'file';
 }
 /** File size unit keys for translation */
 const FILE_SIZE_UNIT_KEYS = [
@@ -327,10 +326,10 @@ class BaseStoragePage {
     navigateTo(path) {
         this.router.navigate(path);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseStoragePage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: BaseStoragePage, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStoragePage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseStoragePage, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseStoragePage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStoragePage, decorators: [{
             type: Directive
         }] });
 class BaseStorageListPage {
@@ -409,7 +408,7 @@ class BaseStorageListPage {
         this.confirmationService.confirm({
             message: this.getDeleteConfirmMessage(item),
             header: options?.header ?? this.t('shared.confirm.delete.header'),
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: () => {
                 from(deleteApiCall(idGetter(item)))
@@ -428,7 +427,7 @@ class BaseStorageListPage {
         this.confirmationService.confirm({
             message: this.getDeleteConfirmMessage(item),
             header: options?.header ?? this.t('shared.confirm.delete.header'),
-            icon: 'pi pi-exclamation-triangle',
+            icon: 'exclamation-triangle',
             acceptButtonStyleClass: 'p-button-danger',
             accept: async () => {
                 const res = await deleteApiCall(idGetter(item));
@@ -444,10 +443,10 @@ class BaseStorageListPage {
     t(key, variables) {
         return this.translateAdapter?.translate(key, variables) ?? key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseStorageListPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: BaseStorageListPage, isStandalone: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStorageListPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: BaseStorageListPage, isStandalone: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BaseStorageListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseStorageListPage, decorators: [{
             type: Directive
         }] });
 
@@ -465,10 +464,10 @@ class FileManagerApiService extends ApiResourceService {
     createFiles(dtos) {
         return this.http.post(`${this.baseUrl}/insert-many`, dtos);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileManagerApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileManagerApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -484,10 +483,10 @@ class FolderApiService extends ApiResourceService {
     constructor() {
         super('folder', 'storage');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FolderApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FolderApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FolderApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -505,10 +504,10 @@ class StorageConfigApiService extends ApiResourceService {
     constructor() {
         super('storage-config', 'storage');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StorageConfigApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageConfigApiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -618,10 +617,10 @@ class UploadService extends BaseApiService {
         const configId = this.resolveConfigId(storageConfigId);
         return { ...data, ...(configId && { storageConfigId: configId }) };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -688,10 +687,10 @@ class FileProviderAdapter {
         size: parseFloat(f.size) * 1024,
         contentType: f.contentType,
     });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileProviderAdapter });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileProviderAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileProviderAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -737,17 +736,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-D_shqU2a.mjs').then((m) => m.FileManagerListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-list.component-DqHH9lI0.mjs').then((m) => m.FileManagerListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(FILE_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component--W6sWv7W.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-V-ZDWkKU.mjs').then((m) => m.FileManagerFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(FILE_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component--W6sWv7W.mjs').then((m) => m.FileManagerFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-file-manager-form.component-V-ZDWkKU.mjs').then((m) => m.FileManagerFormComponent),
                     },
                 ],
             },
@@ -758,17 +757,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-aQXBRZiN.mjs').then((m) => m.FolderListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-list.component-B52N1JaK.mjs').then((m) => m.FolderListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(FOLDER_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-BK2EWeV4.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Up9luV7j.mjs').then((m) => m.FolderFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(FOLDER_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-BK2EWeV4.mjs').then((m) => m.FolderFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-folder-form.component-Up9luV7j.mjs').then((m) => m.FolderFormComponent),
                     },
                 ],
             },
@@ -779,17 +778,17 @@ const STORAGE_ROUTES = [
                 children: [
                     {
                         path: '',
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-cjiA8k2G.mjs').then((m) => m.StorageConfigListComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-list.component-C-jaO7xD.mjs').then((m) => m.StorageConfigListComponent),
                     },
                     {
                         path: 'new',
                         canActivate: [permissionGuard(STORAGE_CONFIG_PERMISSIONS.CREATE)],
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-ByRs-CSx.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CEW5gpSt.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                     {
                         path: ':id',
                         canActivate: [permissionGuard(STORAGE_CONFIG_PERMISSIONS.UPDATE)],
-                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-ByRs-CSx.mjs').then((m) => m.StorageConfigFormComponent),
+                        loadComponent: () => import('./flusys-ng-storage-storage-config-form.component-CEW5gpSt.mjs').then((m) => m.StorageConfigFormComponent),
                     },
                 ],
             },
@@ -808,83 +807,73 @@ const STORAGE_ROUTES = [
  */
 class StorageContainerComponent {
     permissionValidator = inject(PermissionValidatorService);
+    translateService = inject(TranslateService);
     /** All available tabs with required permissions */
     allTabs = [
         {
             id: 'files',
             labelKey: 'storage.file.title',
-            icon: 'pi pi-file',
+            icon: 'file',
             route: 'files',
             permission: FILE_PERMISSIONS.READ,
         },
         {
             id: 'folders',
             labelKey: 'storage.folder.title',
-            icon: 'pi pi-folder',
+            icon: 'folder',
             route: 'folders',
             permission: FOLDER_PERMISSIONS.READ,
         },
         {
             id: 'configs',
             labelKey: 'storage.config.title',
-            icon: 'pi pi-cog',
+            icon: 'cog',
             route: 'configs',
             permission: STORAGE_CONFIG_PERMISSIONS.READ,
         },
     ];
     /** Visible tabs based on user permissions */
-    visibleTabs = computed(() => this.allTabs.filter((tab) => this.permissionValidator.hasPermission(tab.permission)), /* @ts-ignore */
+    visibleTabs = computed(() => this.allTabs
+        .filter((tab) => this.permissionValidator.hasPermission(tab.permission))
+        .map((tab) => ({
+        id: tab.id,
+        label: this.translateService.translate(tab.labelKey),
+        icon: tab.icon,
+        route: tab.route,
+    })), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StorageContainerComponent, isStandalone: true, selector: "lib-storage-container", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: StorageContainerComponent, isStandalone: true, selector: "lib-storage-container", ngImport: i0, template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
         <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'storage.title' | translate }}</h1>
         <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'storage.subtitle' | translate }}</p>
       </div>
 
-      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
-        @for (tab of visibleTabs(); track tab.id) {
-          <a
-            [routerLink]="tab.route"
-            routerLinkActive="tab-active"
-            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
-          >
-            <i [class]="tab.icon"></i>
-            <span>{{ tab.labelKey | translate }}</span>
-          </a>
-        }
-      </div>
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
 
       <router-outlet />
     </div>
-  `, isInline: true, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: RouterTabsComponent, selector: "lib-router-tabs", inputs: ["tabs"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StorageContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StorageContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-storage-container', imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive, TranslatePipe], template: `
+            args: [{
+                    selector: 'lib-storage-container',
+                    imports: [RouterOutlet, TranslatePipe, RouterTabsComponent],
+                    template: `
     <div class="p-2 sm:p-4">
       <div class="mb-4">
         <h1 class="text-xl sm:text-2xl font-bold m-0">{{ 'storage.title' | translate }}</h1>
         <p class="text-muted-color mt-1 text-sm sm:text-base">{{ 'storage.subtitle' | translate }}</p>
       </div>
 
-      <div class="scrollbar-hide flex gap-1 mb-4 border-b border-surface overflow-x-auto flex-nowrap">
-        @for (tab of visibleTabs(); track tab.id) {
-          <a
-            [routerLink]="tab.route"
-            routerLinkActive="tab-active"
-            class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-muted-color no-underline border-b-2 border-transparent -mb-px hover:bg-surface-hover [&.tab-active]:text-primary [&.tab-active]:border-primary [&.tab-active]:bg-surface-ground whitespace-nowrap shrink-0"
-          >
-            <i [class]="tab.icon"></i>
-            <span>{{ tab.labelKey | translate }}</span>
-          </a>
-        }
-      </div>
+      <lib-router-tabs [tabs]="visibleTabs()" class="mb-4" />
 
       <router-outlet />
     </div>
-  `, styles: [".scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}\n"] }]
+  `,
+                }]
         }] });
 
 var storageContainer_component = /*#__PURE__*/Object.freeze({