diff --git a/docs/en/UI/Angular/Component-Replacement.md b/docs/en/UI/Angular/Component-Replacement.md index b17c61ae73..d718b46117 100644 --- a/docs/en/UI/Angular/Component-Replacement.md +++ b/docs/en/UI/Angular/Component-Replacement.md @@ -1,10 +1,10 @@ -# Component Replacement +## Component Replacement You can replace some ABP components with your custom components. The reason that you **can replace** but **cannot customize** default ABP components is disabling or changing a part of that component can cause problems. So we named those components as _Replaceable Components_. -## How to Replace a Component +### How to Replace a Component Create a new component that you want to use instead of an ABP component. Add that component to `declarations` and `entryComponents` in the `AppModule`. @@ -29,7 +29,54 @@ export class AppComponent { ![Example Usage](./images/component-replacement.gif) -## Available Replaceable Components + +### How to Replace a Layout + +Each ABP theme module has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced with the same way. + +> A layout component template should contain `` element. + +The below example describes how to replace the `ApplicationLayoutComponent`: + +Run the following command to generate a layout in `angular` folder: + +```bash +yarn ng generate component shared/my-application-layout --export --entryComponent + +# You don't need the --entryComponent option in Angular 9 +``` + +Add the following code in your layout template (`my-layout.component.html`) where you want the page to be loaded. + +```html + +``` + +Open the `app.component.ts` and add the below content: + +```js +import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent +import { MyApplicationLayoutComponent } from './shared/my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent +import { Store } from '@ngxs/store'; // imported Store +//... +export class AppComponent { + constructor(..., private store: Store) {} // injected Store + + ngOnInit() { + // added below content + this.store.dispatch( + new AddReplaceableComponent({ + component: MyApplicationLayoutComponent, + key: 'Theme.ApplicationLayoutComponent', + }), + ); + + //... + } +} +``` + +### Available Replaceable Components | Component key | Description | | -------------------------------------------------- | --------------------------------------------- | diff --git a/docs/en/UI/Angular/Service-Proxies.md b/docs/en/UI/Angular/Service-Proxies.md index 97b43b7513..6209350349 100644 --- a/docs/en/UI/Angular/Service-Proxies.md +++ b/docs/en/UI/Angular/Service-Proxies.md @@ -25,9 +25,9 @@ The files generated with the `--module all` option like below: ### Services -Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Http-Requests.md#restservice). +Each generated service matches a back-end controller. The services methods call back-end APIs via [RestService](./Http-Requests#restservice). -A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's RemoteServiceName. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests.md#how-to-get-a-specific-api-endpoint-from-application-config) +A variable named `apiName` (available as of v2.4) is defined in each service. `apiName` matches the module's RemoteServiceName. This variable passes to the `RestService` as a parameter at each request. If there is no microservice API defined in the environment, `RestService` uses the default. See [getting a specific API endpoint from application config](./Http-Requests#how-to-get-a-specific-api-endpoint-from-application-config) The `providedIn` property of the services is defined as `'root'`. Therefore no need to add a service as a provider to a module. You can use a service by injecting it into a constructor as shown below: @@ -64,4 +64,4 @@ Initial values ​​can optionally be passed to each class constructor. ## What's Next? -* [HTTP Requests](./Http-Requests.md) +* [HTTP Requests](./Http-Requests) diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml index 67e5352e22..6fcf402d70 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml @@ -68,7 +68,7 @@ }
-
+
@@ -108,7 +108,7 @@
@@ -124,15 +124,15 @@ @if (Model.LanguageSelectListItems.Count > 1) { -
+
-
+ @*
-
+
*@ - @(L["Edit"]) (@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()) + + @(L["Edit"]) + (@L["LastEditTime"]: @Model.Document.LastUpdatedTime.ToShortDateString()) }
@@ -232,20 +234,21 @@
@if (Model.Document.Contributors != null && Model.Document.Contributors.Count > 0) { - @(L["Contributors"].Value + " :") + + @(L["Contributors"].Value + " :") @foreach (var contributor in Model.Document.Contributors) { Avatar } - } -
+ } +
diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml index 0e518ddf0e..635553c111 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Search.cshtml @@ -15,53 +15,73 @@ } -
+
+
- - +

Search in Documents

