Merge branch 'dev' into feat-input-wrapper

docs/en/Themes/LeptonXLite/Angular.md

@@ -14,11 +14,15 @@ To add `LeptonX-lite` into your project,
 
 - Install `@abp/ng.theme.lepton-x`
 
-`yarn add @abp/ng.theme.lepton-x@preview`
+```bash
+yarn add @abp/ng.theme.lepton-x
+```
 
 - Install `bootstrap-icons`
 
-`yarn add bootstrap-icons`
+```bash
+yarn add bootstrap-icons
+```
 
 - Then, we need to edit the styles array in `angular.json` to replace the existing style with the new one in the following link : 
 

docs/en/Tutorials/Todo/Single-Layer/Index.md

@@ -255,7 +255,7 @@ Before starting to implement these use cases, first we need to create a DTO clas
 [Application services](../../../Application-Services.md) typically get and return DTOs ([Data Transfer Objects](../../../Data-Transfer-Objects.md)) instead of entities. So, create a new `TodoItemDto` class under the `Services/Dtos` folder{{if UI=="Blazor"}} of your `TodoApp.Contracts` project{{end}}:
 
 ```csharp
-namespace TodoApp{{if UI=="Blazor"}}.Contracts{{end}}.Services.Dtos;
+namespace TodoApp.Services.Dtos;
 
 public class TodoItemDto
 {
@@ -273,10 +273,10 @@ This is a very simple DTO class that has the same properties as the `TodoItem` e
 Create a `ITodoAppService` interface under the `Services` folder of the `TodoApp.Contracts` project, as shown below:
 
 ```csharp
-using TodoApp.Contracts.Services.Dtos;
+using TodoApp.Services.Dtos;
 using Volo.Abp.Application.Services;
 
