copy theme-basic package to the nx workspace

npm/ng-packs/nx/ng-packs/libs/core/README.md

@@ -1,7 +1,3 @@
-# core
+<h1> @abp/ng.core </h1>
 
-This library was generated with [Nx](https://nx.dev).
+[docs.abp.io](https://docs.abp.io)
-
-## Running unit tests
-
-Run `nx test core` to execute the unit tests.

npm/ng-packs/nx/ng-packs/libs/core/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/abpframework/abp.git"
   },
   "dependencies": {
-    "@abp/utils": "^4.4.0-rc.2",
+    "@abp/utils": "^4.4.0",
     "@angular/localize": "~10.0.10",
     "@ngxs/store": "^3.7.0",
     "angular-oauth2-oidc": "^10.0.0",

npm/ng-packs/nx/ng-packs/libs/theme-basic/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "abp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "abp",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/README.md

@@ -0,0 +1,3 @@
+<h1> @abp/ng.theme.basic </h1>
+
+[docs.abp.io](https://docs.abp.io)

npm/ng-packs/nx/ng-packs/libs/theme-basic/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'theme-basic',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/libs/theme-basic',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

npm/ng-packs/nx/ng-packs/libs/theme-basic/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/theme-basic",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["@abp/ng.theme.shared", "@abp/ng.account.core"]
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@abp/ng.theme.basic",
+  "version": "4.4.0",
+  "homepage": "https://abp.io",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/abpframework/abp.git"
+  },
+  "dependencies": {
+    "@abp/ng.account.core": "~4.4.0",
+    "@abp/ng.theme.shared": "~4.4.0",
+    "tslib": "^2.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/account-layout.component.html

@@ -0,0 +1,62 @@
+<nav
+  class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4"
+  id="main-navbar"
+  style="min-height: 4rem"
+>
+  <div class="container">
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
+    <button
+      class="navbar-toggler"
+      type="button"
+      [attr.aria-expanded]="!service.isCollapsed"
+      (click)="service.isCollapsed = !service.isCollapsed"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div
+      class="navbar-collapse"
+      [class.overflow-hidden]="service.smallScreen"
+      id="main-navbar-collapse"
+    >
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
+
+      <div
+        *ngIf="service.smallScreen"
+        [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'"
+      >
+        <ng-container *ngTemplateOutlet="navigations"></ng-container>
+      </div>
+
+      <ng-template #navigations>
+        <abp-routes
+          *abpReplaceableTemplate="{
+            componentKey: service.routesComponentKey,
+            inputs: {
+              smallScreen: { value: service.smallScreen }
+            }
+          }"
+          class="mx-auto"
+          [smallScreen]="service.smallScreen"
+        ></abp-routes>
+
+        <abp-nav-items
+          *abpReplaceableTemplate="{
+            componentKey: service.navItemsComponentKey
+          }"
+        ></abp-nav-items>
+      </ng-template>
+    </div>
+  </div>
+</nav>
+
+<!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
+<div class="container">
+  <abp-page-alert-container></abp-page-alert-container>
+  <abp-auth-wrapper
+    *abpReplaceableTemplate="{
+      componentKey: authWrapperKey
+    }"
+  >
+    <router-outlet #outlet="outlet"></router-outlet>
+  </abp-auth-wrapper>
+</div>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/account-layout.component.ts

@@ -0,0 +1,21 @@
+import { AfterViewInit, Component } from '@angular/core';
+import { eLayoutType, SubscriptionService } from '@abp/ng.core';
+import { LayoutService } from '../../services/layout.service';
+
+@Component({
+  selector: 'abp-layout-account',
+  templateUrl: './account-layout.component.html',
+  providers: [LayoutService, SubscriptionService],
+})
+export class AccountLayoutComponent implements AfterViewInit {
+  // required for dynamic component
+  static type = eLayoutType.account;
+
+  authWrapperKey = 'Account.AuthWrapperComponent';
+
+  constructor(public service: LayoutService) {}
+
+  ngAfterViewInit() {
+    this.service.subscribeWindowSize();
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html

@@ -0,0 +1,27 @@
+<div class="row">
+  <div class="mx-auto col col-md-5">
+    <ng-container *ngIf="(service.isMultiTenancyEnabled$ | async) && service.isTenantBoxVisible">
+      <abp-tenant-box
+        *abpReplaceableTemplate="{ componentKey: service.tenantBoxKey }"
+      ></abp-tenant-box>
+    </ng-container>
+
+    <div class="abp-account-container">
+      <div
+        *ngIf="service.enableLocalLogin$ | async; else disableLocalLoginTemplate"
+        class="card mt-3 shadow-sm rounded"
+      >
+        <div class="card-body p-5">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #disableLocalLoginTemplate>
+  <div class="alert alert-warning">
+    <strong>{{ 'AbpAccount::InvalidLoginRequest' | abpLocalization }}</strong>
+    {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | abpLocalization }}
+  </div>
+</ng-template>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AuthWrapperComponent } from './auth-wrapper.component';
+
+describe('AuthWrapperComponent', () => {
+  let component: AuthWrapperComponent;
+  let fixture: ComponentFixture<AuthWrapperComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AuthWrapperComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AuthWrapperComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthWrapperService } from '@abp/ng.account.core';
+
+@Component({
+  selector: 'abp-auth-wrapper',
+  templateUrl: './auth-wrapper.component.html',
+  providers: [AuthWrapperService],
+})
+export class AuthWrapperComponent implements OnInit {
+  constructor(public service: AuthWrapperService) {}
+
+  ngOnInit(): void {}
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.html

@@ -0,0 +1,63 @@
+<ng-container *ngIf="(service.currentTenant$ | async) || {} as currentTenant">
+  <div class="card shadow-sm rounded mb-3">
+    <div class="card-body px-5">
+      <div class="row">
+        <div class="col">
+          <span style="font-size: 0.8em" class="text-uppercase text-muted">{{
+            'AbpUiMultiTenancy::Tenant' | abpLocalization
+          }}</span
+          ><br />
+          <h6 class="m-0 d-inline-block">
+            <i>{{ currentTenant.name || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }}</i>
+          </h6>
+        </div>
+        <div class="col-auto">
+          <a
+            id="AbpTenantSwitchLink"
+            href="javascript:void(0);"
+            class="btn btn-sm mt-3 btn-outline-primary"
+            (click)="service.onSwitch()"
+            >{{ 'AbpUiMultiTenancy::Switch' | abpLocalization }}</a
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <abp-modal size="md" [(visible)]="service.isModalVisible" [busy]="service.modalBusy">
+    <ng-template #abpHeader>
+      <h5>Switch Tenant</h5>
+    </ng-template>
+    <ng-template #abpBody>
+      <form (ngSubmit)="service.save()">
+        <div class="mt-2">
+          <div class="form-group">
+            <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
+            <input
+              [(ngModel)]="service.name"
+              type="text"
+              id="name"
+              name="tenant"
+              class="form-control"
+              autofocus
+            />
+          </div>
+          <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
+        </div>
+      </form>
+    </ng-template>
+    <ng-template #abpFooter>
+      <button abpClose type="button" class="btn btn-secondary">
+        {{ 'AbpTenantManagement::Cancel' | abpLocalization }}
+      </button>
+      <abp-button
+        type="abp-button"
+        iconClass="fa fa-check"
+        (click)="service.save()"
+        [disabled]="currentTenant?.name === service.name"
+      >
+        <span>{{ 'AbpTenantManagement::Save' | abpLocalization }}</span>
+      </abp-button>
+    </ng-template>
+  </abp-modal>
+</ng-container>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TenantBoxComponent } from './tenant-box.component';
+
+describe('TenantBoxComponent', () => {
+  let component: TenantBoxComponent;
+  let fixture: ComponentFixture<TenantBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TenantBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TenantBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/tenant-box/tenant-box.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { TenantBoxService } from '@abp/ng.account.core';
+
+@Component({
+  selector: 'abp-tenant-box',
+  templateUrl: './tenant-box.component.html',
+  providers: [TenantBoxService],
+})
+export class TenantBoxComponent implements OnInit {
+  constructor(public service: TenantBoxService) {}
+
+  ngOnInit(): void {}
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/application-layout/application-layout.component.html

@@ -0,0 +1,50 @@
+<nav
+  class="navbar navbar-expand-lg navbar-dark bg-dark shadow-sm flex-column flex-md-row mb-4"
+  id="main-navbar"
+  style="min-height: 4rem"
+>
+  <div class="container">
+    <abp-logo *abpReplaceableTemplate="{ componentKey: service.logoComponentKey }"></abp-logo>
+    <button
+      class="navbar-toggler"
+      type="button"
+      [attr.aria-expanded]="!service.isCollapsed"
+      (click)="service.isCollapsed = !service.isCollapsed"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-collapse" [class.overflow-hidden]="service.smallScreen" id="main-navbar-collapse">
+      <ng-container *ngTemplateOutlet="!service.smallScreen ? navigations : null"></ng-container>
+
+      <div *ngIf="service.smallScreen" [@collapseWithMargin]="service.isCollapsed ? 'collapsed' : 'expanded'">
+        <ng-container *ngTemplateOutlet="navigations"></ng-container>
+      </div>
+
+      <ng-template #navigations>
+        <abp-routes
+          *abpReplaceableTemplate="{
+            componentKey: service.routesComponentKey,
+            inputs: {
+              smallScreen: { value: service.smallScreen }
+            }
+          }"
+          class="mx-auto"
+          [smallScreen]="service.smallScreen"
+        ></abp-routes>
+
+        <abp-nav-items
+          *abpReplaceableTemplate="{
+            componentKey: service.navItemsComponentKey
+          }"
+        ></abp-nav-items>
+      </ng-template>
+    </div>
+  </div>
+</nav>
+
+<!-- [@slideFromBottom]="outlet.isActivated && outlet.activatedRoute?.routeConfig?.path" TODO: throws ExpressionChangedAfterItHasBeenCheck when animation is active. It should be fixed -->
+<div class="container">
+  <abp-page-alert-container></abp-page-alert-container>
+
+  <router-outlet #outlet="outlet"></router-outlet>
+</div>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/application-layout/application-layout.component.ts

@@ -0,0 +1,21 @@
+import { eLayoutType, SubscriptionService } from '@abp/ng.core';
+import { collapseWithMargin, slideFromBottom } from '@abp/ng.theme.shared';
+import { AfterViewInit, Component } from '@angular/core';
+import { LayoutService } from '../../services/layout.service';
+
+@Component({
+  selector: 'abp-layout-application',
+  templateUrl: './application-layout.component.html',
+  animations: [slideFromBottom, collapseWithMargin],
+  providers: [LayoutService, SubscriptionService],
+})
+export class ApplicationLayoutComponent implements AfterViewInit {
+  // required for dynamic component
+  static type = eLayoutType.application;
+
+  constructor(public service: LayoutService) {}
+
+  ngAfterViewInit() {
+    this.service.subscribeWindowSize();
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { eLayoutType } from '@abp/ng.core';
+
+@Component({
+  selector: 'abp-layout-empty',
+  template: `
+    <router-outlet></router-outlet>
+    <abp-confirmation></abp-confirmation>
+  `,
+})
+export class EmptyLayoutComponent {
+  static type = eLayoutType.empty;
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/index.ts

@@ -0,0 +1,12 @@
+export * from './account-layout/account-layout.component';
+export * from './account-layout/auth-wrapper/auth-wrapper.component';
+export * from './account-layout/tenant-box/tenant-box.component';
+export * from './application-layout/application-layout.component';
+export * from './empty-layout/empty-layout.component';
+export * from './logo/logo.component';
+export * from './nav-items/current-user.component';
+export * from './nav-items/languages.component';
+export * from './nav-items/nav-items.component';
+export * from './routes/routes.component';
+export * from './validation-error/validation-error.component';
+export * from './page-alert-container/page-alert-container.component';

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/logo/logo.component.ts

@@ -0,0 +1,28 @@
+import { ApplicationInfo, EnvironmentService } from '@abp/ng.core';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'abp-logo',
+  template: `
+    <a class="navbar-brand" routerLink="/">
+      <img
+        *ngIf="appInfo.logoUrl; else appName"
+        [src]="appInfo.logoUrl"
+        [alt]="appInfo.name"
+        width="100%"
+        height="auto"
+      />
+    </a>
+
+    <ng-template #appName>
+      {{ appInfo.name }}
+    </ng-template>
+  `,
+})
+export class LogoComponent {
+  get appInfo(): ApplicationInfo {
+    return this.environment.getEnvironment().application;
+  }
+
+  constructor(private environment: EnvironmentService) {}
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/nav-items/current-user.component.html

@@ -0,0 +1,41 @@
+<ng-template #loginBtn>
+  <a role="button" class="nav-link pointer" (click)="navigateToLogin()">{{
+    'AbpAccount::Login' | abpLocalization
+  }}</a>
+</ng-template>
+<div
+  *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
+  ngbDropdown
+  class="dropdown"
+  #currentUserDropdown="ngbDropdown"
+  display="static"
+>
+  <a
+    ngbDropdownToggle
+    class="nav-link"
+    href="javascript:void(0)"
+    role="button"
+    id="dropdownMenuLink"
+    data-toggle="dropdown"
+    aria-haspopup="true"
+    aria-expanded="false"
+  >
+    <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
+      ><i>{{ tenantName }}</i
+      >\</small
+    >
+    <strong>{{ (currentUser$ | async)?.userName }}</strong>
+  </a>
+  <div
+    class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
+    aria-labelledby="dropdownMenuLink"
+    [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
+  >
+    <a class="dropdown-item pointer" (click)="navigateToManageProfile()"
+      ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::MyAccount' | abpLocalization }}</a
+    >
+    <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
+      ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
+    >
+  </div>
+</div>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -0,0 +1,37 @@
+import {
+  AuthService,
+  ConfigStateService,
+  CurrentUserDto,
+  NAVIGATE_TO_MANAGE_PROFILE,
+  SessionStateService,
+} from '@abp/ng.core';
+import { Component, Inject } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'abp-current-user',
+  templateUrl: './current-user.component.html',
+})
+export class CurrentUserComponent {
+  currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
+  selectedTenant$ = this.sessionState.getTenant$();
+
+  get smallScreen(): boolean {
+    return window.innerWidth < 992;
+  }
+
+  constructor(
+    @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile,
+    private authService: AuthService,
+    private configState: ConfigStateService,
+    private sessionState: SessionStateService,
+  ) {}
+
+  navigateToLogin() {
+    this.authService.navigateToLogin();
+  }
+
+  logout() {
+    this.authService.logout().subscribe();
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/nav-items/languages.component.ts

@@ -0,0 +1,84 @@
+import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import snq from 'snq';
+
+@Component({
+  selector: 'abp-languages',
+  // tslint:disable-next-line: component-max-inline-declarations
+  template: `
+    <div
+      *ngIf="(dropdownLanguages$ | async)?.length > 0"
+      class="dropdown"
+      ngbDropdown
+      #languageDropdown="ngbDropdown"
+      display="static"
+    >
+      <a
+        ngbDropdownToggle
+        class="nav-link"
+        href="javascript:void(0)"
+        role="button"
+        id="dropdownMenuLink"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        {{ defaultLanguage$ | async }}
+      </a>
+      <div
+        class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
+        aria-labelledby="dropdownMenuLink"
+        [class.d-block]="smallScreen && languageDropdown.isOpen()"
+      >
+        <a
+          *ngFor="let lang of dropdownLanguages$ | async"
+          href="javascript:void(0)"
+          class="dropdown-item"
+          (click)="onChangeLang(lang.cultureName)"
+          >{{ lang?.displayName }}</a
+        >
+      </div>
+    </div>
+  `,
+})
+export class LanguagesComponent {
+  get smallScreen(): boolean {
+    return window.innerWidth < 992;
+  }
+
+  languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');
+
+  get defaultLanguage$(): Observable<string> {
+    return this.languages$.pipe(
+      map(
+        languages =>
+          snq(
+            () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName,
+          ),
+        '',
+      ),
+    );
+  }
+
+  get dropdownLanguages$(): Observable<LanguageInfo[]> {
+    return this.languages$.pipe(
+      map(
+        languages =>
+          snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)),
+        [],
+      ),
+    );
+  }
+
+  get selectedLangCulture(): string {
+    return this.sessionState.getLanguage();
+  }
+
+  constructor(private sessionState: SessionStateService, private configState: ConfigStateService) {}
+
+  onChangeLang(cultureName: string) {
+    this.sessionState.setLanguage(cultureName);
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/nav-items/nav-items.component.html

@@ -0,0 +1,16 @@
+<ul class="navbar-nav">
+  <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
+    <ng-container *ngIf="item.visible()">
+      <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
+        <ng-container
+          *ngIf="item.component; else htmlTemplate"
+          [ngComponentOutlet]="item.component"
+        ></ng-container>
+
+        <ng-template #htmlTemplate>
+          <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+        </ng-template>
+      </li>
+    </ng-container>
+  </ng-container>
+</ul>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/nav-items/nav-items.component.ts

@@ -0,0 +1,12 @@
+import { NavItem, NavItemsService } from '@abp/ng.theme.shared';
+import { Component, Input, TrackByFunction } from '@angular/core';
+
+@Component({
+  selector: 'abp-nav-items',
+  templateUrl: 'nav-items.component.html',
+})
+export class NavItemsComponent {
+  trackByFn: TrackByFunction<NavItem> = (_, element) => element.id;
+
+  constructor(public readonly navItems: NavItemsService) {}
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.html

@@ -0,0 +1,22 @@
+<ng-container *ngFor="let alert of service.alerts$ | async; let i = index">
+  <div
+    class="alert alert-{{ alert.type }} fade show"
+    [ngClass]="{ 'alert-dismissible fade show': alert.dismissible }"
+    role="alert"
+  >
+    <h4 class="alert-heading" *ngIf="alert.title">
+      {{ alert.title | abpLocalization: alert.titleLocalizationParams }}
+    </h4>
+    {{ alert.message | abpLocalization: alert.messageLocalizationParams }}
+    <button
+      *ngIf="alert.dismissible"
+      type="button"
+      class="close"
+      data-dismiss="alert"
+      aria-label="Close"
+      (click)="service.remove(i)"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+</ng-container>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/page-alert-container/page-alert-container.component.ts

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PageAlertService } from '@abp/ng.theme.shared';
+
+@Component({
+  selector: 'abp-page-alert-container',
+  templateUrl: './page-alert-container.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class PageAlertContainerComponent {
+  constructor(public service: PageAlertService) {}
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/routes/routes.component.html

@@ -0,0 +1,104 @@
+<ul class="navbar-nav">
+  <ng-container
+    *ngFor="let route of routesService.visible$ | async; trackBy: trackByFn"
+    [ngTemplateOutlet]="isDropdown(route) ? dropdownLink : defaultLink"
+    [ngTemplateOutletContext]="{ $implicit: route }"
+  >
+  </ng-container>
+
+  <ng-template #defaultLink let-route>
+    <li class="nav-item" *abpPermission="route.requiredPolicy">
+      <a class="nav-link" [routerLink]="[route.path]"
+        ><i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
+        {{ route.name | abpLocalization }}</a
+      >
+    </li>
+  </ng-template>
+
+  <ng-template #dropdownLink let-route>
+    <ng-container *ngIf="route.children?.length">
+      <li
+        #navbarRootDropdown
+        class="nav-item dropdown"
+        display="static"
+        *abpPermission="route.requiredPolicy"
+        (click)="
+          navbarRootDropdown.expand
+            ? (navbarRootDropdown.expand = false)
+            : (navbarRootDropdown.expand = true)
+        "
+      >
+        <a
+          class="nav-link dropdown-toggle"
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          href="javascript:void(0)"
+        >
+          <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
+          {{ route.name | abpLocalization }}
+        </a>
+        <div
+          #routeContainer
+          class="dropdown-menu border-0 shadow-sm"
+          (click)="$event.preventDefault(); $event.stopPropagation()"
+          [class.d-block]="smallScreen && navbarRootDropdown.expand"
+        >
+          <ng-container
+            *ngTemplateOutlet="forTemplate; context: { $implicit: route }"
+          ></ng-container>
+        </div>
+      </li>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #forTemplate let-route>
+    <ng-container *ngFor="let child of route.children">
+      <ng-template
+        [ngTemplateOutlet]="child.children?.length ? dropdownChild : defaultChild"
+        [ngTemplateOutletContext]="{ $implicit: child }"
+      ></ng-template>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #defaultChild let-child>
+    <ng-container *ngIf="child.path">
+      <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
+        <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
+          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
+          {{ child.name | abpLocalization }}</a
+        >
+      </div>
+    </ng-container>
+  </ng-template>
+
+  <ng-template #dropdownChild let-child>
+    <div
+      class="dropdown-submenu"
+      ngbDropdown
+      #dropdownSubmenu="ngbDropdown"
+      placement="right-top"
+      [autoClose]="true"
+      *abpPermission="child.requiredPolicy"
+    >
+      <div ngbDropdownToggle [class.dropdown-toggle]="false">
+        <a
+          abpEllipsis="210px"
+          [abpEllipsisEnabled]="!smallScreen"
+          role="button"
+          class="btn d-block text-left dropdown-toggle"
+        >
+          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
+          {{ child.name | abpLocalization }}
+        </a>
+      </div>
+      <div
+        #childrenContainer
+        class="dropdown-menu border-0 shadow-sm"
+        [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
+      >
+        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>
+      </div>
+    </div>
+  </ng-template>
+</ul>

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/routes/routes.component.ts

@@ -0,0 +1,35 @@
+import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
+import {
+  Component,
+  ElementRef,
+  Input,
+  QueryList,
+  Renderer2,
+  TrackByFunction,
+  ViewChildren,
+} from '@angular/core';
+
+@Component({
+  selector: 'abp-routes',
+  templateUrl: 'routes.component.html',
+})
+export class RoutesComponent {
+  @Input() smallScreen: boolean;
+
+  @ViewChildren('childrenContainer') childrenContainers: QueryList<ElementRef<HTMLDivElement>>;
+
+  trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
+
+  constructor(public readonly routesService: RoutesService, protected renderer: Renderer2) {}
+
+  isDropdown(node: TreeNode<ABP.Route>) {
+    return !node?.isLeaf || this.routesService.hasChildren(node.name);
+  }
+
+  closeDropdown() {
+    this.childrenContainers.forEach(({ nativeElement }) => {
+      this.renderer.addClass(nativeElement, 'd-none');
+      setTimeout(() => this.renderer.removeClass(nativeElement, 'd-none'), 0);
+    });
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/validation-error/validation-error.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { Validation, ValidationErrorComponent as ErrorComponent } from '@ngx-validate/core';
+
+@Component({
+  selector: 'abp-validation-error',
+  template: `
+    <div class="invalid-feedback" *ngFor="let error of abpErrors; trackBy: trackByFn">
+      {{ error.message | abpLocalization: error.interpoliteParams }}
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ValidationErrorComponent extends ErrorComponent {
+  get abpErrors(): Validation.Error[] & { interpoliteParams?: string[] } {
+    if (!this.errors || !this.errors.length) return [];
+
+    return this.errors.map(error => {
+      if (!error.message) return error;
+
+      const index = error.message.indexOf('[');
+
+      if (index > -1) {
+        return {
+          ...error,
+          message: error.message.slice(0, index),
+          interpoliteParams: error.message.slice(index + 1, error.message.length - 1).split(','),
+        };
+      }
+
+      return error;
+    });
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/constants/styles.ts

@@ -0,0 +1,145 @@
+export default `
+.content-header-title {
+    font-size: 24px;
+}
+.entry-row {
+    margin-bottom: 15px;
+}
+#main-navbar-tools a.dropdown-toggle {
+    text-decoration: none;
+    color: #fff;
+}
+.navbar .dropdown-submenu {
+    position: relative;
+}
+.navbar .dropdown-menu {
+    margin: 0;
+    padding: 0;
+}
+.navbar .dropdown-menu a {
+    font-size: .9em;
+    padding: 10px 15px;
+    display: block;
+    min-width: 210px;
+    text-align: left;
+    border-radius: 0.25rem;
+    min-height: 44px;
+}
+[dir=rtl] .navbar .dropdown-menu a {
+    text-align: right!important;
+}
+.navbar .dropdown-submenu a::after {
+    transform: rotate(-90deg);
+    position: absolute;
+    right: 16px;
+    top: 18px;
+}
+[dir=rtl] .navbar .dropdown-submenu a::after {
+    transform: rotate(90deg);
+    left: 16px;
+    right: auto;
+    top: 20px;
+}
+.navbar .dropdown-submenu .dropdown-menu {
+    top: 0;
+    left: 100%;
+}
+.card-header .btn {
+    padding: 2px 6px;
+}
+.card-header h5 {
+    margin: 0;
+}
+.container > .card {
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+@media screen and (min-width: 992px) {
+    .navbar .dropdown:hover > .dropdown-menu {
+        display: block;
+    }
+
+    .navbar .dropdown-submenu:hover > .dropdown-menu {
+        display: block;
+    }
+}
+.input-validation-error {
+    border-color: #dc3545;
+}
+.field-validation-error {
+    font-size: 0.8em;
+}
+.ui-table .ui-table-tbody > tr.empty-row > div.empty-row-content {
+    border: 1px solid #c8c8c8;
+  }
+.abp-loading {
+    background: rgba(0, 0, 0, 0.05);
+}
+.modal-backdrop {
+background-color: rgba(0, 0, 0, 0.6);
+}
+
+.confirmation .confirmation-backdrop {
+	 background: rgba(0, 0, 0, 0.7) !important;
+}
+ .confirmation .confirmation-dialog {
+	 border: none;
+	 border-radius: 10px;
+	 background-color: #fff;
+	 box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
+}
+ .confirmation .confirmation-dialog .icon-container .icon {
+	 stroke: #fff;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .icon-container.info .icon {
+	 stroke: #2f96b4;
+	 color: #2f96b4;
+}
+ .confirmation .confirmation-dialog .icon-container.success .icon {
+	 stroke: #51a351;
+	 color: #51a351;
+}
+ .confirmation .confirmation-dialog .icon-container.warning .icon {
+	 stroke: #f89406;
+	 color: #f89406;
+}
+ .confirmation .confirmation-dialog .icon-container.error .icon {
+	 stroke: #bd362f;
+	 color: #bd362f;
+}
+ .confirmation .confirmation-dialog .content .title {
+	 color: #222;
+}
+ .confirmation .confirmation-dialog .content .message {
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer {
+	 background: transparent;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button {
+	 background-color: #eee;
+	 color: #777;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button:hover, .confirmation .confirmation-dialog .footer .confirmation-button:focus, .confirmation .confirmation-dialog .footer .confirmation-button:active {
+	 background-color: #bbb;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm {
+	 background-color: #2f96b4;
+	 color: #fff;
+}
+ .confirmation .confirmation-dialog .footer .confirmation-button--confirm:hover {
+	 background-color: #2e819b;
+}
+.ui-table .pagination-wrapper {
+    background-color: #f4f4f4;
+    border: 1px solid #c8c8c8;
+}
+.bordered .datatable-body-row {
+    border-top: 1px solid #eee;
+    margin-top: -1px;
+}
+.breadcrumb {
+    background-color: transparent;
+    padding: 0.27rem;
+}
+`;

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/components.ts

@@ -0,0 +1,10 @@
+export const enum eThemeBasicComponents {
+  ApplicationLayout = 'Theme.ApplicationLayoutComponent',
+  AccountLayout = 'Theme.AccountLayoutComponent',
+  EmptyLayout = 'Theme.EmptyLayoutComponent',
+  Logo = 'Theme.LogoComponent',
+  Routes = 'Theme.RoutesComponent',
+  NavItems = 'Theme.NavItemsComponent',
+  CurrentUser = 'Theme.CurrentUserComponent',
+  Languages = 'Theme.LanguagesComponent',
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/index.ts

@@ -0,0 +1 @@
+export * from './components';

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/index.ts

@@ -0,0 +1 @@
+export * from './layout';

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/layout.ts

@@ -0,0 +1,13 @@
+import { TemplateRef } from '@angular/core';
+
+export namespace Layout {
+  export interface State {
+    navigationElements: NavigationElement[];
+  }
+
+  export interface NavigationElement {
+    name: string;
+    element: TemplateRef<any>;
+    order?: number;
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/providers/index.ts

@@ -0,0 +1,2 @@
+export * from './nav-item.provider';
+export * from './styles.provider';

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/providers/nav-item.provider.ts

@@ -0,0 +1,31 @@
+import { NavItemsService } from '@abp/ng.theme.shared';
+import { APP_INITIALIZER } from '@angular/core';
+import { CurrentUserComponent } from '../components/nav-items/current-user.component';
+import { LanguagesComponent } from '../components/nav-items/languages.component';
+import { eThemeBasicComponents } from '../enums/components';
+
+export const BASIC_THEME_NAV_ITEM_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureNavItems,
+    deps: [NavItemsService],
+    multi: true,
+  },
+];
+
+export function configureNavItems(navItems: NavItemsService) {
+  return () => {
+    navItems.addItems([
+      {
+        id: eThemeBasicComponents.Languages,
+        order: 100,
+        component: LanguagesComponent,
+      },
+      {
+        id: eThemeBasicComponents.CurrentUser,
+        order: 100,
+        component: CurrentUserComponent,
+      },
+    ]);
+  };
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/providers/styles.provider.ts

@@ -0,0 +1,43 @@
+import { ReplaceableComponentsService, CONTENT_STRATEGY, DomInsertionService } from '@abp/ng.core';
+import { APP_INITIALIZER } from '@angular/core';
+import { Store } from '@ngxs/store';
+import { AccountLayoutComponent } from '../components/account-layout/account-layout.component';
+import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component';
+import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component';
+import styles from '../constants/styles';
+import { eThemeBasicComponents } from '../enums/components';
+
+export const BASIC_THEME_STYLES_PROVIDERS = [
+  {
+    provide: APP_INITIALIZER,
+    useFactory: configureStyles,
+    deps: [DomInsertionService, ReplaceableComponentsService],
+    multi: true,
+  },
+];
+
+export function configureStyles(
+  domInsertion: DomInsertionService,
+  replaceableComponents: ReplaceableComponentsService,
+) {
+  return () => {
+    domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
+
+    initLayouts(replaceableComponents);
+  };
+}
+
+function initLayouts(replaceableComponents: ReplaceableComponentsService) {
+  replaceableComponents.add({
+    key: eThemeBasicComponents.ApplicationLayout,
+    component: ApplicationLayoutComponent,
+  });
+  replaceableComponents.add({
+    key: eThemeBasicComponents.AccountLayout,
+    component: AccountLayoutComponent,
+  });
+  replaceableComponents.add({
+    key: eThemeBasicComponents.EmptyLayout,
+    component: EmptyLayoutComponent,
+  });
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/services/layout.service.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectorRef, Injectable } from '@angular/core';
+import { eThemeBasicComponents } from '../enums';
+import { SubscriptionService } from '@abp/ng.core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Injectable()
+export class LayoutService {
+  isCollapsed = true;
+
+  smallScreen: boolean; // do not set true or false
+
+  logoComponentKey = eThemeBasicComponents.Logo;
+
+  routesComponentKey = eThemeBasicComponents.Routes;
+
+  navItemsComponentKey = eThemeBasicComponents.NavItems;
+
+  constructor(private subscription: SubscriptionService, private cdRef: ChangeDetectorRef) {}
+
+  private checkWindowWidth() {
+    const isSmallScreen = window.innerWidth < 992;
+    if (isSmallScreen && this.smallScreen === false) {
+      this.isCollapsed = false;
+      setTimeout(() => {
+        this.isCollapsed = true;
+      }, 100);
+    }
+    this.smallScreen = isSmallScreen;
+    this.cdRef.detectChanges();
+  }
+
+  subscribeWindowSize() {
+    this.checkWindowWidth();
+
+    const resize$ = fromEvent(window, 'resize').pipe(debounceTime(150));
+    this.subscription.addOne(resize$, () => this.checkWindowWidth());
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/theme-basic.module.ts

@@ -0,0 +1,88 @@
+import { CoreModule } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { NgbCollapseModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgxValidateCoreModule,
+  VALIDATION_ERROR_TEMPLATE,
+  VALIDATION_INVALID_CLASSES,
+  VALIDATION_TARGET_SELECTOR,
+} from '@ngx-validate/core';
+import { AccountLayoutComponent } from './components/account-layout/account-layout.component';
+import { ApplicationLayoutComponent } from './components/application-layout/application-layout.component';
+import { EmptyLayoutComponent } from './components/empty-layout/empty-layout.component';
+import { LogoComponent } from './components/logo/logo.component';
+import { CurrentUserComponent } from './components/nav-items/current-user.component';
+import { LanguagesComponent } from './components/nav-items/languages.component';
+import { NavItemsComponent } from './components/nav-items/nav-items.component';
+import { RoutesComponent } from './components/routes/routes.component';
+import { ValidationErrorComponent } from './components/validation-error/validation-error.component';
+import { BASIC_THEME_NAV_ITEM_PROVIDERS } from './providers/nav-item.provider';
+import { BASIC_THEME_STYLES_PROVIDERS } from './providers/styles.provider';
+import { PageAlertContainerComponent } from './components/page-alert-container/page-alert-container.component';
+import { TenantBoxComponent } from './components/account-layout/tenant-box/tenant-box.component';
+import { AuthWrapperComponent } from './components/account-layout/auth-wrapper/auth-wrapper.component';
+
+export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];
+
+@NgModule({
+  declarations: [
+    ...LAYOUTS,
+    ValidationErrorComponent,
+    LogoComponent,
+    NavItemsComponent,
+    RoutesComponent,
+    CurrentUserComponent,
+    LanguagesComponent,
+    PageAlertContainerComponent,
+    TenantBoxComponent,
+    AuthWrapperComponent,
+  ],
+  exports: [
+    ...LAYOUTS,
+    ValidationErrorComponent,
+    LogoComponent,
+    NavItemsComponent,
+    RoutesComponent,
+    CurrentUserComponent,
+    LanguagesComponent,
+    PageAlertContainerComponent,
+  ],
+  imports: [
+    CoreModule,
+    ThemeSharedModule,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    NgxValidateCoreModule,
+  ],
+  entryComponents: [...LAYOUTS, ValidationErrorComponent, CurrentUserComponent, LanguagesComponent],
+})
+export class BaseThemeBasicModule {}
+
+@NgModule({
+  exports: [BaseThemeBasicModule],
+  imports: [BaseThemeBasicModule],
+})
+export class ThemeBasicModule {
+  static forRoot(): ModuleWithProviders<ThemeBasicModule> {
+    return {
+      ngModule: ThemeBasicModule,
+      providers: [
+        BASIC_THEME_NAV_ITEM_PROVIDERS,
+        BASIC_THEME_STYLES_PROVIDERS,
+        {
+          provide: VALIDATION_ERROR_TEMPLATE,
+          useValue: ValidationErrorComponent,
+        },
+        {
+          provide: VALIDATION_TARGET_SELECTOR,
+          useValue: '.form-group',
+        },
+        {
+          provide: VALIDATION_INVALID_CLASSES,
+          useValue: 'is-invalid',
+        },
+      ],
+    };
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/public-api.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of theme-basic
+ */
+
+export * from './lib/components';
+export * from './lib/enums';
+export * from './lib/models';
+export * from './lib/providers';
+export * from './lib/theme-basic.module';

npm/ng-packs/nx/ng-packs/libs/theme-basic/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

npm/ng-packs/nx/ng-packs/libs/theme-basic/testing/ng-package.json

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

npm/ng-packs/nx/ng-packs/libs/theme-basic/testing/src/lib/theme-basic-testing.module.ts

@@ -0,0 +1,40 @@
+import {
+  BaseThemeBasicModule,
+  BASIC_THEME_NAV_ITEM_PROVIDERS,
+  BASIC_THEME_STYLES_PROVIDERS,
+  ValidationErrorComponent,
+} from '@abp/ng.theme.basic';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import {
+  VALIDATION_ERROR_TEMPLATE,
+  VALIDATION_INVALID_CLASSES,
+  VALIDATION_TARGET_SELECTOR,
+} from '@ngx-validate/core';
+
+@NgModule({
+  exports: [BaseThemeBasicModule],
+  imports: [BaseThemeBasicModule],
+})
+export class ThemeBasicTestingModule {
+  static withConfig(): ModuleWithProviders<ThemeBasicTestingModule> {
+    return {
+      ngModule: ThemeBasicTestingModule,
+      providers: [
+        BASIC_THEME_NAV_ITEM_PROVIDERS,
+        BASIC_THEME_STYLES_PROVIDERS,
+        {
+          provide: VALIDATION_ERROR_TEMPLATE,
+          useValue: ValidationErrorComponent,
+        },
+        {
+          provide: VALIDATION_TARGET_SELECTOR,
+          useValue: '.form-group',
+        },
+        {
+          provide: VALIDATION_INVALID_CLASSES,
+          useValue: 'is-invalid',
+        },
+      ],
+    };
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/testing/src/public-api.ts

@@ -0,0 +1 @@
+export * from './lib/theme-basic-testing.module';

npm/ng-packs/nx/ng-packs/libs/theme-basic/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "enableIvy": false
+  }
+}

npm/ng-packs/nx/ng-packs/libs/theme-basic/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

npm/ng-packs/nx/ng-packs/libs/theme-shared/README.md

@@ -1,7 +1,3 @@
-# theme-shared
+<h1> @abp/ng.theme.shared </h1>
 
-This library was generated with [Nx](https://nx.dev).
+[docs.abp.io](https://docs.abp.io)
-
-## Running unit tests
-
-Run `nx test theme-shared` to execute the unit tests.

npm/ng-packs/nx/ng-packs/libs/theme-shared/ng-package.json

@@ -1,6 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/libs/theme-shared",
+  "assets": ["./styles/**/*"],
   "lib": {
     "entryFile": "src/public-api.ts"
   },

npm/ng-packs/nx/ng-packs/tsconfig.base.json

@@ -18,7 +18,8 @@
       // "@abp/ng.core": ["libs/core/src/public-api.ts"],
       // "@abp/ng.theme.shared": ["libs/theme-shared/src/public-api.ts"]
       "@abp/ng.core": ["dist/libs/core"],
-      "@abp/ng.theme.shared": ["dist/libs/theme-shared"]
+      "@abp/ng.theme.shared": ["dist/libs/theme-shared"],
+      "@abp/ng.theme.basic": ["dist/libs/theme-basic"]
     }
   },
   "exclude": ["node_modules", "tmp"]