Merge branch 'dev' of https://github.com/abpframework/abp into dev

npm/ng-packs/packages/account/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared"]
 }

npm/ng-packs/packages/components/ng-package.json

@@ -5,5 +5,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["ng-zorro-antd"]
+  "allowedNonPeerDependencies": ["ng-zorro-antd"]
 }

npm/ng-packs/packages/components/ngcc.config.js

@@ -2,6 +2,7 @@ module.exports = {
   entryPoints: {
     '.': {},
     './tree': {},
+    './page': {},
     './dist': { ignore: true },
   },
 };

npm/ng-packs/packages/components/package.json

@@ -8,6 +8,7 @@
   },
   "peerDependencies": {
     "@abp/ng.core": ">=4.2.2",
+    "@abp/ng.theme.shared": ">=4.2.2",
     "@ng-bootstrap/ng-bootstrap": ">=6.0.0"
   },
   "dependencies": {

npm/ng-packs/packages/components/page/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/components/page",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

npm/ng-packs/packages/components/page/src/page-part.directive.ts

@@ -0,0 +1,77 @@
+import {
+  Directive,
+  TemplateRef,
+  ViewContainerRef,
+  Input,
+  InjectionToken,
+  Optional,
+  Inject,
+  OnInit,
+  OnDestroy,
+  Injector,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+} from '@angular/core';
+
+export interface PageRenderStrategy {
+  shouldRender(type: string);
+  onInit?(type: string, injector: Injector, context?: any);
+  onDestroy?(type: string, injector?: Injector, context?: any);
+  onContextUpdate?(change: SimpleChange);
+}
+
+export const PAGE_RENDER_STRATEGY = new InjectionToken<PageRenderStrategy>('PAGE_RENDER_STRATEGY');
+
+@Directive({ selector: '[abpPagePart]' })
+export class PagePartDirective implements OnInit, OnDestroy, OnChanges {
+  hasRendered = false;
+  type: string;
+
+  @Input() set abpPagePart(type: string) {
+    this.type = type;
+    const shouldRender = this.shouldRender(type);
+
+    if (shouldRender && !this.hasRendered) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+      this.hasRendered = true;
+    } else if (!shouldRender && this.hasRendered) {
+      this.viewContainer.clear();
+      this.hasRendered = false;
+    }
+  }
+
+  @Input('abpPagePartContext') context: any;
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    @Optional() @Inject(PAGE_RENDER_STRATEGY) private renderLogic: PageRenderStrategy,
+    private injector: Injector,
+  ) {}
+
+  ngOnChanges({ context }: SimpleChanges): void {
+    if (this.renderLogic?.onContextUpdate) {
+      this.renderLogic.onContextUpdate(context);
+    }
+  }
+
+  ngOnInit() {
+    if (this.renderLogic?.onInit) {
+      this.renderLogic.onInit(this.type, this.injector, this.context);
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.renderLogic?.onDestroy) {
+      this.renderLogic.onDestroy(this.type, this.injector, this.context);
+    }
+  }
+
+  shouldRender(type: string) {
+    if (this.renderLogic) {
+      return this.renderLogic.shouldRender(type);
+    }
+    return true;
+  }
+}

npm/ng-packs/packages/components/page/src/page-parts.component.ts

