AAE-36614 new provideShell api (#11006)

This commit is contained in:
Denys Vuika
2025-07-14 08:21:05 -04:00
committed by GitHub
parent 2ebee4c024
commit 7aa07ef525
6 changed files with 105 additions and 13 deletions

View File

@@ -9,9 +9,19 @@ This module provides the main layout for the application, allowing you to define
Passed routes are going to be attached to shell main route. Passed routes are going to be attached to shell main route.
```typescript ```typescript
import { provideShellRoutes } from '@alfresco/adf-core/shell'; import { provideShell } from '@alfresco/adf-core/shell';
provideShellRoutes([/*Your Routes*/]) provideShell(
{
routes: [],
appService: AppService,
authGuard: AuthGuard,
navBar: {
minWidth: 0,
maxWidth: 100
}
}
)
``` ```
If you would like to provide custom app guard, you can provide your own using `SHELL_AUTH_TOKEN`. If you would like to provide custom app guard, you can provide your own using `SHELL_AUTH_TOKEN`.

View File

@@ -19,3 +19,4 @@ export * from './lib/shell.module';
export * from './lib/services/shell-app.service'; export * from './lib/services/shell-app.service';
export * from './lib/components/shell/shell.component'; export * from './lib/components/shell/shell.component';
export * from './lib/shell.routes'; export * from './lib/shell.routes';
export * from './lib/providers';

View File

@@ -9,13 +9,14 @@
> >
<adf-sidenav-layout-header> <adf-sidenav-layout-header>
<ng-template let-isMenuMinimized="isMenuMinimized"> <ng-template let-isMenuMinimized="isMenuMinimized">
<div @if (!hideSidenav) {
role="heading" <div
aria-level="1" role="heading"
*ngIf="!hideSidenav" aria-level="1"
> >
<adf-dynamic-component id="app.layout.header" [data]="{ layout }" /> <adf-dynamic-component id="app.layout.header" [data]="{ layout }" />
</div> </div>
}
</ng-template> </ng-template>
</adf-sidenav-layout-header> </adf-sidenav-layout-header>

View File

@@ -15,7 +15,13 @@
* limitations under the License. * limitations under the License.
*/ */
import { AppConfigService, SidenavLayoutComponent, SidenavLayoutModule } from '@alfresco/adf-core'; import {
AppConfigService,
SidenavLayoutComponent,
SidenavLayoutContentDirective,
SidenavLayoutHeaderDirective,
SidenavLayoutNavigationDirective
} from '@alfresco/adf-core';
import { DynamicExtensionComponent } from '@alfresco/adf-extensions'; import { DynamicExtensionComponent } from '@alfresco/adf-extensions';
import { Component, DestroyRef, inject, Inject, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core'; import { Component, DestroyRef, inject, Inject, OnInit, Optional, ViewChild, ViewEncapsulation } from '@angular/core';
import { NavigationEnd, Router, RouterModule } from '@angular/router'; import { NavigationEnd, Router, RouterModule } from '@angular/router';
@@ -24,12 +30,18 @@ import { filter, map, withLatestFrom } from 'rxjs/operators';
import { BreakpointObserver } from '@angular/cdk/layout'; import { BreakpointObserver } from '@angular/cdk/layout';
import { Directionality } from '@angular/cdk/bidi'; import { Directionality } from '@angular/cdk/bidi';
import { SHELL_APP_SERVICE, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from '../../services/shell-app.service'; import { SHELL_APP_SERVICE, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from '../../services/shell-app.service';
import { CommonModule } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({ @Component({
selector: 'app-shell', selector: 'app-shell',
imports: [CommonModule, SidenavLayoutModule, RouterModule, DynamicExtensionComponent], imports: [
RouterModule,
SidenavLayoutHeaderDirective,
SidenavLayoutNavigationDirective,
SidenavLayoutContentDirective,
DynamicExtensionComponent,
SidenavLayoutComponent
],
templateUrl: './shell.component.html', templateUrl: './shell.component.html',
styleUrls: ['./shell.component.scss'], styleUrls: ['./shell.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,

View File

@@ -0,0 +1,68 @@
/*!
* @license
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { EnvironmentProviders, Provider } from '@angular/core';
import { CanActivateChildFn, CanActivateFn, Routes } from '@angular/router';
import { AppShellRoutesConfig, provideShellRoutes } from './shell.routes';
import { SHELL_APP_SERVICE, SHELL_AUTH_TOKEN, SHELL_NAVBAR_MAX_WIDTH, SHELL_NAVBAR_MIN_WIDTH, ShellAppService } from './services/shell-app.service';
export interface ProvideShellOpts {
routes: Routes | AppShellRoutesConfig;
appService?: ShellAppService;
authGuard?: CanActivateFn | CanActivateChildFn;
navBar?: {
minWidth: number;
maxWidth: number;
};
}
/**
* Provides Shell-related api and providers
*
* @param opts Optional parameters
* @returns list of Angular providers
*/
export function provideShell(opts?: ProvideShellOpts): (Provider | EnvironmentProviders)[] {
const result: (Provider | EnvironmentProviders)[] = [provideShellRoutes(opts?.routes || [])];
if (opts?.appService) {
result.push({
provide: SHELL_APP_SERVICE,
useValue: opts.appService
});
}
if (opts?.authGuard) {
result.push({
provide: SHELL_AUTH_TOKEN,
useValue: opts.authGuard
});
}
if (opts?.navBar) {
result.push({
provide: SHELL_NAVBAR_MIN_WIDTH,
useValue: opts.navBar.minWidth ?? 70
});
result.push({
provide: SHELL_NAVBAR_MAX_WIDTH,
useValue: opts.navBar.maxWidth ?? 320
});
}
return result;
}

View File

@@ -19,7 +19,7 @@ import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, provideRouter } from '@angular/router'; import { Routes, provideRouter } from '@angular/router';
import { AppShellRoutesConfig, SHELL_LAYOUT_ROUTE } from './shell.routes'; import { AppShellRoutesConfig, SHELL_LAYOUT_ROUTE } from './shell.routes';
/** @deprecated use `provideShellRoutes` instead */ /** @deprecated use `provideShell` instead */
@NgModule() @NgModule()
export class ShellModule { export class ShellModule {
static withRoutes(routes: Routes | AppShellRoutesConfig): ModuleWithProviders<ShellModule> { static withRoutes(routes: Routes | AppShellRoutesConfig): ModuleWithProviders<ShellModule> {