mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-36614 new provideShell api (#11006)
This commit is contained in:
@@ -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`.
|
||||||
|
@@ -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';
|
||||||
|
@@ -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>
|
||||||
|
|
||||||
|
@@ -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,
|
||||||
|
68
lib/core/shell/src/lib/providers.ts
Normal file
68
lib/core/shell/src/lib/providers.ts
Normal 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;
|
||||||
|
}
|
@@ -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> {
|
||||||
|
Reference in New Issue
Block a user