@@ -0,0 +1,34 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+export enum PageParts {
+  title = 'PageTitleContainerComponent',
+  breadcrumb = 'PageBreadcrumbContainerComponent',
+  toolbar = 'PageToolbarContainerComponent',
+}
+
+@Component({
+  selector: 'abp-page-title-container',
+  template: `
+    <ng-content></ng-content>
+  `,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageTitleContainerComponent {}
+
+@Component({
+  selector: 'abp-page-breadcrumb-container',
+  template: `
+    <ng-content></ng-content>
+  `,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageBreadcrumbContainerComponent {}
+
+@Component({
+  selector: 'abp-page-toolbar-container',
+  template: `
+    <ng-content></ng-content>
+  `,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageToolbarContainerComponent {}

npm/ng-packs/packages/components/page/src/page.component.html

@@ -0,0 +1,41 @@
+<div class="row entry-row">
+  <ng-container *ngIf="titleVisible">
+    <ng-container *ngIf="customTitle; else defaultTitleTemplate">
+      <ng-content select="abp-page-title-container"></ng-content>
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="breadcrumbVisible">
+    <ng-container *ngIf="customBreadcrumb; else defaultBreadcrumbTemplate">
+      <ng-content select="abp-page-breadcrumb-container"></ng-content>
+    </ng-container>
+  </ng-container>
+
+  <ng-container *ngIf="toolbarVisible">
+    <ng-container *ngIf="customToolbar; else defaultPageToolbarTemplate">
+      <ng-content select="abp-page-toolbar-container"></ng-content>
+    </ng-container>
+  </ng-container>
+</div>
+
+<ng-content></ng-content>
+
+<ng-template #defaultTitleTemplate>
+  <div class="col-auto" *abpPagePart="pageParts.title">
+    <h1 class="content-header-title">
+      {{ title }}
+    </h1>
+  </div>
+</ng-template>
+
+<ng-template #defaultBreadcrumbTemplate>
+  <div class="col-lg-auto pl-lg-0" *abpPagePart="pageParts.breadcrumb">
+    <abp-breadcrumb></abp-breadcrumb>
+  </div>
+</ng-template>
+
+<ng-template #defaultPageToolbarTemplate>
+  <div class="col" *abpPagePart="pageParts.toolbar; context: record">
+    <abp-page-toolbar [record]="record"></abp-page-toolbar>
+  </div>
+</ng-template>

npm/ng-packs/packages/components/page/src/page.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, ViewEncapsulation, ContentChild } from '@angular/core';
+import {
+  PageTitleContainerComponent,
+  PageBreadcrumbContainerComponent,
+  PageToolbarContainerComponent,
+  PageParts,
+} from './page-parts.component';
+
+@Component({
+  selector: 'abp-page',
+  templateUrl: './page.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageComponent {
+  @Input() title: string;
+  @Input() record: any;
+
+  @Input() titleVisible = true;
+  @Input() breadcrumbVisible = true;
+  @Input() toolbarVisible = true;
+
+  pageParts = {
+    title: PageParts.title,
+    breadcrumb: PageParts.breadcrumb,
+    toolbar: PageParts.toolbar,
+  };
+
+  @ContentChild(PageTitleContainerComponent) customTitle: PageTitleContainerComponent;
+  @ContentChild(PageBreadcrumbContainerComponent)
+  customBreadcrumb: PageBreadcrumbContainerComponent;
+  @ContentChild(PageToolbarContainerComponent) customToolbar: PageToolbarContainerComponent;
+}

npm/ng-packs/packages/components/page/src/page.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { CoreModule } from '@abp/ng.core';
+import { PageComponent } from './page.component';
+import {
+  PageTitleContainerComponent,
+  PageBreadcrumbContainerComponent,
+  PageToolbarContainerComponent,
+} from './page-parts.component';
+import { PagePartDirective } from './page-part.directive';
+
+const exportedDeclarations = [
+  PageComponent,
+  PageTitleContainerComponent,
+  PageBreadcrumbContainerComponent,
+  PageToolbarContainerComponent,
+  PagePartDirective,
+];
+
+@NgModule({
+  declarations: [...exportedDeclarations],
+  imports: [CommonModule, UiExtensionsModule, CoreModule, ThemeSharedModule],
+  exports: [...exportedDeclarations],
+})
+export class PageModule {}

npm/ng-packs/packages/components/page/src/public-api.ts

@@ -0,0 +1,4 @@
+export * from './page.module';
+export * from './page-part.directive';
+export * from './page-parts.component';
+export * from './page.component';

npm/ng-packs/packages/components/tree/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/components/tree",
+  "dest": "../../../dist/components/tree",
   "lib": {
     "entryFile": "src/public-api.ts"
   }

npm/ng-packs/packages/core/ng-package.json

@@ -5,7 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
   "deleteDestPath": false,
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "@abp/utils",
     "@angular/localize",
     "@ngxs/store",

npm/ng-packs/packages/feature-management/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared"]
 }

npm/ng-packs/packages/identity/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.permission-management"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.permission-management"]
 }

npm/ng-packs/packages/permission-management/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared"]
 }

npm/ng-packs/packages/setting-management/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.components"]
 }

npm/ng-packs/packages/setting-management/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@abp/ng.theme.shared": "~4.2.2",
+    "@abp/ng.components": "~4.2.2",
     "tslib": "^2.0.0"
   },
   "publishConfig": {

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html

@@ -1,46 +1,36 @@
-<div class="row entry-row">
+<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization" [toolbarVisible]="false">
-  <div class="col-auto">
+  <div id="SettingManagementWrapper">
-    <h1 class="content-header-title">{{ 'AbpSettingManagement::Settings' | abpLocalization }}</h1>
+    <div class="card">
-  </div>
+      <div class="card-body">
-  <div id="breadcrumb" class="col-lg-auto pl-lg-0">
+        <div class="row">
-    <abp-breadcrumb></abp-breadcrumb>
+          <div class="col-12 col-md-3">
-  </div>
+            <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-  <div class="col">
+              <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-    <div class="text-lg-right pt-2" id="AbpContentToolbar"></div>
+                <li
-  </div>
+                  (click)="selected = setting"
-</div>
+                  class="nav-item pointer"
-
+                  *abpPermission="setting.requiredPolicy"
-<div id="SettingManagementWrapper">
-  <div class="card">
-    <div class="card-body">
-      <div class="row">
-        <div class="col-12 col-md-3">
-          <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-              <li
-                (click)="selected = setting"
-                class="nav-item pointer"
-                *abpPermission="setting.requiredPolicy"
-              >
-                <a
-                  class="nav-link"
-                  [id]="setting.name + '-tab'"
-                  role="tab"
-                  [class.active]="setting.name === selected.name"
-                  >{{ setting.name | abpLocalization }}</a
                 >
-              </li>
+                  <a
-            </ng-container>
+                    class="nav-link"
-          </ul>
+                    [id]="setting.name + '-tab'"
-        </div>
+                    role="tab"
-        <div class="col-12 col-md-9">
+                    [class.active]="setting.name === selected.name"
-          <div *ngIf="settings.length" class="tab-content">
+                    >{{ setting.name | abpLocalization }}</a
-            <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
+                  >
-              <ng-container *ngComponentOutlet="selected.component"></ng-container>
+                </li>
+              </ng-container>
+            </ul>
+          </div>
+          <div class="col-12 col-md-9">
+            <div *ngIf="settings.length" class="tab-content">
+              <div class="tab-pane fade show active" [id]="selected.name + '-tab'" role="tabpanel">
+                <ng-container *ngComponentOutlet="selected.component"></ng-container>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</abp-page>

npm/ng-packs/packages/setting-management/src/lib/setting-management.module.ts

@@ -2,6 +2,7 @@ import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
+import { PageModule } from '@abp/ng.components/page';
 import { SettingManagementComponent } from './components/setting-management.component';
 import { SettingManagementRoutingModule } from './setting-management-routing.module';
 import { SettingManagementState } from './states/setting-management.state';
@@ -13,6 +14,7 @@ import { SettingManagementState } from './states/setting-management.state';
     SettingManagementRoutingModule,
     CoreModule,
     ThemeSharedModule,
+    PageModule,
     NgxsModule.forFeature([SettingManagementState]),
   ],
 })

