+
+
+
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/account-layout.component.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/account-layout.component.ts
new file mode 100644
index 0000000000..510e2a8f72
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html
new file mode 100644
index 0000000000..5a4e2e6039
--- /dev/null
+++ b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/account-layout/auth-wrapper/auth-wrapper.component.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ 'AbpAccount::InvalidLoginRequest' | abpLocalization }}
+ {{ 'AbpAccount::ThereAreNoLoginSchemesConfiguredForThisClient' | abpLocalization }}
+
+
+
+
+
+
+
+
+
+ {{
+ 'AbpUiMultiTenancy::Tenant' | abpLocalization
+ }}
+
+
+ +
+ {{ currentTenant.name || ('AbpUiMultiTenancy::NotSelected' | abpLocalization) }} +
+Switch Tenant
+
+
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/application-layout/application-layout.component.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/application-layout/application-layout.component.ts
new file mode 100644
index 0000000000..42da273fbb
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/components/empty-layout/empty-layout.component.ts
new file mode 100644
index 0000000000..f961ecc321
--- /dev/null
+++ b/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: `
+
+
++ {{ alert.title | abpLocalization: alert.titleLocalizationParams }} +
+ {{ alert.message | abpLocalization: alert.messageLocalizationParams }} + +
+ {{ error.message | abpLocalization: error.interpoliteParams }}
+
+ `,
+ 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;
+ });
+ }
+}
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/constants/styles.ts
new file mode 100644
index 0000000000..5b82f0ba85
--- /dev/null
+++ b/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;
+}
+`;
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/components.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/components.ts
new file mode 100644
index 0000000000..e62f551851
--- /dev/null
+++ b/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',
+}
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/index.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/enums/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/index.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/index.ts
new file mode 100644
index 0000000000..5d15fe1b3c
--- /dev/null
+++ b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/index.ts
@@ -0,0 +1 @@
+export * from './layout';
diff --git a/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/layout.ts b/npm/ng-packs/nx/ng-packs/libs/theme-basic/src/lib/models/layout.ts
new file mode 100644
index 0000000000..e2636e4f53
--- /dev/null
+++ b/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