@c8y/ngx-components 1022.33.0 → 1022.34.0

package/fesm2022/c8y-ngx-components-branding-shared.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/router';
-import { RouterModule } from '@angular/router';
 import * as i1 from '@c8y/ngx-components';
-import { NavigatorNode, gettext, AppStateService, hookNavigator, hookTab, HookProviderTypes } from '@c8y/ngx-components';
+import { NavigatorNode, AppStateService, hookNavigator, hookTab, hookRoute, HookProviderTypes } from '@c8y/ngx-components';
 import { map, shareReplay, distinctUntilChanged, switchMap, filter } from 'rxjs/operators';
+import { gettext } from '@c8y/ngx-components/gettext';
 import { of, merge } from 'rxjs';
 import { StoreBrandingService } from '@c8y/ngx-components/branding/shared/data';
 
@@ -59,7 +59,7 @@ class BrandingTabFactory {
         return of(true);
     }
     getPathForBranding(brandingName, subPath) {
-        return `branding-editor/${brandingName}/edit/${subPath}`;
+        return `branding-editor/variants/${brandingName}/edit/${subPath}`;
     }
     getTabsForVersion(name) {
         return [
@@ -114,47 +114,70 @@ const BRANDING_ROUTING = [
             {
                 path: '',
                 pathMatch: 'full',
-                loadComponent: () => import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingComponent)
+                redirectTo: 'variants'
             },
             {
-                path: ':name',
-                resolve: {
-                    branding: ((route, _state) => {
-                        return inject(StoreBrandingService).getBrandingOptionsForVersion(route.params.name);
-                    }),
-                    tags: (async (route, _state) => {
-                        const store = inject(StoreBrandingService);
-                        const { variants } = await store.loadBrandingVariants();
-                        return variants.find(v => v?.tags?.includes(route.params.name))?.tags;
-                    }),
-                    fallbackBranding: (async (_route, _state) => {
-                        try {
-                            const store = inject(StoreBrandingService);
-                            const appState = inject(AppStateService);
-                            // management tenant should be free to change what every they want, so we do not provide a fallback branding
-                            if (appState.currentTenant.value?.name === 'management') {
-                                return {};
-                            }
-                            const fallbackBranding = await store.getBrandingOptionsForVersion('fallback');
-                            return fallbackBranding;
-                        }
-                        catch (e) {
-                            return {};
-                        }
-                    })
-                },
+                path: 'variants',
                 children: [
                     {
                         path: '',
                         pathMatch: 'full',
-                        redirectTo: 'edit'
+                        loadComponent: () => import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingComponent)
                     },
                     {
-                        path: 'edit',
-                        loadComponent: () => import('@c8y/ngx-components/branding/shared/lazy').then(m => m.EditBrandingRouterOutletComponent),
-                        children: BRANDING_EDIT_CHILD_ROUTES
+                        path: ':name',
+                        resolve: {
+                            branding: ((route, _state) => {
+                                return inject(StoreBrandingService).getBrandingOptionsForVersion(route.params.name);
+                            }),
+                            tags: (async (route, _state) => {
+                                const store = inject(StoreBrandingService);
+                                const { variants } = await store.loadBrandingVariants();
+                                return variants.find(v => v?.tags?.includes(route.params.name))?.tags;
+                            }),
+                            fallbackBranding: (async (_route, _state) => {
+                                try {
+                                    const store = inject(StoreBrandingService);
+                                    const appState = inject(AppStateService);
+                                    // management tenant should be free to change what every they want, so we do not provide a fallback branding
+                                    if (appState.currentTenant.value?.name === 'management') {
+                                        return {};
+                                    }
+                                    const fallbackBranding = await store.getBrandingOptionsForVersion('fallback');
+                                    return fallbackBranding;
+                                }
+                                catch (e) {
+                                    return {};
+                                }
+                            })
+                        },
+                        children: [
+                            {
+                                path: '',
+                                pathMatch: 'full',
+                                redirectTo: 'edit'
+                            },
+                            {
+                                path: 'edit',
+                                loadComponent: () => import('@c8y/ngx-components/branding/shared/lazy').then(m => m.EditBrandingRouterOutletComponent),
+                                children: BRANDING_EDIT_CHILD_ROUTES
+                            }
+                        ]
                     }
                 ]
+            },
+            {
+                path: 'assets',
+                loadComponent: () => import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingAssetsComponent)
+            },
+            // Redirect old paths (like "/branding-editor/default" to "/branding-editor/variants/default")
+            {
+                path: '**',
+                redirectTo: redirectData => {
+                    const { url } = redirectData;
+                    const urlToAppend = url.map(segment => segment.path).join('/');
+                    return `/branding-editor/variants/${urlToAppend}`;
+                }
             }
         ]
     },
@@ -171,23 +194,58 @@ const BRANDING_ROUTING = [
         redirectTo: 'branding-editor'
     }
 ];
+class BrandingVariantsAndAssetsTabFactory {
+    constructor(router) {
+        this.router = router;
+        this.tabs = [
+            {
+                path: '/branding-editor/variants',
+                label: gettext('Variants'),
+                icon: 'folder',
+                priority: 500
+            },
+            {
+                path: '/branding-editor/assets',
+                label: gettext('Branding assets'),
+                icon: 'file',
+                priority: 100
+            }
+        ];
+    }
+    get() {
+        if (this.tabs.map(tab => tab.path).includes(this.router.url)) {
+            return this.tabs;
+        }
+        return [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingVariantsAndAssetsTabFactory, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingVariantsAndAssetsTabFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BrandingVariantsAndAssetsTabFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$1.Router }] });
 class SharedBrandingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SharedBrandingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: SharedBrandingModule, imports: [i1$1.RouterModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: SharedBrandingModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SharedBrandingModule, providers: [
             // providerType: HookProviderTypes.ExistingProvider is used to ensure that the hook is only applied once even if the module is imported multiple times
             hookNavigator(SupportsBrandingService, { providerType: HookProviderTypes.ExistingProvider }),
-            hookTab(BrandingTabFactory)
-        ], imports: [RouterModule.forChild(BRANDING_ROUTING)] }); }
+            hookTab(BrandingTabFactory),
+            hookTab(BrandingVariantsAndAssetsTabFactory),
+            hookRoute(BRANDING_ROUTING)
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SharedBrandingModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [RouterModule.forChild(BRANDING_ROUTING)],
+                    imports: [],
                     providers: [
                         // providerType: HookProviderTypes.ExistingProvider is used to ensure that the hook is only applied once even if the module is imported multiple times
                         hookNavigator(SupportsBrandingService, { providerType: HookProviderTypes.ExistingProvider }),
-                        hookTab(BrandingTabFactory)
+                        hookTab(BrandingTabFactory),
+                        hookTab(BrandingVariantsAndAssetsTabFactory),
+                        hookRoute(BRANDING_ROUTING)
                     ]
                 }]
         }] });