npm/ng-packs/packages/tenant-management/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.feature-management"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.feature-management"]
 }

npm/ng-packs/packages/theme-basic/ng-package.json

@@ -4,5 +4,5 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": ["@abp/ng.theme.shared"]
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared"]
 }

npm/ng-packs/packages/theme-shared/ng-package.json

@@ -5,7 +5,7 @@
   "lib": {
     "entryFile": "src/public-api.ts"
   },
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "@abp/ng.core",
     "@fortawesome/fontawesome-free",
     "@ng-bootstrap/ng-bootstrap",

npm/ng-packs/packages/theme-shared/src/lib/tests/modal.component.spec.ts

@@ -184,7 +184,7 @@ describe('ModalComponent', () => {
         reduce<Event[]>((acc, v) => acc.concat(v), []),
       )
       .subscribe(([event1, event2]) => {
-        expect(event1.returnValue).toBe(true);
+        expect(event1.returnValue).toBe(false);
         expect(event2.returnValue).toBe(false);
         done();
       });

npm/ng-packs/tsconfig.json

@@ -21,6 +21,7 @@
       "@abp/ng.theme.shared": ["packages/theme-shared/src/public-api.ts"],
       "@abp/ng.theme.shared/extensions": ["packages/theme-shared/extensions/src/public-api.ts"],
       "@abp/ng.components/tree": ["packages/components/tree/src/public-api.ts"],
+      "@abp/ng.components/page": ["packages/components/page/src/public-api.ts"],
       "@abp/ng.theme.basic": ["packages/theme-basic/src/public-api.ts"],
       "@abp/ng.account": ["packages/account/src/public-api.ts"],
       "@abp/ng.account/config": ["packages/account/config/src/public-api.ts"],