-namespace TodoApp.Contracts.Services;
+namespace TodoApp.Services;
 
 public interface ITodoAppService : IApplicationService
 {
@@ -296,17 +296,18 @@ Create a `TodoAppService` class under the `Services` folder of {{if UI=="Blazor"
 
 ```csharp
 {{if UI=="Blazor"}}
-using TodoApp.Contracts.Services;
-using TodoApp.Contracts.Services.Dtos;
-using TodoApp.Host.Entities;
+using TodoApp.Services;
+using TodoApp.Services.Dtos;
+using TodoApp.Entities;
 using Volo.Abp.Application.Services;
+using Volo.Abp.Domain.Repositories;
 {{else}}
 using TodoApp.Entities;
 using Volo.Abp.Application.Services;
 using Volo.Abp.Domain.Repositories;
 {{end}}
 
-namespace TodoApp{{if UI=="Blazor"}}.Host{{end}}.Services;
+namespace TodoApp.Services;
 
 public class TodoAppService : ApplicationService{{if UI=="Blazor"}}, ITodoAppService{{end}}
 {
@@ -562,8 +563,8 @@ Open the `Index.razor.cs` file in the `Pages` folder{{if UI=="Blazor"}} in your
 ```csharp
 {{if UI=="Blazor"}}
 using Microsoft.AspNetCore.Components;
-using TodoApp.Contracts.Services;
-using TodoApp.Contracts.Services.Dtos;
+using TodoApp.Services;
+using TodoApp.Services.Dtos;
 {{else}}
 using Microsoft.AspNetCore.Components;
 using TodoApp.Services;

framework/src/Volo.Abp.Features/Volo/Abp/Features/FeatureDefinition.cs

@@ -124,7 +124,7 @@ public class FeatureDefinition : ICanCreateChildFeature
     }
 
     /// <summary>
-    /// Sets a property in the <see cref="Properties"/> dictionary.
+    /// Adds one or more providers to the <see cref="AllowedProviders"/> list.
     /// This is a shortcut for nested calls on this object.
     /// </summary>
     public virtual FeatureDefinition WithProviders(params string[] providers)

npm/ng-packs/angular.json

@@ -195,15 +195,55 @@
             "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
             "styles": [
               {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css",
+                "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.css",
                 "inject": false,
-                "bundleName": "bootstrap-rtl.min"
+                "bundleName": "bootstrap-dim"
               },
               {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
-                "inject": true,
-                "bundleName": "bootstrap-ltr.min"
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.css",
+                  "inject": false,
+                  "bundleName": "ng-bundle"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.css",
+                  "inject": false,
+                  "bundleName": "layout-bundle"
+              },
+              {
+                  "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.css",
+                  "inject": false,
+                  "bundleName": "abp-bundle"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/bootstrap-dim.rtl.css",
+                  "inject": false,
+                  "bundleName": "bootstrap-dim.rtl"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/ng-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "ng-bundle.rtl"
+              },
+              {
+                  "input": "node_modules/@volo/ngx-lepton-x.lite/assets/css/side-menu/layout-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "layout-bundle.rtl"
+              },
+              {
+                  "input": "node_modules/@abp/ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
+                  "inject": false,
+                  "bundleName": "abp-bundle.rtl"
+              },
+              {
+                  "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.rtl.css",
+                  "inject":false,
+                  "bundleName":"font-bundle.rtl"
               },
+              {
+                  "input":"node_modules/@volo/ngx-lepton-x.lite/assets/css/font-bundle.css",
+                  "inject":false,
+                  "bundleName":"font-bundle"
+              },            
               {
                 "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                 "inject": true,
@@ -234,6 +274,7 @@
                 "inject": false,
                 "bundleName": "ng-zorro-antd-tree"
               },
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
               "apps/dev-app/src/styles.scss"
             ],
             "scripts": []

npm/ng-packs/apps/dev-app/src/app/app.module.ts

@@ -4,7 +4,8 @@ import { registerLocale } from '@abp/ng.core/locale';
 import { IdentityConfigModule } from '@abp/ng.identity/config';
 import { SettingManagementConfigModule } from '@abp/ng.setting-management/config';
 import { TenantManagementConfigModule } from '@abp/ng.tenant-management/config';
-import { ThemeBasicModule } from '@abp/ng.theme.basic';
+import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
+import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -34,7 +35,8 @@ import { AbpOAuthModule } from '@abp/ng.oauth';
     TenantManagementConfigModule.forRoot(),
     FeatureManagementModule.forRoot(),
     SettingManagementConfigModule.forRoot(),
-    ThemeBasicModule.forRoot(),
+    ThemeLeptonXModule.forRoot(),
+    SideMenuLayoutModule.forRoot(),
   ],
   providers: [APP_ROUTE_PROVIDER],
   declarations: [AppComponent],

npm/ng-packs/apps/dev-app/src/app/home/home.component.html

@@ -26,8 +26,8 @@
     <h3>Let's improve your application!</h3>
     <p>Here are some links to help you get started:</p>
   </div>
-  <div class="card mt-4 mb-5">
-    <div class="card-body">
+  <abp-card cardClass="mt-4 mb-5">
+    <abp-card-body>
       <div class="row text-center justify-content-md-center">
         <ng-container
           *ngTemplateOutlet="
@@ -182,16 +182,15 @@
           "
         ></ng-container>
       </div>
-    </div>
-  </div>
+    </abp-card-body>
+  </abp-card>
 
   <div class="mt-5 my-3 text-center">
     <h3>Meet the ABP Commercial</h3>
     <p>A Complete Web Application Platform Built on the ABP Framework</p>
   </div>
-
-  <div class="card mt-4 mb-5">
-    <div class="card-body">
+  <abp-card cardClass="mt-4 mb-5">
+    <abp-card-body>
       <p class="px-lg-5 mx-lg-5 py-3 text-center">
         <a href="https://commercial.abp.io/" target="_blank">ABP Commercial</a> is a platform based
         on the open source ABP framework. It provides pre-built application modules, rapid
@@ -271,8 +270,9 @@
           "
         ></ng-container>
       </div>
-    </div>
-  </div>
+    </abp-card-body>
+  </abp-card>
+
   <div class="mb-5 text-center">
     <p class="align-middle">
       <a href="https://twitter.com/abpframework" target="_blank" class="mx-2"

npm/ng-packs/package.json

@@ -42,6 +42,18 @@
   },
   "private": true,
   "devDependencies": {
+    "@abp/ng.account": "~7.1.0-rc.1",
+    "@abp/ng.account.core": "~7.1.0-rc.1",
+    "@abp/ng.core": "~7.1.0-rc.1",
+    "@abp/ng.feature-management": "~7.1.0-rc.1",
+    "@abp/ng.identity": "~7.1.0-rc.1",
+    "@abp/ng.oauth": "~7.1.0-rc.1",
+    "@abp/ng.permission-management": "~7.1.0-rc.1",
+    "@abp/ng.schematics": "~7.1.0-rc.1",
+    "@abp/ng.setting-management": "~7.1.0-rc.1",
+    "@abp/ng.tenant-management": "~7.1.0-rc.1",
+    "@abp/ng.theme.basic": "~7.1.0-rc.1",
+    "@abp/ng.theme.shared": "~7.1.0-rc.1",
     "@abp/utils": "~7.1.0-rc.1",
     "@angular-devkit/build-angular": "~15.0.1",
     "@angular-devkit/build-ng-packagr": "^0.1002.0",
@@ -61,18 +73,6 @@
     "@angular/platform-browser": "~15.0.1",
     "@angular/platform-browser-dynamic": "~15.0.1",
     "@angular/router": "~15.0.1",
-    "@abp/ng.account": "~7.1.0-rc.1",
-    "@abp/ng.account.core": "~7.1.0-rc.1",
-    "@abp/ng.core": "~7.1.0-rc.1",
-    "@abp/ng.oauth": "~7.1.0-rc.1",
-    "@abp/ng.feature-management": "~7.1.0-rc.1",
-    "@abp/ng.identity": "~7.1.0-rc.1",
-    "@abp/ng.permission-management": "~7.1.0-rc.1",
-    "@abp/ng.schematics": "~7.1.0-rc.1",
-    "@abp/ng.setting-management": "~7.1.0-rc.1",
-    "@abp/ng.tenant-management": "~7.1.0-rc.1",
-    "@abp/ng.theme.basic": "~7.1.0-rc.1",
-    "@abp/ng.theme.shared": "~7.1.0-rc.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^14.0.0",
     "@ngneat/spectator": "^10.0.0",
@@ -129,10 +129,13 @@
     "typescript": "4.8.4",
     "zone.js": "0.11.4"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@abp/ng.theme.lepton-x": "^2.1.0-rc.1",
+    "bootstrap-icons": "^1.10.3"
+  },
   "lint-staged": {
-    "**/*.{js,jsx,ts,tsx}": [
+    "**/*.{js,jsx,ts,tsx,html,css,scss}": [
       "npx prettier --write --config .prettierrc "
     ]
   }
-}
+}