@@ -196,5 +254,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BRANDING_EDIT_CHILD_ROUTES, BRANDING_ROUTING, BrandingTabFactory, SharedBrandingModule, genericTabName, lightThemeTabName };
+export { BRANDING_EDIT_CHILD_ROUTES, BRANDING_ROUTING, BrandingTabFactory, BrandingVariantsAndAssetsTabFactory, SharedBrandingModule, genericTabName, lightThemeTabName };
 //# sourceMappingURL=c8y-ngx-components-branding-shared.mjs.map

package/fesm2022/c8y-ngx-components-branding-shared.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"c8y-ngx-components-branding-shared.mjs","sources":["../../branding/shared/supports-branding.service.ts","../../branding/shared/branding-tab.factory.ts","../../branding/shared/shared-branding.module.ts","../../branding/shared/c8y-ngx-components-branding-shared.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { CanActivate, UrlTree } from '@angular/router';\nimport { AppStateService, ExtensionFactory, NavigatorNode } from '@c8y/ngx-components';\nimport { Observable } from 'rxjs';\nimport { map, shareReplay } from 'rxjs/operators';\n\n@Injectable({ providedIn: 'root' })\nexport class SupportsBrandingService implements CanActivate, ExtensionFactory<NavigatorNode> {\n  private supportsBranding$: Observable<boolean>;\n  private node: NavigatorNode;\n  constructor(private appState: AppStateService) {\n    this.supportsBranding$ = this.appState.currentAppsOfUser.pipe(\n      map(apps => {\n        const brandingFeatureApp = apps.find(\n          app => app.name === 'feature-branding' && app.owner?.tenant?.id === 'management'\n        );\n        return !!brandingFeatureApp;\n      }),\n      shareReplay(1)\n    );\n    this.node = new NavigatorNode({\n      featureId: 'branding-editor',\n      label: 'Branding',\n      path: 'branding-editor',\n      icon: 'palette',\n      parent: 'Settings',\n      routerLinkExact: false\n    });\n  }\n\n  get(): Observable<NavigatorNode | NavigatorNode[]> {\n    return this.supportsBranding$.pipe(\n      map(supported => {\n        if (supported) {\n          return this.node;\n        }\n        return [];\n      })\n    );\n  }\n\n  canActivate(): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n    return this.supportsBranding$;\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { ExtensionFactory, Tab, gettext } from '@c8y/ngx-components';\nimport { Observable, merge, of } from 'rxjs';\nimport { distinctUntilChanged, map, filter, switchMap } from 'rxjs/operators';\n\nexport const lightThemeTabName = gettext('Light theme');\nexport const genericTabName = gettext('Generic');\n\n@Injectable({ providedIn: 'root' })\nexport class BrandingTabFactory implements ExtensionFactory<Tab> {\n  get(activatedRoute?: ActivatedRoute): Observable<Tab | Tab[]> {\n    const routes = activatedRoute.pathFromRoot.map(route => route.url);\n    return this.shouldShowTab$().pipe(\n      distinctUntilChanged(),\n      switchMap(value => {\n        if (!value) {\n          return of([]);\n        }\n        return merge(...routes).pipe(\n          filter(urlSegments =>\n            urlSegments.some(urlSegment => urlSegment.path === 'branding-editor')\n          ),\n          switchMap(() => this.shouldShowTab$()),\n          filter(shouldShow => !!shouldShow),\n          switchMap(() =>\n            activatedRoute.parent?.params.pipe(\n              map(params => params.name),\n              distinctUntilChanged(),\n              filter(name => !!name),\n              map(name => this.getTabsForVersion(name))\n            )\n          )\n        );\n      })\n    );\n  }\n\n  protected shouldShowTab$(): Observable<boolean> {\n    return of(true);\n  }\n\n  protected getPathForBranding<T extends string>(brandingName: string, subPath: T) {\n    return `branding-editor/${brandingName}/edit/${subPath}` as const;\n  }\n\n  protected getTabsForVersion(name: string): Tab[] {\n    return [\n      {\n        path: this.getPathForBranding(name, 'generic'),\n        label: genericTabName,\n        icon: 'palette',\n        priority: 600\n      },\n      {\n        path: this.getPathForBranding(name, 'light'),\n        label: lightThemeTabName,\n        icon: 'sun',\n        priority: 500\n      }\n    ];\n  }\n}\n","import { NgModule, inject } from '@angular/core';\nimport {\n  RouterModule,\n  Route,\n  RouterStateSnapshot,\n  ActivatedRouteSnapshot,\n  ResolveFn,\n  Routes\n} from '@angular/router';\nimport { SupportsBrandingService } from './supports-branding.service';\nimport { AppStateService, hookNavigator, HookProviderTypes, hookTab } from '@c8y/ngx-components';\nimport { BrandingTabFactory, lightThemeTabName, genericTabName } from './branding-tab.factory';\nimport {\n  BrandingFileDetails,\n  BrandingOptionsJson,\n  StoreBrandingService\n} from '@c8y/ngx-components/branding/shared/data';\n\nexport const BRANDING_EDIT_CHILD_ROUTES: Route[] = [\n  {\n    path: '',\n    pathMatch: 'full',\n    redirectTo: 'generic'\n  },\n  {\n    path: 'generic',\n    loadComponent: () =>\n      import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingFormComponent),\n    data: {\n      tabName: genericTabName\n    }\n  },\n  {\n    path: 'light',\n    loadComponent: () =>\n      import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingThemeFormComponent),\n    data: {\n      tabName: lightThemeTabName\n    }\n  }\n];\n\nexport const BRANDING_ROUTING: Routes = [\n  {\n    path: 'branding-editor',\n    canActivate: [SupportsBrandingService],\n    children: [\n      {\n        path: '',\n        pathMatch: 'full',\n        loadComponent: () =>\n          import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingComponent)\n      },\n      {\n        path: ':name',\n        resolve: {\n          branding: ((route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {\n            return inject(StoreBrandingService).getBrandingOptionsForVersion(route.params.name);\n          }) as ResolveFn<BrandingFileDetails[]>,\n          tags: (async (route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {\n            const store = inject(StoreBrandingService);\n            const { variants } = await store.loadBrandingVariants();\n            return variants.find(v => v?.tags?.includes(route.params.name))?.tags;\n          }) as ResolveFn<string[]>,\n          fallbackBranding: (async (\n            _route: ActivatedRouteSnapshot,\n            _state: RouterStateSnapshot\n          ) => {\n            try {\n              const store = inject(StoreBrandingService);\n              const appState = inject(AppStateService);\n              // management tenant should be free to change what every they want, so we do not provide a fallback branding\n              if (appState.currentTenant.value?.name === 'management') {\n                return {};\n              }\n              const fallbackBranding = await store.getBrandingOptionsForVersion('fallback');\n              return fallbackBranding;\n            } catch (e) {\n              return {};\n            }\n          }) as ResolveFn<BrandingOptionsJson>\n        },\n        children: [\n          {\n            path: '',\n            pathMatch: 'full',\n            redirectTo: 'edit'\n          },\n          {\n            path: 'edit',\n            loadComponent: () =>\n              import('@c8y/ngx-components/branding/shared/lazy').then(\n                m => m.EditBrandingRouterOutletComponent\n              ),\n            children: BRANDING_EDIT_CHILD_ROUTES\n          }\n        ]\n      }\n    ]\n  },\n  // Redirects for legacy paths from old angularJS implementation\n  // allows to keep old links working and to use the old branding manager (as long as we still ship it) when the new plugins are removed from admin app\n  {\n    path: 'enterprise/branding',\n    pathMatch: 'full',\n    redirectTo: 'branding-editor'\n  },\n  {\n    path: 'branding',\n    pathMatch: 'full',\n    redirectTo: 'branding-editor'\n  }\n];\n\n@NgModule({\n  imports: [RouterModule.forChild(BRANDING_ROUTING)],\n  providers: [\n    // providerType: HookProviderTypes.ExistingProvider is used to ensure that the hook is only applied once even if the module is imported multiple times\n    hookNavigator(SupportsBrandingService, { providerType: HookProviderTypes.ExistingProvider }),\n    hookTab(BrandingTabFactory)\n  ]\n})\nexport class SharedBrandingModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"c8y-ngx-components-branding-shared.mjs","sources":["../../branding/shared/supports-branding.service.ts","../../branding/shared/branding-tab.factory.ts","../../branding/shared/shared-branding.module.ts","../../branding/shared/c8y-ngx-components-branding-shared.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { CanActivate, UrlTree } from '@angular/router';\nimport { AppStateService, ExtensionFactory, NavigatorNode } from '@c8y/ngx-components';\nimport { Observable } from 'rxjs';\nimport { map, shareReplay } from 'rxjs/operators';\n\n@Injectable({ providedIn: 'root' })\nexport class SupportsBrandingService implements CanActivate, ExtensionFactory<NavigatorNode> {\n  private supportsBranding$: Observable<boolean>;\n  private node: NavigatorNode;\n  constructor(private appState: AppStateService) {\n    this.supportsBranding$ = this.appState.currentAppsOfUser.pipe(\n      map(apps => {\n        const brandingFeatureApp = apps.find(\n          app => app.name === 'feature-branding' && app.owner?.tenant?.id === 'management'\n        );\n        return !!brandingFeatureApp;\n      }),\n      shareReplay(1)\n    );\n    this.node = new NavigatorNode({\n      featureId: 'branding-editor',\n      label: 'Branding',\n      path: 'branding-editor',\n      icon: 'palette',\n      parent: 'Settings',\n      routerLinkExact: false\n    });\n  }\n\n  get(): Observable<NavigatorNode | NavigatorNode[]> {\n    return this.supportsBranding$.pipe(\n      map(supported => {\n        if (supported) {\n          return this.node;\n        }\n        return [];\n      })\n    );\n  }\n\n  canActivate(): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {\n    return this.supportsBranding$;\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\nimport { ExtensionFactory, Tab } from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { Observable, merge, of } from 'rxjs';\nimport { distinctUntilChanged, map, filter, switchMap } from 'rxjs/operators';\n\nexport const lightThemeTabName = gettext('Light theme');\nexport const genericTabName = gettext('Generic');\n\n@Injectable({ providedIn: 'root' })\nexport class BrandingTabFactory implements ExtensionFactory<Tab> {\n  get(activatedRoute?: ActivatedRoute): Observable<Tab | Tab[]> {\n    const routes = activatedRoute.pathFromRoot.map(route => route.url);\n    return this.shouldShowTab$().pipe(\n      distinctUntilChanged(),\n      switchMap(value => {\n        if (!value) {\n          return of([]);\n        }\n        return merge(...routes).pipe(\n          filter(urlSegments =>\n            urlSegments.some(urlSegment => urlSegment.path === 'branding-editor')\n          ),\n          switchMap(() => this.shouldShowTab$()),\n          filter(shouldShow => !!shouldShow),\n          switchMap(() =>\n            activatedRoute.parent?.params.pipe(\n              map(params => params.name),\n              distinctUntilChanged(),\n              filter(name => !!name),\n              map(name => this.getTabsForVersion(name))\n            )\n          )\n        );\n      })\n    );\n  }\n\n  protected shouldShowTab$(): Observable<boolean> {\n    return of(true);\n  }\n\n  protected getPathForBranding<T extends string>(brandingName: string, subPath: T) {\n    return `branding-editor/variants/${brandingName}/edit/${subPath}` as const;\n  }\n\n  protected getTabsForVersion(name: string): Tab[] {\n    return [\n      {\n        path: this.getPathForBranding(name, 'generic'),\n        label: genericTabName,\n        icon: 'palette',\n        priority: 600\n      },\n      {\n        path: this.getPathForBranding(name, 'light'),\n        label: lightThemeTabName,\n        icon: 'sun',\n        priority: 500\n      }\n    ];\n  }\n}\n","import { Injectable, NgModule, inject } from '@angular/core';\nimport { RouterStateSnapshot, ActivatedRouteSnapshot, ResolveFn, Router } from '@angular/router';\nimport { SupportsBrandingService } from './supports-branding.service';\nimport {\n  AppStateService,\n  ExtensionFactory,\n  hookNavigator,\n  HookProviderTypes,\n  hookRoute,\n  hookTab,\n  Route,\n  Tab\n} from '@c8y/ngx-components';\nimport { gettext } from '@c8y/ngx-components/gettext';\nimport { BrandingTabFactory, lightThemeTabName, genericTabName } from './branding-tab.factory';\nimport {\n  BrandingFileDetails,\n  BrandingOptionsJson,\n  StoreBrandingService\n} from '@c8y/ngx-components/branding/shared/data';\n\nexport const BRANDING_EDIT_CHILD_ROUTES: Route[] = [\n  {\n    path: '',\n    pathMatch: 'full',\n    redirectTo: 'generic'\n  },\n  {\n    path: 'generic',\n    loadComponent: () =>\n      import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingFormComponent),\n    data: {\n      tabName: genericTabName\n    }\n  },\n  {\n    path: 'light',\n    loadComponent: () =>\n      import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingThemeFormComponent),\n    data: {\n      tabName: lightThemeTabName\n    }\n  }\n];\n\nexport const BRANDING_ROUTING: Route[] = [\n  {\n    path: 'branding-editor',\n    canActivate: [SupportsBrandingService],\n    children: [\n      {\n        path: '',\n        pathMatch: 'full',\n        redirectTo: 'variants'\n      },\n      {\n        path: 'variants',\n        children: [\n          {\n            path: '',\n            pathMatch: 'full',\n            loadComponent: () =>\n              import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingComponent)\n          },\n          {\n            path: ':name',\n            resolve: {\n              branding: ((route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {\n                return inject(StoreBrandingService).getBrandingOptionsForVersion(route.params.name);\n              }) as ResolveFn<BrandingFileDetails[]>,\n              tags: (async (route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {\n                const store = inject(StoreBrandingService);\n                const { variants } = await store.loadBrandingVariants();\n                return variants.find(v => v?.tags?.includes(route.params.name))?.tags;\n              }) as ResolveFn<string[]>,\n              fallbackBranding: (async (\n                _route: ActivatedRouteSnapshot,\n                _state: RouterStateSnapshot\n              ) => {\n                try {\n                  const store = inject(StoreBrandingService);\n                  const appState = inject(AppStateService);\n                  // management tenant should be free to change what every they want, so we do not provide a fallback branding\n                  if (appState.currentTenant.value?.name === 'management') {\n                    return {};\n                  }\n                  const fallbackBranding = await store.getBrandingOptionsForVersion('fallback');\n                  return fallbackBranding;\n                } catch (e) {\n                  return {};\n                }\n              }) as ResolveFn<BrandingOptionsJson>\n            },\n            children: [\n              {\n                path: '',\n                pathMatch: 'full',\n                redirectTo: 'edit'\n              },\n              {\n                path: 'edit',\n                loadComponent: () =>\n                  import('@c8y/ngx-components/branding/shared/lazy').then(\n                    m => m.EditBrandingRouterOutletComponent\n                  ),\n                children: BRANDING_EDIT_CHILD_ROUTES\n              }\n            ]\n          }\n        ]\n      },\n      {\n        path: 'assets',\n        loadComponent: () =>\n          import('@c8y/ngx-components/branding/shared/lazy').then(m => m.BrandingAssetsComponent)\n      },\n      // Redirect old paths (like \"/branding-editor/default\" to \"/branding-editor/variants/default\")\n      {\n        path: '**',\n        redirectTo: redirectData => {\n          const { url } = redirectData;\n          const urlToAppend = url.map(segment => segment.path).join('/');\n          return `/branding-editor/variants/${urlToAppend}`;\n        }\n      }\n    ]\n  },\n  // Redirects for legacy paths from old angularJS implementation\n  // allows to keep old links working and to use the old branding manager (as long as we still ship it) when the new plugins are removed from admin app\n  {\n    path: 'enterprise/branding',\n    pathMatch: 'full',\n    redirectTo: 'branding-editor'\n  },\n  {\n    path: 'branding',\n    pathMatch: 'full',\n    redirectTo: 'branding-editor'\n  }\n];\n\n@Injectable({ providedIn: 'root' })\nexport class BrandingVariantsAndAssetsTabFactory implements ExtensionFactory<Tab> {\n  tabs: Tab[] = [\n    {\n      path: '/branding-editor/variants',\n      label: gettext('Variants'),\n      icon: 'folder',\n      priority: 500\n    },\n    {\n      path: '/branding-editor/assets',\n      label: gettext('Branding assets'),\n      icon: 'file',\n      priority: 100\n    }\n  ];\n  constructor(private router: Router) {}\n  get(): Tab[] {\n    if (this.tabs.map(tab => tab.path).includes(this.router.url)) {\n      return this.tabs;\n    }\n    return [];\n  }\n}\n\n@NgModule({\n  imports: [],\n  providers: [\n    // providerType: HookProviderTypes.ExistingProvider is used to ensure that the hook is only applied once even if the module is imported multiple times\n    hookNavigator(SupportsBrandingService, { providerType: HookProviderTypes.ExistingProvider }),\n    hookTab(BrandingTabFactory),\n    hookTab(BrandingVariantsAndAssetsTabFactory),\n    hookRoute(BRANDING_ROUTING)\n  ]\n})\nexport class SharedBrandingModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/c8y-ngx-components-static-assets-modal.mjs

@@ -1,53 +1,155 @@
 import * as i0 from '@angular/core';
-import { Input, Component } from '@angular/core';
-import * as i1 from 'ngx-bootstrap/modal';
-import { Subject, merge, from } from 'rxjs';
-import * as i2 from '@c8y/ngx-components/static-assets/data';
-import { shareReplay, map, tap, first } from 'rxjs/operators';
-import { NgFor, NgIf, AsyncPipe, DatePipe } from '@angular/common';
-import * as i3 from '@c8y/ngx-components';
-import { gettext, CoreModule } from '@c8y/ngx-components';
-import * as i4 from 'ngx-bootstrap/popover';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import * as i5 from 'ngx-bootstrap/collapse';
+import { Pipe, output, input, viewChild, inject, Component, Input } from '@angular/core';
+import * as i1$1 from 'ngx-bootstrap/modal';
+import { DropAreaComponent, AlertService, DatePipe, BytesPipe, LoadingComponent, C8yTranslatePipe, C8yTranslateDirective, MessagesComponent, ListGroupComponent, ListItemComponent, ListItemIconComponent, ListItemBodyComponent, IconDirective, ModalComponent } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { NgForOf, NgIf, AsyncPipe, NgStyle, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import * as i1 from 'ngx-bootstrap/collapse';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
+import { Subject, merge, combineLatest, firstValueFrom } from 'rxjs';
+import { switchMap, shareReplay, map, tap, first } from 'rxjs/operators';
+import { StaticAssetsService } from '@c8y/ngx-components/static-assets/data';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslateService } from '@ngx-translate/core';
 
-class StaticAssetsModalComponent {
-    constructor(modalRef, staticAssets) {
-        this.modalRef = modalRef;
-        this.staticAssets = staticAssets;
-        this.assetType = 'branding';
-        this.supportedFileExtensions = [];
-        this.modalTitle = gettext('Select asset');
-        this.layout = 'grid';
-        this.accept = '';
+class StaticAssetMainTypePipe {
+    constructor() {
+        this.supportedTypes = ['image', 'font'];
+    }
+    transform(value) {
+        if (!value?.type) {
+            return 'unknown';
+        }
+        const typePrefix = value.type.replace(/\/.*$/, '');
+        if (this.supportedTypes.includes(typePrefix)) {
+            return typePrefix;
+        }
+        return 'unknown';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetMainTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetMainTypePipe, isStandalone: true, name: "staticAssetMainType" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetMainTypePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'staticAssetMainType',
+                    pure: true,
+                    standalone: true
+                }]
+        }] });
+
+class StaticAssetsFileListComponent {
+    constructor() {
+        this.itemSelected = output();
+        this.inModalView = input(false);
+        this.assetType = input('branding');
+        this.supportedFileExtensions = input([]);
+        this.layout = input('grid');
         this.isExpanded = false;
         this._filesUpdate$ = new Subject();
-        this.result = new Promise((resolve, reject) => {
-            this.resolve = resolve;
-            this.reject = reject;
-        });
-    }
-    ngOnInit() {
-        this._unfilteredFiles$ = merge(this._filesUpdate$, from(this.staticAssets.listFiles(this.assetType))).pipe(shareReplay(1));
-        this.files$ = this._unfilteredFiles$.pipe(map(files => this.supportedFileExtensions
-            ? files.filter(tmp => this.supportedFileExtensions.includes(tmp.extension.toLowerCase()))
+        this.styleTagId = `static-assets-font-faces`;
+        this.dropArea = viewChild(DropAreaComponent);
+        this.alert = inject(AlertService);
+        this.translate = inject(TranslateService);
+        this.staticAssets = inject(StaticAssetsService);
+        this._unfilteredFiles$ = merge(toObservable(this.assetType).pipe(switchMap(assetType => this.staticAssets.listFiles(assetType))), this._filesUpdate$).pipe(shareReplay({ bufferSize: 1, refCount: true }));
+        this.files$ = combineLatest([
+            this._unfilteredFiles$,
+            toObservable(this.supportedFileExtensions)
+        ]).pipe(map(([files, supportedFileExtensions]) => supportedFileExtensions?.length
+            ? files.filter(tmp => supportedFileExtensions.includes(tmp.extension.toLowerCase()))
             : files), map(files => files.sort((a, b) => (a.addedAt < b.addedAt ? 1 : a.addedAt > b.addedAt ? -1 : 0))), tap(files => {
             if (!files.length) {
                 this.isExpanded = true;
             }
-        }));
-        if (this.supportedFileExtensions) {
-            this.accept = this.supportedFileExtensions.join(',');
-        }
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+        this.accept$ = toObservable(this.supportedFileExtensions).pipe(map(exts => exts.join(',')));
+        this.files$.pipe(takeUntilDestroyed()).subscribe(files => this.applyStylesForFiles(files));
+    }
+    ngOnDestroy() {
+        this.removeStyleTag();
     }
     async addFiles(files) {
         if (!files?.length) {
             return;
         }
-        const existingFiles = await this._unfilteredFiles$.pipe(first()).toPromise();
-        const newFiles = await this.staticAssets.addFilesToStaticAssets(this.assetType, files, existingFiles);
-        this._filesUpdate$.next(newFiles);
+        this.dropArea().loading = true;
+        try {
+            const existingFiles = await firstValueFrom(this._unfilteredFiles$.pipe(first()));
+            const updatedFiles = await this.staticAssets.addFilesToStaticAssets(this.assetType(), files, existingFiles);
+            this._filesUpdate$.next(updatedFiles);
+        }
+        catch (e) {
+            this.alert.danger(this.translate.instant(gettext('Failed to upload asset.')), e?.message);
+        }
+        this.dropArea().files = null;
+        this.dropArea().loading = false;
+    }
+    select(asset) {
+        this.itemSelected.emit(asset);
+    }
+    applyStylesForFiles(files) {
+        this.removeStyleTag();
+        const styles = files
+            .filter(file => file.type.startsWith('font/'))
+            .map(file => `@font-face { font-family: '${file.hashSum}'; src: url('${file.path}'); }`)
+            .join('\n');
+        if (!styles) {
+            return;
+        }
+        const styleTag = document.createElement('style');
+        styleTag.id = this.styleTagId;
+        styleTag.innerHTML = styles;
+        styleTag.type = 'text/css';
+        document.body.appendChild(styleTag);
+    }
+    removeStyleTag() {
+        document.getElementById(this.styleTagId)?.remove();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetsFileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: StaticAssetsFileListComponent, isStandalone: true, selector: "c8y-static-assets-file-list", inputs: { inModalView: { classPropertyName: "inModalView", publicName: "inModalView", isSignal: true, isRequired: false, transformFunction: null }, assetType: { classPropertyName: "assetType", publicName: "assetType", isSignal: true, isRequired: false, transformFunction: null }, supportedFileExtensions: { classPropertyName: "supportedFileExtensions", publicName: "supportedFileExtensions", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, viewQueries: [{ propertyName: "dropArea", first: true, predicate: DropAreaComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *ngIf=\"files$ | async as assets; else loading\">\n  <div\n    class=\"text-center sticky-top separator-bottom bg-component\"\n    style=\"z-index: 1001\"\n  >\n    <p\n      class=\"m-0 p-16\"\n      *ngIf=\"assets.length\"\n    >\n      {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n      <button\n        class=\"btn-link\"\n        aria-controls=\"collapseUpload\"\n        [attr.aria-expanded]=\"isExpanded\"\n        (click)=\"isExpanded = !isExpanded\"\n      >\n        {{ 'upload a new asset' | translate }}\n      </button>\n    </p>\n    <div\n      class=\"collapse\"\n      id=\"collapseUpload\"\n      [isAnimated]=\"true\"\n      [collapse]=\"!isExpanded\"\n    >\n      <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n        <c8y-drop-area\n          class=\"drop-area-sm m-b-8\"\n          [icon]=\"'upload'\"\n          [accept]=\"accept$ | async\"\n          (dropped)=\"addFiles($event)\"\n        ></c8y-drop-area>\n        <c8y-messages\n          [helpMessage]=\"\n            'After uploading, the asset will be visible in the list below.' | translate\n          \"\n        ></c8y-messages>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"assets.length\">\n    <c8y-list-group\n      class=\"m-b-0\"\n      *ngIf=\"layout() != 'grid'\"\n    >\n      <c8y-list-item *ngFor=\"let asset of assets\">\n        <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n        <c8y-list-item-body>\n          <div class=\"row\">\n            <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ asset.fileName }}\"\n              >\n                {{ asset.fileName }}\n              </div>\n              <button\n                class=\"btn-dot m-l-4\"\n                [title]=\"'Preview' | translate\"\n                [popover]=\"preview\"\n                placement=\"end\"\n                triggers=\"focus\"\n                container=\"body\"\n                [adaptivePosition]=\"false\"\n              >\n                <i [c8yIcon]=\"'eye'\"></i>\n              </button>\n              <ng-template #preview>\n                <div class=\"bg-checkered\">\n                  <img\n                    class=\"fit-w\"\n                    [alt]=\"asset.fileName\"\n                    [src]=\"asset.path\"\n                  />\n                </div>\n              </ng-template>\n            </div>\n            <div class=\"col-md-3 col-xs-12 text-muted\">\n              <code class=\"text-10\">{{ asset.type }}</code>\n            </div>\n            <div class=\"col-md-2 col-xs-12 text-muted\">\n              <span class=\"small\">{{ asset.size | bytes }}</span>\n            </div>\n            <div\n              class=\"col-md-2 col-xs-12 text-muted\"\n              [title]=\"asset.addedAt | c8yDate\"\n            >\n              <div class=\"icon-flex small\">\n                <i\n                  class=\"m-r-4\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n                <span>{{ asset.addedAt | c8yDate }}</span>\n              </div>\n            </div>\n            <div class=\"col-md-2 col-xs-12 d-flex\">\n              <button\n                class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n                (click)=\"select(asset)\"\n                translate\n              >\n                Select\n              </button>\n            </div>\n          </div>\n        </c8y-list-item-body>\n      </c8y-list-item>\n    </c8y-list-group>\n    <div\n      class=\"card-group-block interact-grid\"\n      *ngIf=\"layout() === 'grid'\"\n    >\n      <button\n        class=\"card btn-clean interact pointer\"\n        [ngClass]=\"{\n          'col-md-3 col-sm-4 col-xs-12': inModalView(),\n          'col-md-1 col-sm-3 col-xs-12': !inModalView()\n        }\"\n        *ngFor=\"let asset of assets\"\n        (click)=\"select(asset)\"\n      >\n        <div class=\"card-block\">\n          <ng-container [ngSwitch]=\"asset | staticAssetMainType\">\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchCase=\"'image'\"\n            >\n              <img\n                class=\"img-responsive m-auto img-square\"\n                [alt]=\"asset.fileName\"\n                [src]=\"asset.path\"\n              />\n            </div>\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchCase=\"'font'\"\n            >\n              <div\n                class=\"img-responsive m-auto img-square\"\n                [ngStyle]=\"{ 'font-family': asset.hashSum }\"\n              >\n                <p class=\"fit-h text-balance text-truncate-wrap\">\n                  <!-- intentionally not translated -->\n                  The quick brown fox jumps over the lazy dog.\n                </p>\n              </div>\n            </div>\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchDefault\n            >\n              <div class=\"img-responsive m-auto img-square d-flex a-i-center j-c-center\">\n                <i\n                  class=\"icon-2x\"\n                  [c8yIcon]=\"'file'\"\n                ></i>\n              </div>\n            </div>\n          </ng-container>\n          <p\n            class=\"text-medium text-truncate-wrap m-t-8\"\n            [title]=\"asset.fileName\"\n          >\n            <a\n              [href]=\"asset.path\"\n              download\n              (click)=\"$event.stopPropagation()\"\n            >\n              <i [c8yIcon]=\"'download'\"></i>\n              {{ asset.fileName }}\n            </a>\n          </p>\n          <p class=\"m-b-4\">\n            <code class=\"text-10\">{{ asset.type }}</code>\n          </p>\n          <p class=\"small text-muted d-flex flex-wrap a-i-center\">\n            {{ asset.size | bytes }}\n            <span class=\"m-l-auto\">\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"'calendar'\"\n              ></i>\n              <span>{{ asset.addedAt | c8yDate }}</span>\n            </span>\n          </p>\n        </div>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"p-24\">\n    <c8y-loading></c8y-loading>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }, { kind: "pipe", type: BytesPipe, name: "bytes" }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i1.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: StaticAssetMainTypePipe, name: "staticAssetMainType" }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetsFileListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-static-assets-file-list', standalone: true, imports: [
+                        NgForOf,
+                        NgIf,
+                        AsyncPipe,
+                        DatePipe,
+                        BytesPipe,
+                        LoadingComponent,
+                        DropAreaComponent,
+                        C8yTranslatePipe,
+                        C8yTranslateDirective,
+                        MessagesComponent,
+                        ListGroupComponent,
+                        ListItemComponent,
+                        ListItemIconComponent,
+                        ListItemBodyComponent,
+                        PopoverDirective,
+                        CollapseModule,
+                        NgStyle,
+                        NgClass,
+                        IconDirective,
+                        StaticAssetMainTypePipe,
+                        NgSwitch,
+                        NgSwitchCase,
+                        NgSwitchDefault
+                    ], template: "<ng-container *ngIf=\"files$ | async as assets; else loading\">\n  <div\n    class=\"text-center sticky-top separator-bottom bg-component\"\n    style=\"z-index: 1001\"\n  >\n    <p\n      class=\"m-0 p-16\"\n      *ngIf=\"assets.length\"\n    >\n      {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n      <button\n        class=\"btn-link\"\n        aria-controls=\"collapseUpload\"\n        [attr.aria-expanded]=\"isExpanded\"\n        (click)=\"isExpanded = !isExpanded\"\n      >\n        {{ 'upload a new asset' | translate }}\n      </button>\n    </p>\n    <div\n      class=\"collapse\"\n      id=\"collapseUpload\"\n      [isAnimated]=\"true\"\n      [collapse]=\"!isExpanded\"\n    >\n      <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n        <c8y-drop-area\n          class=\"drop-area-sm m-b-8\"\n          [icon]=\"'upload'\"\n          [accept]=\"accept$ | async\"\n          (dropped)=\"addFiles($event)\"\n        ></c8y-drop-area>\n        <c8y-messages\n          [helpMessage]=\"\n            'After uploading, the asset will be visible in the list below.' | translate\n          \"\n        ></c8y-messages>\n      </div>\n    </div>\n  </div>\n  <div *ngIf=\"assets.length\">\n    <c8y-list-group\n      class=\"m-b-0\"\n      *ngIf=\"layout() != 'grid'\"\n    >\n      <c8y-list-item *ngFor=\"let asset of assets\">\n        <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n        <c8y-list-item-body>\n          <div class=\"row\">\n            <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n              <div\n                class=\"text-truncate\"\n                title=\"{{ asset.fileName }}\"\n              >\n                {{ asset.fileName }}\n              </div>\n              <button\n                class=\"btn-dot m-l-4\"\n                [title]=\"'Preview' | translate\"\n                [popover]=\"preview\"\n                placement=\"end\"\n                triggers=\"focus\"\n                container=\"body\"\n                [adaptivePosition]=\"false\"\n              >\n                <i [c8yIcon]=\"'eye'\"></i>\n              </button>\n              <ng-template #preview>\n                <div class=\"bg-checkered\">\n                  <img\n                    class=\"fit-w\"\n                    [alt]=\"asset.fileName\"\n                    [src]=\"asset.path\"\n                  />\n                </div>\n              </ng-template>\n            </div>\n            <div class=\"col-md-3 col-xs-12 text-muted\">\n              <code class=\"text-10\">{{ asset.type }}</code>\n            </div>\n            <div class=\"col-md-2 col-xs-12 text-muted\">\n              <span class=\"small\">{{ asset.size | bytes }}</span>\n            </div>\n            <div\n              class=\"col-md-2 col-xs-12 text-muted\"\n              [title]=\"asset.addedAt | c8yDate\"\n            >\n              <div class=\"icon-flex small\">\n                <i\n                  class=\"m-r-4\"\n                  [c8yIcon]=\"'calendar'\"\n                ></i>\n                <span>{{ asset.addedAt | c8yDate }}</span>\n              </div>\n            </div>\n            <div class=\"col-md-2 col-xs-12 d-flex\">\n              <button\n                class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n                (click)=\"select(asset)\"\n                translate\n              >\n                Select\n              </button>\n            </div>\n          </div>\n        </c8y-list-item-body>\n      </c8y-list-item>\n    </c8y-list-group>\n    <div\n      class=\"card-group-block interact-grid\"\n      *ngIf=\"layout() === 'grid'\"\n    >\n      <button\n        class=\"card btn-clean interact pointer\"\n        [ngClass]=\"{\n          'col-md-3 col-sm-4 col-xs-12': inModalView(),\n          'col-md-1 col-sm-3 col-xs-12': !inModalView()\n        }\"\n        *ngFor=\"let asset of assets\"\n        (click)=\"select(asset)\"\n      >\n        <div class=\"card-block\">\n          <ng-container [ngSwitch]=\"asset | staticAssetMainType\">\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchCase=\"'image'\"\n            >\n              <img\n                class=\"img-responsive m-auto img-square\"\n                [alt]=\"asset.fileName\"\n                [src]=\"asset.path\"\n              />\n            </div>\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchCase=\"'font'\"\n            >\n              <div\n                class=\"img-responsive m-auto img-square\"\n                [ngStyle]=\"{ 'font-family': asset.hashSum }\"\n              >\n                <p class=\"fit-h text-balance text-truncate-wrap\">\n                  <!-- intentionally not translated -->\n                  The quick brown fox jumps over the lazy dog.\n                </p>\n              </div>\n            </div>\n            <div\n              class=\"bg-checkered\"\n              *ngSwitchDefault\n            >\n              <div class=\"img-responsive m-auto img-square d-flex a-i-center j-c-center\">\n                <i\n                  class=\"icon-2x\"\n                  [c8yIcon]=\"'file'\"\n                ></i>\n              </div>\n            </div>\n          </ng-container>\n          <p\n            class=\"text-medium text-truncate-wrap m-t-8\"\n            [title]=\"asset.fileName\"\n          >\n            <a\n              [href]=\"asset.path\"\n              download\n              (click)=\"$event.stopPropagation()\"\n            >\n              <i [c8yIcon]=\"'download'\"></i>\n              {{ asset.fileName }}\n            </a>\n          </p>\n          <p class=\"m-b-4\">\n            <code class=\"text-10\">{{ asset.type }}</code>\n          </p>\n          <p class=\"small text-muted d-flex flex-wrap a-i-center\">\n            {{ asset.size | bytes }}\n            <span class=\"m-l-auto\">\n              <i\n                class=\"m-r-4\"\n                [c8yIcon]=\"'calendar'\"\n              ></i>\n              <span>{{ asset.addedAt | c8yDate }}</span>\n            </span>\n          </p>\n        </div>\n      </button>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #loading>\n  <div class=\"p-24\">\n    <c8y-loading></c8y-loading>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
+class StaticAssetsModalComponent {
+    constructor(modalRef) {
+        this.modalRef = modalRef;
+        this.assetType = 'branding';
+        this.supportedFileExtensions = [];
+        this.modalTitle = gettext('Select asset');
+        this.layout = 'grid';
+        this.result = new Promise((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+        });
     }
     select(asset) {
         this.modalRef.hide();
@@ -57,13 +159,13 @@ class StaticAssetsModalComponent {
         this.modalRef.hide();
         this.reject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetsModalComponent, deps: [{ token: i1.BsModalRef }, { token: i2.StaticAssetsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StaticAssetsModalComponent, isStandalone: true, selector: "c8y-static-assets-modal", inputs: { assetType: "assetType", supportedFileExtensions: "supportedFileExtensions", modalTitle: "modalTitle", layout: "layout" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onDismiss)=\"cancel()\"\n  [headerClasses]=\"'dialog-header'\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'select-all'\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"files$ | async as assets; else loading\">\n    <div class=\"text-center sticky-top separator-bottom bg-component\" style=\"z-index: 1001;\">\n      <p *ngIf=\"assets.length\" class=\"m-0 p-16\">\n        {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n        <button\n          class=\"btn-link\"\n          aria-controls=\"collapseUpload\"\n          [attr.aria-expanded]=\"isExpanded\"\n          (click)=\"isExpanded = !isExpanded\"\n        >\n          {{ 'upload a new asset' | translate }}\n        </button>\n      </p>\n      <div\n        class=\"collapse\"\n        id=\"collapseUpload\"\n        [isAnimated]=\"true\"\n        [collapse]=\"!isExpanded\"\n      >\n        <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n          <c8y-drop-area\n            class=\"drop-area-sm m-b-8\"\n            [icon]=\"'upload'\"\n            [accept]=\"accept\"\n            (dropped)=\"addFiles($event)\"\n          ></c8y-drop-area>\n          <c8y-messages\n            [helpMessage]=\"\n              'After uploading, the asset will be visible in the list below.' | translate\n            \"\n          ></c8y-messages>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"assets.length\">\n      <c8y-list-group\n        class=\"m-b-0\"\n        *ngIf=\"layout != 'grid'\"\n      >\n        <c8y-list-item *ngFor=\"let asset of assets\">\n          <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n          <c8y-list-item-body>\n            <div class=\"row\">\n              <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{ asset.fileName }}\"\n                >\n                  {{ asset.fileName }}\n                </div>\n                <button\n                  class=\"btn-dot m-l-4\"\n                  [title]=\"'Preview' | translate\"\n                  [popover]=\"preview\"\n                  placement=\"end\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                >\n                  <i c8yIcon=\"eye\"></i>\n                </button>\n                <ng-template #preview>\n                  <div class=\"bg-checkered\">\n                    <img\n                      class=\"fit-w\"\n                      [alt]=\"asset.fileName\"\n                      [src]=\"asset.path\"\n                    />\n                  </div>\n                </ng-template>\n              </div>\n              <div class=\"col-md-3 col-xs-12 text-muted\">\n                <code class=\"text-10\">{{ asset.type }}</code>\n              </div>\n              <div class=\"col-md-2 col-xs-12 text-muted\">\n                <span class=\"small\">{{ asset.size | bytes }}</span>\n              </div>\n              <div\n                class=\"col-md-2 col-xs-12 text-muted\"\n                [title]=\"asset.addedAt | date\"\n              >\n                <div class=\"icon-flex small\">\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"calendar\"\n                  ></i>\n                  <span>{{ asset.addedAt | date }}</span>\n                </div>\n              </div>\n              <div class=\"col-md-2 col-xs-12 d-flex\">\n                <button\n                  class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n                  (click)=\"select(asset)\"\n                  translate\n                >\n                  Select\n                </button>\n              </div>\n            </div>\n          </c8y-list-item-body>\n        </c8y-list-item>\n      </c8y-list-group>\n      <div\n        class=\"card-group-block interact-grid\"\n        *ngIf=\"layout === 'grid'\"\n      >\n        <button\n          class=\"col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer\"\n          *ngFor=\"let asset of assets\"\n          (click)=\"select(asset)\"\n        >\n          <div class=\"card-block\">\n            <div class=\"bg-checkered\">\n              <img\n                class=\"img-responsive m-auto img-square\"\n                [alt]=\"asset.fileName\"\n                [src]=\"asset.path\"\n              />\n            </div>\n            <p\n              class=\"text-medium text-truncate-wrap m-t-8\"\n              title=\"{{ asset.fileName }}\"\n            >\n              {{ asset.fileName }}\n            </p>\n            <p class=\"m-b-4\">\n              <code class=\"text-10\">{{ asset.type }}</code>\n            </p>\n            <p class=\"small text-muted d-flex a-i-center\">\n              {{ asset.size | bytes }}\n              <span class=\"m-l-auto\">\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"calendar\"\n                ></i>\n                <span>{{ asset.addedAt | date }}</span>\n              </span>\n            </p>\n          </div>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"p-24\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i3.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i3.LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "pipe", type: i3.BytesPipe, name: "bytes" }, { kind: "component", type: i3.DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: i3.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: i3.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "component", type: i3.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i3.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i3.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i3.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "directive", type: i4.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "ngmodule", type: CollapseModule }, { kind: "directive", type: i5.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetsModalComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: StaticAssetsModalComponent, isStandalone: true, selector: "c8y-static-assets-modal", inputs: { assetType: "assetType", supportedFileExtensions: "supportedFileExtensions", modalTitle: "modalTitle", layout: "layout" }, ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onDismiss)=\"cancel()\"\n  [headerClasses]=\"'dialog-header'\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'select-all'\"></span>\n  </ng-container>\n  <c8y-static-assets-file-list\n    (itemSelected)=\"select($event)\"\n    [assetType]=\"assetType\"\n    [supportedFileExtensions]=\"supportedFileExtensions\"\n    [layout]=\"layout\"\n    [inModalView]=\"true\"\n  ></c8y-static-assets-file-list>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: StaticAssetsFileListComponent, selector: "c8y-static-assets-file-list", inputs: ["inModalView", "assetType", "supportedFileExtensions", "layout"], outputs: ["itemSelected"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StaticAssetsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-static-assets-modal', imports: [NgFor, NgIf, AsyncPipe, DatePipe, CoreModule, PopoverModule, CollapseModule], standalone: true, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onDismiss)=\"cancel()\"\n  [headerClasses]=\"'dialog-header'\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'select-all'\"></span>\n  </ng-container>\n  <ng-container *ngIf=\"files$ | async as assets; else loading\">\n    <div class=\"text-center sticky-top separator-bottom bg-component\" style=\"z-index: 1001;\">\n      <p *ngIf=\"assets.length\" class=\"m-0 p-16\">\n        {{ 'Select from the list below or`first part, followed by upload a new asset`' | translate }}\n        <button\n          class=\"btn-link\"\n          aria-controls=\"collapseUpload\"\n          [attr.aria-expanded]=\"isExpanded\"\n          (click)=\"isExpanded = !isExpanded\"\n        >\n          {{ 'upload a new asset' | translate }}\n        </button>\n      </p>\n      <div\n        class=\"collapse\"\n        id=\"collapseUpload\"\n        [isAnimated]=\"true\"\n        [collapse]=\"!isExpanded\"\n      >\n        <div class=\"p-t-24 p-l-24 p-r-24 bg-level-1 separator-top-bottom p-b-32\">\n          <c8y-drop-area\n            class=\"drop-area-sm m-b-8\"\n            [icon]=\"'upload'\"\n            [accept]=\"accept\"\n            (dropped)=\"addFiles($event)\"\n          ></c8y-drop-area>\n          <c8y-messages\n            [helpMessage]=\"\n              'After uploading, the asset will be visible in the list below.' | translate\n            \"\n          ></c8y-messages>\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"assets.length\">\n      <c8y-list-group\n        class=\"m-b-0\"\n        *ngIf=\"layout != 'grid'\"\n      >\n        <c8y-list-item *ngFor=\"let asset of assets\">\n          <c8y-list-item-icon icon=\"file\"></c8y-list-item-icon>\n\n          <c8y-list-item-body>\n            <div class=\"row\">\n              <div class=\"col-md-3 col-xs-12 d-flex a-i-center\">\n                <div\n                  class=\"text-truncate\"\n                  title=\"{{ asset.fileName }}\"\n                >\n                  {{ asset.fileName }}\n                </div>\n                <button\n                  class=\"btn-dot m-l-4\"\n                  [title]=\"'Preview' | translate\"\n                  [popover]=\"preview\"\n                  placement=\"end\"\n                  triggers=\"focus\"\n                  container=\"body\"\n                  [adaptivePosition]=\"false\"\n                >\n                  <i c8yIcon=\"eye\"></i>\n                </button>\n                <ng-template #preview>\n                  <div class=\"bg-checkered\">\n                    <img\n                      class=\"fit-w\"\n                      [alt]=\"asset.fileName\"\n                      [src]=\"asset.path\"\n                    />\n                  </div>\n                </ng-template>\n              </div>\n              <div class=\"col-md-3 col-xs-12 text-muted\">\n                <code class=\"text-10\">{{ asset.type }}</code>\n              </div>\n              <div class=\"col-md-2 col-xs-12 text-muted\">\n                <span class=\"small\">{{ asset.size | bytes }}</span>\n              </div>\n              <div\n                class=\"col-md-2 col-xs-12 text-muted\"\n                [title]=\"asset.addedAt | date\"\n              >\n                <div class=\"icon-flex small\">\n                  <i\n                    class=\"m-r-4\"\n                    c8yIcon=\"calendar\"\n                  ></i>\n                  <span>{{ asset.addedAt | date }}</span>\n                </div>\n              </div>\n              <div class=\"col-md-2 col-xs-12 d-flex\">\n                <button\n                  class=\"btn btn-default btn-sm m-l-auto showOnHover\"\n                  (click)=\"select(asset)\"\n                  translate\n                >\n                  Select\n                </button>\n              </div>\n            </div>\n          </c8y-list-item-body>\n        </c8y-list-item>\n      </c8y-list-group>\n      <div\n        class=\"card-group-block interact-grid\"\n        *ngIf=\"layout === 'grid'\"\n      >\n        <button\n          class=\"col-md-3 col-sm-4 col-xs-12 card btn-clean interact pointer\"\n          *ngFor=\"let asset of assets\"\n          (click)=\"select(asset)\"\n        >\n          <div class=\"card-block\">\n            <div class=\"bg-checkered\">\n              <img\n                class=\"img-responsive m-auto img-square\"\n                [alt]=\"asset.fileName\"\n                [src]=\"asset.path\"\n              />\n            </div>\n            <p\n              class=\"text-medium text-truncate-wrap m-t-8\"\n              title=\"{{ asset.fileName }}\"\n            >\n              {{ asset.fileName }}\n            </p>\n            <p class=\"m-b-4\">\n              <code class=\"text-10\">{{ asset.type }}</code>\n            </p>\n            <p class=\"small text-muted d-flex a-i-center\">\n              {{ asset.size | bytes }}\n              <span class=\"m-l-auto\">\n                <i\n                  class=\"m-r-4\"\n                  c8yIcon=\"calendar\"\n                ></i>\n                <span>{{ asset.addedAt | date }}</span>\n              </span>\n            </p>\n          </div>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-template #loading>\n    <div class=\"p-24\">\n      <c8y-loading></c8y-loading>\n    </div>\n  </ng-template>\n</c8y-modal>\n" }]
-        }], ctorParameters: () => [{ type: i1.BsModalRef }, { type: i2.StaticAssetsService }], propDecorators: { assetType: [{
+            args: [{ selector: 'c8y-static-assets-modal', imports: [StaticAssetsFileListComponent, ModalComponent, IconDirective], standalone: true, template: "<c8y-modal\n  [title]=\"modalTitle\"\n  (onDismiss)=\"cancel()\"\n  [headerClasses]=\"'dialog-header'\"\n  [labels]=\"{ cancel: 'Cancel' }\"\n>\n  <ng-container c8y-modal-title>\n    <span [c8yIcon]=\"'select-all'\"></span>\n  </ng-container>\n  <c8y-static-assets-file-list\n    (itemSelected)=\"select($event)\"\n    [assetType]=\"assetType\"\n    [supportedFileExtensions]=\"supportedFileExtensions\"\n    [layout]=\"layout\"\n    [inModalView]=\"true\"\n  ></c8y-static-assets-file-list>\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.BsModalRef }], propDecorators: { assetType: [{
                 type: Input
             }], supportedFileExtensions: [{
                 type: Input
@@ -77,5 +179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { StaticAssetsModalComponent };
+export { StaticAssetsFileListComponent, StaticAssetsModalComponent };
 //# sourceMappingURL=c8y-ngx-components-static-assets-modal.mjs.map