feature: add autofocus directive & implement first input of all forms

npm/ng-packs/packages/account/src/lib/components/login/login.component.html

@@ -14,6 +14,7 @@
             type="text"
             id="login-input-user-name-or-email-address"
             formControlName="username"
+            autofocus
           />
         </div>
         <div class="form-group">

npm/ng-packs/packages/account/src/lib/components/register/register.component.html

@@ -8,7 +8,7 @@
         <div class="form-group">
           <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
           ><span> * </span
-          ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
+          ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" autofocus/>
         </div>
         <div class="form-group">
           <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html

@@ -12,7 +12,7 @@
   >)
 </div>
 
-<abp-modal *ngIf="isModalVisible" [(visible)]="isModalVisible">
+<abp-modal [(visible)]="isModalVisible" size="md">
   <ng-template #abpHeader>
     <h5>Switch Tenant</h5>
   </ng-template>
@@ -21,7 +21,7 @@
       <div class="mt-2">
         <div class="form-group">
           <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input type="text" id="name" name="tenant" class="form-control" [(ngModel)]="selected.name" />
+          <input [(ngModel)]="selected.name" type="text" id="name" name="tenant" class="form-control" autofocus />
         </div>
         <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
       </div>

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -19,6 +19,7 @@ import { ProfileState } from './states/profile.state';
 import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
 import { EllipsisDirective } from './directives/ellipsis.directive';
+import { AutofocusDirective } from './directives/autofocus.directive';
 
 @NgModule({
   imports: [
@@ -34,10 +35,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive';
   declarations: [
     RouterOutletComponent,
     DynamicLayoutComponent,
+    AutofocusDirective,
+    EllipsisDirective,
+    LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
-    LocalizationPipe,
-    EllipsisDirective,
   ],
   exports: [
     CommonModule,
@@ -47,9 +49,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive';
     RouterModule,
     RouterOutletComponent,
     DynamicLayoutComponent,
+    AutofocusDirective,
+    EllipsisDirective,
+    LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
-    EllipsisDirective,
     LocalizationPipe,
   ],
   providers: [LocalizationPipe],

npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
+
+@Directive({
+  selector: '[autofocus]',
+})
+export class AutofocusDirective implements AfterViewInit {
+  @Input('autofocus')
+  delay: number = 0;
+
+  constructor(private elRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this.elRef.nativeElement.focus(), this.delay);
+  }
+}

npm/ng-packs/packages/core/src/lib/directives/index.ts

@@ -1,3 +1,4 @@
+export * from './autofocus.directive';
 export * from './ellipsis.directive';
 export * from './permission.directive';
 export * from './visibility.directive';

npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts

@@ -45,7 +45,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a
   wrappers = abpRoutes.filter(ar => ar.wrapper);
   const transformed = [] as ABP.FullRoute[];
   routes
-    .filter(route => route.component || route.loadChildren || (route.data || {}).routes)
+    .filter(route => (route.data || {}).routes && (route.component || route.loadChildren))
     .forEach(route => {
       const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase());
       const { length } = transformed;

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -58,7 +58,7 @@
   </div>
 </div>
 
-<abp-modal size="md" [(visible)]="isModalVisible" *ngIf="isModalVisible" [centered]="true">
+<abp-modal [(visible)]="isModalVisible" [centered]="true">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
   </ng-template>
@@ -68,7 +68,7 @@
       <div class="form-group">
         <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
         ><span> * </span>
-        <input type="text" id="role-name" class="form-control" formControlName="name" />
+        <input type="text" id="role-name" class="form-control" formControlName="name" autofocus/>
       </div>
 
       <div class="custom-checkbox custom-control mb-2">

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -77,7 +77,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" *ngIf="isModalVisible">
+<abp-modal [(visible)]="isModalVisible">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
   </ng-template>
@@ -92,7 +92,7 @@
                 <div class="form-group">
                   <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                   ><span> * </span>
-                  <input type="text" id="user-name" class="form-control" formControlName="userName" />
+                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus/>
                 </div>
 
                 <div class="form-group">

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

@@ -1,4 +1,4 @@
-<abp-modal [(visible)]="visible" *ngIf="visible" size="lg">
+<abp-modal [(visible)]="visible">
   <ng-container *ngIf="{ entityName: entityName$ | async } as data">
     <ng-template #abpHeader>
       <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>

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

@@ -88,7 +88,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" *ngIf="isModalVisible">
+<abp-modal [(visible)]="isModalVisible">
   <ng-template #abpHeader>
     <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
   </ng-template>
@@ -112,7 +112,7 @@
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
-        <input type="text" id="name" class="form-control" formControlName="name" />
+        <input type="text" id="name" class="form-control" formControlName="name" autofocus/>
       </div>
     </div>
   </form>
@@ -123,7 +123,7 @@
     <div class="mt-2">
       <div class="form-group">
         <div class="form-check">
-          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
+          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" autofocus/>
           <label for="useSharedDatabase" class="font-check-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
           }}</label>

npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html

@@ -1,4 +1,4 @@
-<abp-modal *ngIf="visible" [(visible)]="visible">
+<abp-modal [(visible)]="visible">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
   </ng-template>
@@ -6,7 +6,8 @@
     <form [formGroup]="form" novalidate>
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
-        ><span> * </span><input type="password" id="current-password" class="form-control" formControlName="password" />
+        ><span> * </span
+        ><input type="password" id="current-password" class="form-control" formControlName="password" autofocus />
       </div>
       <div class="form-group">
         <label for="new-password">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html

@@ -1,4 +1,4 @@
-<abp-modal *ngIf="visible" [(visible)]="visible">
+<abp-modal [(visible)]="visible">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
   </ng-template>
@@ -6,7 +6,7 @@
     <form *ngIf="form" [formGroup]="form" novalidate>
       <div class="form-group">
         <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
-        ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" />
+        ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" autofocus/>
       </div>
       <div class="row">
         <div class="col col-md-6">