npm/ng-packs/packages/core/src/lib/tests/application-localization.service.spec.ts

@@ -0,0 +1,17 @@
+export const APPLICATION_LOCALIZATION_DATA = {
+  resources: {
+    Default: { texts: {}, baseResources: [] },
+    MyProjectName: {
+      texts: {
+        "'{0}' and '{1}' do not match.": "'{0}' and '{1}' do not match.",
+      },
+      baseResources: [],
+    },
+    AbpIdentity: {
+      texts: {
+        Identity: 'identity',
+      },
+      baseResources: [],
+    },
+  },
+};

npm/ng-packs/packages/core/src/lib/tests/config-state.service.spec.ts

@@ -8,6 +8,9 @@ import {
 } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/models';
 import { ConfigStateService } from '../services';
 import { CORE_OPTIONS } from '../tokens';
+import { IncludeLocalizationResourcesProvider } from '../providers';
+import { APPLICATION_LOCALIZATION_DATA } from './application-localization.service.spec';
+import { AbpApplicationLocalizationService } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/abp-application-localization.service';
 
 export const CONFIG_STATE_DATA = {
   environment: {
@@ -34,14 +37,7 @@ export const CONFIG_STATE_DATA = {
     layouts: [null, null, null],
   },
   localization: {
-    values: {
-      MyProjectName: {
-        "'{0}' and '{1}' do not match.": "'{0}' and '{1}' do not match.",
-      },
-      AbpIdentity: {
-        Identity: 'identity',
-      },
-    },
+    values: {},
     languages: [
       {
         cultureName: 'cs',
@@ -115,6 +111,11 @@ describe('ConfigStateService', () => {
         provide: AbpApplicationConfigurationService,
         useValue: { get: () => of(CONFIG_STATE_DATA) },
       },
+      {
+        provide: AbpApplicationLocalizationService,
+        useValue: { get: () => APPLICATION_LOCALIZATION_DATA },
+      },
+      IncludeLocalizationResourcesProvider,
     ],
   });
 

npm/ng-packs/packages/core/src/lib/tests/date-utils.spec.ts

@@ -15,7 +15,7 @@ describe('Date Utils', () => {
   let config: ConfigStateService;
 
   beforeEach(() => {
-    config = new ConfigStateService(null);
+    config = new ConfigStateService(null, null, null);
   });
 
   describe('#getShortDateFormat', () => {

npm/ng-packs/packages/core/src/lib/tests/localization-utils.spec.ts

@@ -57,6 +57,7 @@ describe('Localization Utils', () => {
       languages: [],
       languageFilesMap: null,
       languagesMap: null,
+      resources: {},
     });
 
     test.each`
@@ -100,6 +101,7 @@ describe('Localization Utils', () => {
       languages: [],
       languageFilesMap: null,
       languagesMap: null,
+      resources: {},
     });
 
     test.each`
@@ -148,6 +150,7 @@ describe('Localization Utils', () => {
       languages: [],
       languageFilesMap: null,
       languagesMap: null,
+      resources: {},
     });
 
     test.each`

npm/ng-packs/packages/core/src/lib/tests/localization.service.spec.ts

@@ -8,8 +8,12 @@ import { SessionStateService } from '../services/session-state.service';
 import { LocalizationService } from '../services/localization.service';
 import { CORE_OPTIONS } from '../tokens/options.token';
 import { CONFIG_STATE_DATA } from './config-state.service.spec';
+import { AbpApplicationLocalizationService } from '../proxy/volo/abp/asp-net-core/mvc/application-configurations/abp-application-localization.service';
+import { APPLICATION_LOCALIZATION_DATA } from './application-localization.service.spec';
+import { IncludeLocalizationResourcesProvider } from '../providers';
 
 const appConfigData$ = new BehaviorSubject(CONFIG_STATE_DATA);
+const appLocalizationData$ = new BehaviorSubject(APPLICATION_LOCALIZATION_DATA);
 
 describe('LocalizationService', () => {
   let spectator: SpectatorService<LocalizationService>;
@@ -22,6 +26,7 @@ describe('LocalizationService', () => {
     entryComponents: [],
     mocks: [Router],
     providers: [
+      IncludeLocalizationResourcesProvider,
       {
         provide: CORE_OPTIONS,
         useValue: { registerLocaleFn: () => Promise.resolve(), cultureNameLocaleFileMap: {} },
@@ -30,6 +35,10 @@ describe('LocalizationService', () => {
         provide: AbpApplicationConfigurationService,
         useValue: { get: () => appConfigData$ },
       },
+      {
+        provide: AbpApplicationLocalizationService,
+        useValue: { get: () => appLocalizationData$ },
+      },
     ],
   });
 

npm/ng-packs/packages/core/src/lib/tests/permission.guard.spec.ts

@@ -9,6 +9,7 @@ import { HttpErrorReporterService } from '../services/http-error-reporter.servic
 import { PermissionService } from '../services/permission.service';
 import { RoutesService } from '../services/routes.service';
 import { CORE_OPTIONS } from '../tokens/options.token';
+import { IncludeLocalizationResourcesProvider } from '../providers';
 
 describe('PermissionGuard', () => {
   let spectator: SpectatorService<PermissionGuard>;
@@ -36,7 +37,7 @@ describe('PermissionGuard', () => {
             },
           },
         ],
-        { relativeLinkResolution: 'legacy' },
+        {},
       ),
     ],
     providers: [
@@ -45,6 +46,7 @@ describe('PermissionGuard', () => {
         useValue: '/',
       },
       { provide: CORE_OPTIONS, useValue: { skipGetAppConfiguration: true } },
+      IncludeLocalizationResourcesProvider,
     ],
   });
 

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-body.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-body',
+  template: `<div class="card-body">
+    <ng-content></ng-content>
+  </div>`,
+})
+export class CardBodyComponent {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card-title.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-card-title',
+  template: `<div class="card-title">
+    <ng-content></ng-content>
+  </div>`,
+})
+export class CardTitleComponent {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.component.ts

@@ -0,0 +1,22 @@
+import { Component, ContentChild, Input } from '@angular/core';
+import { CardBodyComponent } from './card-body.component';
+import { CardTitleComponent } from './card-title.component';
+
+@Component({
+  selector: 'abp-card',
+  template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+    <ng-content *ngIf="cardTitleTemplate" select="abp-card-title"></ng-content>
+    <ng-content *ngIf="cardBodyTemplate" select="abp-card-body"></ng-content>
+  </div>`,
+})
+export class CardComponent {
+  @Input() cardClass: string;
+
+  @Input() cardStyle: string;
+
+  @ContentChild(CardBodyComponent)
+  cardBodyTemplate?: CardBodyComponent;
+
+  @ContentChild(CardTitleComponent)
+  cardTitleTemplate?: CardTitleComponent;
+}

npm/ng-packs/packages/theme-shared/src/lib/components/card/card.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CardBodyComponent } from './card-body.component';
+import { CardTitleComponent } from './card-title.component';
+import { CardComponent } from './card.component';
+
+const declarationsWithExports = [CardComponent, CardBodyComponent, CardTitleComponent];
+
+@NgModule({
+  declarations: [...declarationsWithExports],
+  imports: [CommonModule],
+  exports: [...declarationsWithExports],
+})
+export class CardModule {}

npm/ng-packs/packages/theme-shared/src/lib/components/card/index.ts

@@ -0,0 +1,4 @@
+export * from './card.module';
+export * from './card.component';
+export * from './card-body.component';
+export * from './card-title.component';

npm/ng-packs/packages/theme-shared/src/lib/components/index.ts

@@ -11,3 +11,4 @@ export * from './modal/modal.component';
 export * from './toast-container/toast-container.component';
 export * from './toast/toast.component';
 export * from './password/password.component';
+export * from './card/index';

npm/ng-packs/packages/theme-shared/src/lib/directives/visible.directive.ts

@@ -8,7 +8,7 @@ export class AbpVisibleDirective implements OnDestroy, OnInit {
   conditionSubscription: Subscription | undefined;
   isVisible: boolean | undefined;
 
-  @Input('abpVisible') set abpVisible(
+  @Input() set abpVisible(
     value: boolean | Promise<boolean> | Observable<boolean> | undefined | null,
   ) {
     this.condition$ = checkType(value);

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -36,8 +36,8 @@ import { HTTP_ERROR_CONFIG, httpErrorConfigFactory } from './tokens/http-error.t
 import { DateParserFormatter } from './utils/date-parser-formatter';
 import { CONFIRMATION_ICONS, DEFAULT_CONFIRMATION_ICONS } from './tokens/confirmation-icons.token';
 import { PasswordComponent } from './components/password/password.component';
+import { CardModule } from './components/card/card.module';
 import { AbpVisibleDirective } from './directives';
-import { FormInputComponent } from './components/form-input/form-input.component';
 
 const declarationsWithExports = [
   BreadcrumbComponent,
@@ -64,9 +64,16 @@ const declarationsWithExports = [
     NgxValidateCoreModule,
     NgbPaginationModule,
     EllipsisModule,
+    CardModule,
+  ],
+  declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
+  exports: [
+    NgxDatatableModule,
+    EllipsisModule,
+    NgxValidateCoreModule,
+    ...declarationsWithExports,
+    CardModule,
   ],
-  declarations: [...declarationsWithExports, HttpErrorWrapperComponent, FormInputComponent],
-  exports: [NgxDatatableModule, EllipsisModule, NgxValidateCoreModule, ...declarationsWithExports],
   providers: [DatePipe],
 })
 export class BaseThemeSharedModule {}