+
+
+
+
+
+
+
+
-
-
Search results
- - @foreach (var docs in Model.SearchOutputs) - { -
-
-
+
+
+
Search Results
+
+
+ @foreach (var docs in Model.SearchOutputs) + { +
+
+
- @functions - { - string RemoveFileExtensionFromPath(string path) - { - if (path == null) + @functions { - return null; - } + string RemoveFileExtensionFromPath(string path) + { + if (path == null) + { + return null; + } - return path.EndsWith("." + @Model.Project.Format) - ? path.Left(path.Length - Model.Project.Format.Length - 1) - : path; + return path.EndsWith("." + @Model.Project.Format) + ? path.Left(path.Length - Model.Project.Format.Length - 1) + : path; + } } - } - - -

@RemoveFileExtensionFromPath(docs.Name)

 - - @foreach (var highlight in docs.Highlight) - { -

@Html.Raw(highlight)

- } +
+ + @RemoveFileExtensionFromPath(docs.Name) + +
+
+ @foreach (var highlight in docs.Highlight) + { +

@Html.Raw(highlight)

+ } +
+
-
- } + } +
\ No newline at end of file diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css index cbff2c6272..c25daac526 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.css @@ -10,21 +10,21 @@ transition: color .25s linear; color: gray; } .docs-page .anchorjs-link:hover { - color: #007bff; text-decoration: none; } .docs-page .docs-sidebar { - background: #f5f7f9; padding-right: 1rem; position: relative; top: 0px; left: 0; - position: fixed; } + position: fixed; + background: #1d1d1d; } + .docs-page .docs-sidebar .input-group { + border-radius: 5px; + overflow: hidden; } .docs-page .docs-sidebar .docs-sidebar-wrapper { width: 270px; float: right; } .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control { - background: none; - background: #fff; border: 0; } .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited { box-shadow: none; } @@ -33,27 +33,28 @@ padding: 0 1rem; margin: .25rem 0; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select { - border-radius: 3px; - border: 1px solid #e9ecef; } + border-radius: 3px; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text { - padding: 0.375rem 0.6rem; + padding: 0 10px; font-size: .9rem; - width: 32px; - height: 30px; + width: 26px; + height: 34px; line-height: 1; border-radius: 0px; - border: 1px solid #e9ecef; } + border: 0; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i { + color: #666; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { - padding: 0 10px; + padding: 0 10px 2px 10px; border: 0; - min-height: 30px; - height: 30px; - font-size: .85em; - border-radius: 1px; } + min-height: 34px; + height: 34px; + font-size: .9em; + border-radius: 0px; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited { box-shadow: none; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control { - padding-left: 6px; } + padding: 0 10px 2px 6px; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter { padding: 0 1rem; margin: .5rem 0; @@ -64,7 +65,7 @@ height: 100vh; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list > ul { display: block; - height: calc(100vh - 220px); + height: calc(100vh - 320px); overflow-y: auto; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul { font-size: .935em; @@ -88,6 +89,12 @@ .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link { top: 11px; color: #aaa; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge { + text-transform: uppercase; + font-size: 9px; + position: relative; + letter-spacing: .125px; + top: -2px; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle { color: #999; padding: 7px 0; @@ -129,10 +136,10 @@ .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link > span .fa { transform: rotate(0deg); } .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { - font-size: 1.5rem; + font-size: 1.35rem; color: #000; font-weight: 700; - padding: 20px 0 10px; + padding: 15px 0 15px; line-height: 1; } .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong { font-weight: 300; @@ -153,7 +160,8 @@ .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong { display: block; } .docs-page .docs-content { - overflow-x: scroll; } + overflow-x: scroll; + min-height: 100vh; } .docs-page .docs-content .contributors { position: absolute; top: 15px; @@ -222,10 +230,11 @@ .docs-page .docs-content article.docs-body .blockquote { margin-bottom: 1rem; margin-left: 0; - border-left: 2px solid gray; - padding: 1em; - background-color: #eee; - padding-bottom: .2em; } + border-left: 3px solid #d2dbe4; + padding: 1em 1.5em; + background-color: #e9edf1; + padding-bottom: .2em; + font-size: 1em; } .docs-page .docs-content article.docs-body img { max-width: 100%; border: 1px solid #f4f5f7; @@ -257,10 +266,8 @@ .docs-page .docs-page-index .docs-inner-anchors { position: fixed; top: 0px; - /* max-width: 270px; */ padding: 10px; - font-size: .90em; - /* height: 100vh; */ } + font-size: .90em; } .docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills { font-size: .92em; margin-left: 15px; @@ -300,83 +307,95 @@ .docs-page .docs-page-index .scroll-top-btn.showup { display: block; } +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { + background: #000000; + color: white; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { + background: #000000; + color: white; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder { + color: white; + opacity: .5; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label { + background: #000000; + border-color: #000000; + color: #ddd; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control { + background: #333; + color: #999; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select { + border: 0; + border-radius: 6px; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa { + color: #aaa; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a { + color: #aaa; + border-bottom: 0; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover { + color: #fff; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon { + font-size: .85em; + transition: .3s; + width: 18px; + height: 18px; + text-align: center; + padding: 0; + line-height: 1; + border-radius: 50%; + margin-right: 4px; + position: absolute; + left: 2px; + top: 11px; + color: #aaa; + cursor: default; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link { + color: #555; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right { + cursor: pointer; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { + top: 11px; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle { + color: #555; + padding: 7px 0; + display: block; + border-bottom: 0; } + +.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { + color: #fff; + transition: .4s; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa { + color: #fff; } + .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa { + transform: rotate(90deg); + color: #fff; } + +.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { + color: #fff; + text-transform: uppercase; + white-space: unset; } + +.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site { + color: #fff; + text-align: center; + display: block; + width: 100%; + background: #444; + padding: 6px 0 8px; + border-radius: 5px; } + +.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc { + color: #ddd; } + @media (min-width: 1100px) { .container { - max-width: 1080px; } - .docs-page .docs-sidebar.dark-sidebar { - background: #191919; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select { - border: 1px solid #333; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control, .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { - background: #191919; - border-color: #191919; - color: #999; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control { - background: #191919; - border-color: #191919; - color: #999; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder { - color: #999; - opacity: .5; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label { - background: #333; - border-color: #333; - color: #ddd; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control { - background: #333; - color: #999; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select { - border: 0; - border-radius: 6px; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa { - color: #aaa; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a { - color: #aaa; - border-bottom: 0; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover { - color: #fff; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon { - font-size: .85em; - transition: .3s; - width: 18px; - height: 18px; - text-align: center; - padding: 0; - line-height: 1; - border-radius: 50%; - margin-right: 4px; - position: absolute; - left: 2px; - top: 11px; - color: #aaa; - cursor: default; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link { - color: #555; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right { - cursor: pointer; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link { - top: 11px; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle { - color: #555; - padding: 7px 0; - display: block; - border-bottom: 0; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a { - color: #fff; - transition: .4s; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span .fa { - color: #fff; } - .docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree > a span:not(.last-link) .fa { - transform: rotate(90deg); - color: #fff; } - .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand { - color: #fff; - text-transform: uppercase; - white-space: unset; } - .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .go-back-site { - color: #fff; } - .docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-logo-desc { - color: #ddd; } } + max-width: 1080px; } } @media (min-width: 1366px) { .container { @@ -420,30 +439,21 @@ left: 0; width: 100%; z-index: 100; - background: #f5f7f9; + background: #1d1d1d; display: none; } .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter { padding: 0 0 1rem !important; } - .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version label { - width: 36px; - text-align: center; - padding-left: 0; - padding-right: 0; - display: inline-block; - line-height: 26px; } - .docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version input.form-control { - padding-left: 12px !important; } .docs-page .docs-sidebar .docs-top .navbar-logo { padding: 0rem; padding-top: .3rem; display: block; text-align: center; } .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand { - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 700; display: block; margin-right: 0em; - padding: 7px 0 10px; + padding: 10px 0 15px; text-transform: uppercase; } .docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo { width: 110px; } diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css index 2111ae8075..9a3b7d32e5 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.min.css @@ -1 +1 @@ -body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{color:#007bff;text-decoration:none;}.docs-page .docs-sidebar{background:#f5f7f9;padding-right:1rem;position:relative;top:0;left:0;position:fixed;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{background:none;background:#fff;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;border:1px solid #e9ecef;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:.375rem .6rem;font-size:.9rem;width:32px;height:30px;line-height:1;border-radius:0;border:1px solid #e9ecef;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px;border:0;min-height:30px;height:30px;font-size:.85em;border-radius:1px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding-left:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 220px);overflow-y:auto;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.935em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.5rem;color:#000;font-weight:700;padding:20px 0 10px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;min-height:40px;}.docs-page .docs-content .docs-link-btns a{color:#999;}.docs-page .docs-content .docs-link-btns a:hover{color:#444;text-decoration:none;}.docs-page .docs-content .docs-link-btns .twitter{color:#00acee;}.docs-page .docs-content .docs-link-btns .linkedin{color:#0077b5;}.docs-page .docs-content .docs-link-btns .email{color:#5a5a5a;}.docs-page .docs-content .docs-link-btns .share-button{margin-left:10px;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:2px solid #808080;padding:1em;background-color:#eee;padding-bottom:.2em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .docs-page-index{min-height:96vh;}.docs-page .docs-page-index #scroll-index{max-height:96vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}@media(min-width:1100px){.container{max-width:1080px;}.docs-page .docs-sidebar.dark-sidebar{background:#191919;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select{border:1px solid #333;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#191919;border-color:#191919;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#191919;border-color:#191919;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#999;opacity:.5;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#333;border-color:#333;color:#ddd;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;}.docs-page .docs-sidebar.dark-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#f5f7f9;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version label{width:36px;text-align:center;padding-left:0;padding-right:0;display:inline-block;line-height:26px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version input.form-control{padding-left:12px !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.5rem;font-weight:700;display:block;margin-right:0;padding:7px 0 10px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;} \ No newline at end of file +body{position:relative;}.docs-page{background:#f5f7f9;}.docs-page .anchorjs-link{transition:all .25s linear;}.docs-page *:hover>.anchorjs-link{margin-left:-1.125em !important;transition:color .25s linear;color:#808080;}.docs-page .anchorjs-link:hover{text-decoration:none;}.docs-page .docs-sidebar{padding-right:1rem;position:relative;top:0;left:0;position:fixed;background:#1d1d1d;}.docs-page .docs-sidebar .input-group{border-radius:5px;overflow:hidden;}.docs-page .docs-sidebar .docs-sidebar-wrapper{width:270px;float:right;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control{border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version{position:relative;padding:0 1rem;margin:.25rem 0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select{border-radius:3px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text{padding:0 10px;font-size:.9rem;width:26px;height:34px;line-height:1;border-radius:0;border:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select .input-group-text i{color:#666;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{padding:0 10px 2px 10px;border:0;min-height:34px;height:34px;font-size:.9em;border-radius:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control:visited,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:focus,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:active,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:hover,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control:visited{box-shadow:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control{padding:0 10px 2px 6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter{padding:0 1rem;margin:.5rem 0;font-size:.9em;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{height:100vh;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list>ul{display:block;height:calc(100vh - 320px);overflow-y:auto;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul{font-size:.935em;list-style:none;padding:0 1rem;margin:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li{margin-left:0;padding-left:24px;display:block;width:100%;position:relative;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#999;font-weight:700;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#000;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a.last-link{top:11px;color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .badge{text-transform:uppercase;font-size:9px;position:relative;letter-spacing:.125px;top:-2px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#999;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li a{font-weight:400;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul{padding:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li ul li ul li a{font-weight:300;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#000;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>span .fa{transform:rotate(90deg);color:#007bff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree.last-link>span .fa{transform:rotate(0deg);}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.35rem;color:#000;font-weight:700;padding:15px 0 15px;line-height:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand strong{font-weight:300;text-transform:uppercase;font-size:.7em;letter-spacing:1px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#000;opacity:.65;transition:.2s;font-size:.8em;font-weight:300;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site:hover{text-decoration:none;opacity:1;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:.85em;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc strong{display:block;}.docs-page .docs-content{overflow-x:scroll;min-height:100vh;}.docs-page .docs-content .contributors{position:absolute;top:15px;right:5px;}.docs-page .docs-content .contributors .contributors-avatar{border-radius:21px;width:21px;height:21px;}.docs-page .docs-content .contributors a{padding:0;width:21px;height:21px;display:inline-block;margin:0 0 0 2px;}.docs-page .docs-content .contributors a:hover{text-decoration:none;}.docs-page .docs-content .docs-link-btns{border-bottom:1px solid #f4f5f7;background:#fdfdfd;padding:10px 20px;margin:0 -15px;text-align:right;font-size:.8em;min-height:40px;}.docs-page .docs-content .docs-link-btns a{color:#999;}.docs-page .docs-content .docs-link-btns a:hover{color:#444;text-decoration:none;}.docs-page .docs-content .docs-link-btns .twitter{color:#00acee;}.docs-page .docs-content .docs-link-btns .linkedin{color:#0077b5;}.docs-page .docs-content .docs-link-btns .email{color:#5a5a5a;}.docs-page .docs-content .docs-link-btns .share-button{margin-left:10px;}.docs-page .docs-content .docs-text-field{padding:2rem;}.docs-page .docs-content article.docs-body{word-break:break-word;}.docs-page .docs-content article.docs-body h1{padding-top:1rem;font-size:2.25rem;padding-bottom:10px;}.docs-page .docs-content article.docs-body h2{padding-top:2rem;padding-bottom:10px;font-size:2rem;}.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{padding-top:20px;padding-bottom:5px;font-size:1.5rem;}.docs-page .docs-content article.docs-body h1,.docs-page .docs-content article.docs-body h2,.docs-page .docs-content article.docs-body h3,.docs-page .docs-content article.docs-body h4,.docs-page .docs-content article.docs-body h5,.docs-page .docs-content article.docs-body h6{position:relative;}.docs-page .docs-content article.docs-body h1 .anchor,.docs-page .docs-content article.docs-body h2 .anchor,.docs-page .docs-content article.docs-body h3 .anchor,.docs-page .docs-content article.docs-body h4 .anchor,.docs-page .docs-content article.docs-body h5 .anchor,.docs-page .docs-content article.docs-body h6 .anchor{position:absolute;right:-26px;font-size:18px;bottom:5px;color:#999;opacity:0;transition:.5s;}.docs-page .docs-content article.docs-body h1:hover .anchor,.docs-page .docs-content article.docs-body h2:hover .anchor,.docs-page .docs-content article.docs-body h3:hover .anchor,.docs-page .docs-content article.docs-body h4:hover .anchor,.docs-page .docs-content article.docs-body h5:hover .anchor,.docs-page .docs-content article.docs-body h6:hover .anchor{opacity:1;}.docs-page .docs-content article.docs-body .blockquote{margin-bottom:1rem;margin-left:0;border-left:3px solid #d2dbe4;padding:1em 1.5em;background-color:#e9edf1;padding-bottom:.2em;font-size:1em;}.docs-page .docs-content article.docs-body img{max-width:100%;border:1px solid #f4f5f7;margin:15px 0 25px;box-shadow:0 0 45px #f8f9fa;border-radius:6px;}.docs-page .docs-content article.docs-body table{display:block;overflow:auto;width:100%;}.docs-page .docs-content article.docs-body table thead tr{border-bottom:2px inset;}.docs-page .docs-content article.docs-body table th{font-weight:600;}.docs-page .docs-content article.docs-body table td,.docs-page .docs-content article.docs-body table th{border:1px solid #dfe2e5;padding:6px 13px;}.docs-page .docs-content article.docs-body table tr{background-color:#fff;border-top:1px solid #c6cbd1;}.docs-page .docs-content article.docs-body table tr:nth-child(2n){background-color:#f6f8fa;}.docs-page .docs-content article.docs-body table img{background-color:initial;}.docs-page .docs-page-index{min-height:96vh;}.docs-page .docs-page-index #scroll-index{max-height:96vh;}.docs-page .docs-page-index .docs-inner-anchors{position:fixed;top:0;padding:10px;font-size:.9em;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills{font-size:.92em;margin-left:15px;border-left:1px solid #eee;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link{padding:3px 14px 4px;color:#aaa;line-height:1.2;position:relative;border-left:1px solid #eee;border-radius:0;margin-left:-1px;margin-top:1px;margin-bottom:1px;transition:.2s;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-link.active{border-left:1px solid #007bff;background:none;color:#007bff;font-weight:normal;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .navbar .nav-pills .nav-pills .nav-pills .nav-link.active{color:#007bff;}.docs-page .docs-page-index .docs-inner-anchors .index-scroll{margin-left:-30px;}.docs-page .docs-page-index .docs-inner-anchors .docs-anchors-wrapper{max-width:300px;float:left;}.docs-page .docs-page-index .scroll-top-btn{display:none;font-size:.85em;color:#aaa;text-decoration:none;padding-left:18px;}.docs-page .docs-page-index .scroll-top-btn.showup{display:block;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select select.form-control,.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control{background:#000;color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select input.form-control::placeholder{color:#fff;opacity:.5;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-version .version-select label{background:#000;border-color:#000;color:#ddd;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .form-control{background:#333;color:#999;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter select{border:0;border-radius:6px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-filter .filter-icon i.fa{color:#aaa;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a{color:#aaa;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a:hover{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon{font-size:.85em;transition:.3s;width:18px;height:18px;text-align:center;padding:0;line-height:1;border-radius:50%;margin-right:4px;position:absolute;left:2px;top:11px;color:#aaa;cursor:default;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-long-arrow-right.no-link{color:#555;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon .fa-chevron-right{cursor:pointer;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li a .plus-icon.last-link{top:11px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li span.tree-toggle{color:#555;padding:7px 0;display:block;border-bottom:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a{color:#fff;transition:.4s;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span .fa{color:#fff;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list ul li.selected-tree>a span:not(.last-link) .fa{transform:rotate(90deg);color:#fff;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{color:#fff;text-transform:uppercase;white-space:unset;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{color:#fff;text-align:center;display:block;width:100%;background:#444;padding:6px 0 8px;border-radius:5px;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{color:#ddd;}@media(min-width:1100px){.container{max-width:1080px;}}@media(min-width:1366px){.container{max-width:1340px;}}@media(min-width:1440px){.container{max-width:1400px;}}@media(max-width:767px){.docs-page .docs-content article.docs-body h1{padding-top:1.5rem;}.docs-page{background:#f5f7f9;}.docs-page>.container-fluid{display:block;}.docs-page>.container-fluid>.row{display:block;}.docs-page .docs-sidebar{position:fixed;max-width:100%;width:100%;display:block;padding:0 !important;top:0;left:0;z-index:100;right:0;}.docs-page .docs-sidebar .docs-sidebar-wrapper{max-width:100%;width:100%;top:0;position:relative;margin:0 !important;height:72px;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list{padding:.5rem 1.5rem 2rem 1.5rem;position:fixed;top:70px;font-size:17px;left:0;width:100%;z-index:100;background:#1d1d1d;display:none;}.docs-page .docs-sidebar .docs-sidebar-wrapper .docs-tree-list .docs-filter{padding:0 0 1rem !important;}.docs-page .docs-sidebar .docs-top .navbar-logo{padding:0;padding-top:.3rem;display:block;text-align:center;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand{font-size:1.25rem;font-weight:700;display:block;margin-right:0;padding:10px 0 15px;text-transform:uppercase;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-brand .docs-logo{width:110px;}.docs-page .docs-sidebar .docs-top .navbar-logo .go-back-site{display:none;}.docs-page .docs-sidebar .docs-top .navbar-logo .navbar-logo-desc{font-size:1em;display:none;}.docs-page .docs-sidebar .docs-top .open-dmenu{position:absolute;top:10px;left:20px;}.docs-page .docs-content{padding-top:72px;max-width:100%;display:block !important;}.docs-page .docs-content .docs-text-field{padding:1rem 1.5rem;}.docs-page .docs-page-index{display:none;}}.for-mobile{display:none;}.for-desktop{display:inline-block;}pre[class*="language-"]{padding:1.4em 2em !important;margin:15px 0 25px !important;border-radius:6px;}code{padding:.2em .4em;margin:0;font-size:82%;background-color:#f0f1f3;border-radius:3px;color:#28a745;}pre code{padding:0;}pre .token.keyword{color:#569cd6;}pre .token.atrule,pre .token.attr-value,pre .token.function,pre .token.class-name{color:#d69d85;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#191919 !important;}div.code-toolbar>.toolbar span{cursor:default;}div.code-toolbar>.toolbar a{cursor:copy;}@media(max-width:767px){body{font-size:14px;}.for-mobile{display:inline-block;}.for-desktop{display:none;}.close-mmenu,.close-dmenu{position:absolute;top:-78px;left:25px;color:#fff;font-size:68px;background:#fff;opacity:0;}.navbar{padding:.5rem 1.75rem;}.navbar .navbar-collapse{background:#38003d;position:fixed;top:86px;left:0;width:100%;height:100vh;height:calc(100vh - 86px);z-index:100 !important;}.navbar .navbar-collapse .navbar-nav{height:100vh;padding:20px 30px;overflow:auto;}.navbar .navbar-collapse .navbar-nav .nav-link{padding:1.2rem !important;}.navbar .navbar-toggler{padding:.5rem .75rem;font-size:1.5rem;line-height:1;background-color:transparent;border:0;border-radius:.25rem;color:#fff !important;margin-left:-1rem;}.section-with-logos img{margin:15px;opacity:1;-webkit-filter:grayscale(0%);filter:grayscale(0%);}span.code-arrow{padding:0 0 0;display:block;transform:rotate(90deg);font-size:2em;}.mb-5,.my-5{margin-bottom:2rem !important;}}@media screen and (max-width:767px){.navbar-logo .navbar-brand{display:inline-block;margin:0 auto !important;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}}.alert-criteria{padding:1.25em 1.5em;max-width:100%;}.alert-criteria p.alert-p{font-size:.96em;}.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.96em;}@media screen and (max-width:767px){.alert-criteria .input-group .input-group-text,.alert-criteria .input-group .form-control{font-size:.88em;}}.alert-criteria .input-group .input-group-text{color:#004085;background-color:#bddcfd;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .input-group-text{display:none;}}.alert-criteria .input-group .form-control{color:#004085;background-color:#fff;border:1px solid #bddcfd;}@media screen and (max-width:1366px){.alert-criteria .input-group .form-control{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;}}.scrolledMore{padding-top:107px;}.scrolledMore .alert-criteria{position:fixed;top:0;z-index:10;border:0;border-radius:0;margin-left:-47px;padding:.5em .75em;}@media screen and (max-width:767px){.scrolledMore .alert-criteria{top:72px;margin-left:-36px;}}.scrolledMore .alert-criteria p.alert-p{display:none;} \ No newline at end of file diff --git a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss index 771070f775..de56885610 100644 --- a/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss +++ b/modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss @@ -16,19 +16,20 @@ body { } .anchorjs-link:hover { - color: #007bff; text-decoration: none; } .docs-sidebar { - background: #f5f7f9; padding-right: 1rem; position: relative; top: 0px; left: 0; position: fixed; - - .docs-language { + background: #1d1d1d; + + .input-group { + border-radius: 5px; + overflow: hidden; } .docs-sidebar-wrapper { @@ -36,8 +37,6 @@ body { float: right; input.form-control { - background: none; - background: #fff; border: 0; &:focus, &:active, &:hover, &:visited { @@ -52,25 +51,28 @@ body { .version-select { border-radius: 3px; - border: 1px solid #e9ecef; .input-group-text { - padding: 0.375rem 0.6rem; + padding: 0 10px; font-size: .9rem; - width: 32px; - height: 30px; + width: 26px; + height: 34px; line-height: 1; border-radius: 0px; - border: 1px solid #e9ecef; + border: 0; + + i { + color: #666; + } } select.form-control, input.form-control { - padding: 0 10px; + padding: 0 10px 2px 10px; border: 0; - min-height: 30px; - height: 30px; - font-size: .85em; - border-radius: 1px; + min-height: 34px; + height: 34px; + font-size: .9em; + border-radius: 0px; &:focus, &:active, &:hover, &:visited { box-shadow: none; @@ -78,10 +80,7 @@ body { } select.form-control { - padding-left: 6px; - } - - label { + padding: 0 10px 2px 6px; } } } @@ -104,7 +103,7 @@ body { > ul { display: block; - height: calc(100vh - 220px); + height: calc(100vh - 320px); overflow-y: auto; } @@ -139,6 +138,14 @@ body { } } + .badge { + text-transform: uppercase; + font-size: 9px; + position: relative; + letter-spacing: .125px; + top: -2px; + } + span.tree-toggle { color: #999; padding: 7px 0; @@ -224,16 +231,16 @@ body { .docs-top { .navbar-logo { .navbar-brand { - font-size: 1.5rem; + font-size: 1.35rem; color: #000; font-weight: 700; - padding: 20px 0 10px; + padding: 15px 0 15px; line-height: 1; strong { font-weight: 300; text-transform: uppercase; - font-size: .7em; + font-size: .7em; letter-spacing: 1px; } } @@ -264,6 +271,7 @@ body { .docs-content { overflow-x: scroll; + min-height: 100vh; .contributors { position: absolute; @@ -372,10 +380,11 @@ body { .blockquote { margin-bottom: 1rem; margin-left: 0; - border-left: 2px solid gray; - padding: 1em; - background-color: #eee; - padding-bottom: .2em + border-left: 3px solid #d2dbe4; + padding: 1em 1.5em; + background-color: #e9edf1; + padding-bottom: .2em; + font-size: 1em; } img { @@ -433,10 +442,9 @@ body { .docs-inner-anchors { position: fixed; top: 0px; - /* max-width: 270px; */ padding: 10px; font-size: .90em; - /* height: 100vh; */ + .navbar { .nav-pills { font-size: .92em; @@ -508,163 +516,189 @@ body { } -@media (min-width: 1100px) { - .container { - max-width: 1080px; - } - - .docs-page { - .docs-sidebar { - &.dark-sidebar { - background: #191919; - - .docs-sidebar-wrapper { - - .docs-version { - .version-select { - border: 1px solid #333; +.docs-page { + .docs-sidebar { + .docs-sidebar-wrapper { - select.form-control, input.form-control { - background: #191919; - border-color: #191919; - color: #999; - } + .docs-version { + .version-select { - input.form-control { - background: #191919; - border-color: #191919; - color: #999; + select.form-control, input.form-control { + background: #000000; + color: white; + } - &::placeholder { - color: #999; - opacity: .5; - } - } + input.form-control { + background: #000000; + color: white; - label { - background: #333; - border-color: #333; - color: #ddd; - } + &::placeholder { + color: white; + opacity: .5; } } - .docs-filter { - .form-control { - background: #333; - color: #999; - } + label { + background: #000000; + border-color: #000000; + color: #ddd; + } + } + } - select { - border: 0; - border-radius: 6px; - } + .docs-filter { + .form-control { + background: #333; + color: #999; + } - .filter-icon { - i.fa { - color: #aaa; - } - } - } + select { + border: 0; + border-radius: 6px; + } - .docs-tree-list { - ul { - li { + .filter-icon { + i.fa { + color: #aaa; + } + } + } + .docs-tree-list { + ul { + li { - a { - color: #aaa; - border-bottom: 0; - &:hover { - color: #fff; - } + a { + color: #aaa; + border-bottom: 0; - .plus-icon { - font-size: .85em; - transition: .3s; - width: 18px; - height: 18px; - text-align: center; - padding: 0; - line-height: 1; - border-radius: 50%; - margin-right: 4px; - position: absolute; - left: 2px; - top: 11px; - color: #aaa; - cursor: default; - - .fa-long-arrow-right { - &.no-link { - color: #555; - } - } + &:hover { + color: #fff; + } - .fa-chevron-right { - cursor: pointer; - } + .plus-icon { + font-size: .85em; + transition: .3s; + width: 18px; + height: 18px; + text-align: center; + padding: 0; + line-height: 1; + border-radius: 50%; + margin-right: 4px; + position: absolute; + left: 2px; + top: 11px; + color: #aaa; + cursor: default; - &.last-link { - top: 11px; - } + .fa-long-arrow-right { + &.no-link { + color: #555; } } + .fa-chevron-right { + cursor: pointer; + } - span.tree-toggle { - color: #555; - padding: 7px 0; - display: block; - border-bottom: 0; + &.last-link { + top: 11px; } + } + } - &.selected-tree { - > a { - color: #fff; - transition: .4s; + span.tree-toggle { + color: #555; + padding: 7px 0; + display: block; + border-bottom: 0; + } - span { - .fa { - color: #fff; - } - &:not(.last-link) .fa { - transform: rotate(90deg); - color: #fff; - } - } + &.selected-tree { + > a { + color: #fff; + transition: .4s; + + span { + .fa { + color: #fff; + } + + &:not(.last-link) .fa { + transform: rotate(90deg); + color: #fff; } } } } } } + } + } - .docs-top { - .navbar-logo { - .navbar-brand { - color: #fff; - text-transform: uppercase; - white-space: unset; - } + .docs-top { + .navbar-logo { + .navbar-brand { + color: #fff; + text-transform: uppercase; + white-space: unset; + } - .go-back-site { - color: #fff; - } + .go-back-site { + color: #fff; + text-align: center; + display: block; + width: 100%; + background: #444; + padding: 6px 0 8px; + border-radius: 5px; + } - .navbar-logo-desc { - color: #ddd; - } - } + .navbar-logo-desc { + color: #ddd; } } } } } + + + + + + + + + + + + + + + + + + + + + + + + + + +@media (min-width: 1100px) { + .container { + max-width: 1080px; + } + +} + @media (min-width: 1366px) { .container { max-width: 1340px; @@ -720,7 +754,7 @@ body { left: 0; width: 100%; z-index: 100; - background: #f5f7f9; + background: #1d1d1d; display: none; .docs-filter { @@ -732,17 +766,6 @@ body { } .docs-version { - label { - width: 36px; - text-align: center; - padding-left: 0; - padding-right: 0; - display: inline-block; - line-height: 26px; - } - input.form-control { - padding-left: 12px !important; - } } } @@ -754,11 +777,11 @@ body { text-align: center; .navbar-brand { - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 700; display: block; margin-right: 0em; - padding: 7px 0 10px; + padding: 10px 0 15px; text-transform: uppercase; .docs-logo { @@ -971,6 +994,7 @@ div.code-toolbar > .toolbar a { background-color: #bddcfd; border: 1px solid #bddcfd; + @media screen and (max-width: 1366px) { display: none; } @@ -1009,4 +1033,5 @@ div.code-toolbar > .toolbar a { display: none; } } -} \ No newline at end of file +} + \ No newline at end of file diff --git a/npm/ng-packs/angular.json b/npm/ng-packs/angular.json index d0289505fe..af185688b2 100644 --- a/npm/ng-packs/angular.json +++ b/npm/ng-packs/angular.json @@ -526,5 +526,5 @@ } } }, - "defaultProject": "core" + "defaultProject": "dev-app" } diff --git a/npm/ng-packs/apps/dev-app/src/app/app.module.ts b/npm/ng-packs/apps/dev-app/src/app/app.module.ts index f1324c233a..64f8150f01 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts @@ -21,9 +21,6 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; imports: [ CoreModule.forRoot({ environment, - requirements: { - layouts: LAYOUTS, - }, }), ThemeSharedModule.forRoot(), AccountConfigModule.forRoot({ redirectUrl: '/' }), diff --git a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts index 7fc1826efe..c07f11580f 100644 --- a/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts +++ b/npm/ng-packs/packages/core/src/lib/components/dynamic-layout.component.ts @@ -1,12 +1,12 @@ -import { Component, Input, OnDestroy, Type, Injector } from '@angular/core'; +import { Component, OnDestroy, Type } from '@angular/core'; import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router'; -import { Select, Store } from '@ngxs/store'; -import { Observable } from 'rxjs'; +import { Store } from '@ngxs/store'; import snq from 'snq'; import { eLayoutType } from '../enums/common'; -import { Config } from '../models/config'; import { ABP } from '../models/common'; +import { ReplaceableComponents } from '../models/replaceable-components'; import { ConfigState } from '../states/config.state'; +import { ReplaceableComponentsState } from '../states/replaceable-components.state'; import { takeUntilDestroy } from '../utils/rxjs-utils'; @Component({ @@ -20,24 +20,10 @@ import { takeUntilDestroy } from '../utils/rxjs-utils'; `, }) export class DynamicLayoutComponent implements OnDestroy { - @Select(ConfigState.getOne('requirements')) requirements$: Observable; - layout: Type; constructor(private router: Router, private route: ActivatedRoute, private store: Store) { - const { - requirements: { layouts }, - routes, - } = this.store.selectSnapshot(ConfigState.getAll); - - if ((this.route.snapshot.data || {}).layout) { - this.layout = layouts - .filter(l => !!l) - .find( - (l: any) => - snq(() => l.type.toLowerCase().indexOf(this.route.snapshot.data.layout), -1) > -1, - ); - } + const { routes } = this.store.selectSnapshot(ConfigState.getAll); router.events.pipe(takeUntilDestroy(this)).subscribe(event => { if (event instanceof NavigationEnd) { @@ -45,15 +31,24 @@ export class DynamicLayoutComponent implements OnDestroy { { path: router.url.replace('/', '') }, ] as any); - const layout = (this.route.snapshot.data || {}).layout || findLayout(segments, routes); + const layouts = { + application: this.getComponent('Theme.ApplicationLayoutComponent'), + account: this.getComponent('Theme.AccountLayoutComponent'), + empty: this.getComponent('Theme.EmptyLayoutComponent'), + }; - this.layout = layouts - .filter(l => !!l) - .find((l: any) => snq(() => l.type.toLowerCase().indexOf(layout), -1) > -1); + const expectedLayout = + (this.route.snapshot.data || {}).layout || findLayout(segments, routes); + + this.layout = layouts[expectedLayout].component; } }); } + private getComponent(key: string): ReplaceableComponents.ReplaceableComponent { + return this.store.selectSnapshot(ReplaceableComponentsState.getComponent(key)); + } + ngOnDestroy() {} } diff --git a/npm/ng-packs/packages/core/src/lib/models/common.ts b/npm/ng-packs/packages/core/src/lib/models/common.ts index 8b4fb76cb0..79792a1b61 100644 --- a/npm/ng-packs/packages/core/src/lib/models/common.ts +++ b/npm/ng-packs/packages/core/src/lib/models/common.ts @@ -6,7 +6,11 @@ import { Subject } from 'rxjs'; export namespace ABP { export interface Root { environment: Partial; - requirements: Config.Requirements; + /** + * + * @deprecated To be deleted in v3.0 + */ + requirements?: Config.Requirements; } export type PagedResponse = { diff --git a/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts index 54a602b84a..0a123b6a4f 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/dynamic-layout.component.spec.ts @@ -1,36 +1,36 @@ import { Component, NgModule } from '@angular/core'; import { ActivatedRoute, RouterModule } from '@angular/router'; -import { createRoutingFactory, SpectatorRouting, SpyObject } from '@ngneat/spectator/jest'; -import { Store } from '@ngxs/store'; +import { createRoutingFactory, SpectatorRouting } from '@ngneat/spectator/jest'; +import { NgxsModule, Store } from '@ngxs/store'; +import { DynamicLayoutComponent, RouterOutletComponent } from '../components'; import { eLayoutType } from '../enums'; import { ABP } from '../models'; -import { DynamicLayoutComponent, RouterOutletComponent } from '../components'; +import { ConfigState, ReplaceableComponentsState } from '../states'; +import { ApplicationConfigurationService } from '../services'; @Component({ selector: 'abp-layout-application', template: '', }) -class DummyApplicationLayoutComponent { - static type = eLayoutType.application; -} +class DummyApplicationLayoutComponent {} @Component({ selector: 'abp-layout-account', template: '', }) -class DummyAccountLayoutComponent { - static type = eLayoutType.account; -} +class DummyAccountLayoutComponent {} @Component({ selector: 'abp-layout-empty', template: '', }) -class DummyEmptyLayoutComponent { - static type = eLayoutType.empty; -} +class DummyEmptyLayoutComponent {} -const LAYOUTS = [DummyApplicationLayoutComponent, DummyAccountLayoutComponent, DummyEmptyLayoutComponent]; +const LAYOUTS = [ + DummyApplicationLayoutComponent, + DummyAccountLayoutComponent, + DummyEmptyLayoutComponent, +]; @NgModule({ imports: [RouterModule], @@ -47,13 +47,57 @@ class DummyComponent { constructor(public route: ActivatedRoute) {} } +const storeData = { + ConfigState: { + routes: [ + { + path: '', + wrapper: true, + children: [ + { + path: 'parentWithLayout', + layout: eLayoutType.application, + children: [ + { path: 'childWithoutLayout' }, + { path: 'childWithLayout', layout: eLayoutType.account }, + ], + }, + ], + }, + { path: 'withData', layout: eLayoutType.application }, + , + ] as ABP.FullRoute[], + environment: { application: {} }, + }, + ReplaceableComponentsState: { + replaceableComponents: [ + { + key: 'Theme.ApplicationLayoutComponent', + component: DummyApplicationLayoutComponent, + }, + { + key: 'Theme.AccountLayoutComponent', + component: DummyAccountLayoutComponent, + }, + { + key: 'Theme.EmptyLayoutComponent', + component: DummyEmptyLayoutComponent, + }, + ], + }, +}; + describe('DynamicLayoutComponent', () => { const createComponent = createRoutingFactory({ component: RouterOutletComponent, stubsEnabled: false, - mocks: [Store], declarations: [DummyComponent, DynamicLayoutComponent], - imports: [RouterModule, DummyLayoutModule], + mocks: [ApplicationConfigurationService], + imports: [ + RouterModule, + DummyLayoutModule, + NgxsModule.forRoot([ConfigState, ReplaceableComponentsState]), + ], routes: [ { path: '', component: RouterOutletComponent }, { @@ -100,33 +144,13 @@ describe('DynamicLayoutComponent', () => { }); let spectator: SpectatorRouting; - let store: SpyObject; - const mockStoreData = { - requirements: { layouts: LAYOUTS }, - routes: [ - { - path: '', - wrapper: true, - children: [ - { - path: 'parentWithLayout', - layout: eLayoutType.application, - children: [{ path: 'childWithoutLayout' }, { path: 'childWithLayout', layout: eLayoutType.account }], - }, - ], - }, - { path: 'withData', layout: eLayoutType.application }, - , - ] as ABP.FullRoute[], - environment: { application: {} }, - }; - let storeSpy: jest.SpyInstance; + let store: Store; beforeEach(async () => { spectator = createComponent(); store = spectator.get(Store); - storeSpy = jest.spyOn(store, 'selectSnapshot'); - storeSpy.mockReturnValue(mockStoreData); + + store.reset(storeData); }); it('should handle application layout from parent abp route and display it', async () => { @@ -159,7 +183,7 @@ describe('DynamicLayoutComponent', () => { }); it('should not display any layout when layouts are empty', async () => { - storeSpy.mockReturnValue({ ...mockStoreData, requirements: { layouts: [] } }); + store.reset({ ...storeData, ReplaceableComponentsState: {} }); spectator.detectChanges(); diff --git a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts index 33c7c18770..21fb1756bc 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/services/initial.service.ts @@ -1,12 +1,29 @@ +import { LazyLoadService, AddReplaceableComponent } from '@abp/ng.core'; import { Injectable } from '@angular/core'; -import { Router } from '@angular/router'; -import { LazyLoadService } from '@abp/ng.core'; +import { Store } from '@ngxs/store'; import styles from '../constants/styles'; +import { ApplicationLayoutComponent } from '../components/application-layout/application-layout.component'; +import { AccountLayoutComponent } from '../components/account-layout/account-layout.component'; +import { EmptyLayoutComponent } from '../components/empty-layout/empty-layout.component'; @Injectable({ providedIn: 'root' }) export class InitialService { - constructor(private lazyLoadService: LazyLoadService) { + constructor(private lazyLoadService: LazyLoadService, private store: Store) { this.appendStyle().subscribe(); + this.store.dispatch([ + new AddReplaceableComponent({ + key: 'Theme.ApplicationLayoutComponent', + component: ApplicationLayoutComponent, + }), + new AddReplaceableComponent({ + key: 'Theme.AccountLayoutComponent', + component: AccountLayoutComponent, + }), + new AddReplaceableComponent({ + key: 'Theme.EmptyLayoutComponent', + component: EmptyLayoutComponent, + }), + ]); } appendStyle() { diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts index 5df354fb38..928dff5172 100644 --- a/templates/app/angular/src/app/app.module.ts +++ b/templates/app/angular/src/app/app.module.ts @@ -3,7 +3,6 @@ import { CoreModule } from '@abp/ng.core'; import { IdentityConfigModule } from '@abp/ng.identity.config'; import { SettingManagementConfigModule } from '@abp/ng.setting-management.config'; import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config'; -import { LAYOUTS } from '@abp/ng.theme.basic'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -20,10 +19,7 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; @NgModule({ imports: [ CoreModule.forRoot({ - environment, - requirements: { - layouts: LAYOUTS - } + environment }), ThemeSharedModule.forRoot(), AccountConfigModule.forRoot({ redirectUrl: '/' }), diff --git a/templates/module/angular/.prettierrc b/templates/module/angular/.prettierrc new file mode 100644 index 0000000000..5e2863a11f --- /dev/null +++ b/templates/module/angular/.prettierrc @@ -0,0 +1,5 @@ +{ + "printWidth": 100, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/templates/module/angular/src/app/app.module.ts b/templates/module/angular/src/app/app.module.ts index c0fef36c9a..93e09321ec 100644 --- a/templates/module/angular/src/app/app.module.ts +++ b/templates/module/angular/src/app/app.module.ts @@ -3,7 +3,6 @@ import { CoreModule } from '@abp/ng.core'; import { IdentityConfigModule } from '@abp/ng.identity.config'; import { SettingManagementConfigModule } from '@abp/ng.setting-management.config'; import { TenantManagementConfigModule } from '@abp/ng.tenant-management.config'; -import { LAYOUTS } from '@abp/ng.theme.basic'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -11,11 +10,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; import { NgxsModule } from '@ngxs/store'; import { OAuthModule } from 'angular-oauth2-oidc'; +import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { SharedModule } from './shared/shared.module'; -import { MyProjectNameConfigModule } from '../../projects/my-project-name-config/src/public-api'; const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; @@ -25,9 +24,6 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })]; ThemeSharedModule.forRoot(), CoreModule.forRoot({ environment, - requirements: { - layouts: LAYOUTS, - }, }), OAuthModule.forRoot(), NgxsModule.forRoot([]),