Merge pull request #12841 from abpframework/auto-merge/rel-5-2/1129

Merge branch rel-5.3 with rel-5.2

docs/en/UI/Angular/Breadcrumb.md

@@ -0,0 +1,50 @@
+## Breadcrumb Component
+
+ABP provides a component that listens to the angular router's `NavigationEnd`
+event and creates inputs for `BreadcrumbItemsComponent`. This component is used in
+ABP components with [`PageComponent`](./Page-Component.md).
+
+## Breadcrumb Items Component
+
+`BreadcrumbItemsComponent` is used to display breadcrumb items. It can be useful
+when you want to display breadcrumb items in a different way than the default.
+
+### Usage
+
+Example of overriding the default template of `PageComponent`:
+
+```html
+<abp-page title="Title">
+  <abp-page-breadcrumb-container>
+    <abp-breadcrumb-items [items]="breadCrumbItems"></abp-breadcrumb-items>
+  </abp-page-breadcrumb-container>
+</abp-page>
+```
+
+```js
+import { Component } from "@angular/core";
+import { ABP } from "@abp/ng.core";
+
+@Component({
+  /* component metadata */
+})
+export class YourComponent {
+  breadCrumbItems: ABP.Route[] = [
+    {
+      name: "Item 1",
+    },
+    {
+      name: "Item 2",
+      path: "/path",
+    },
+  ];
+}
+```
+
+### Inputs
+
+- items: Partial<ABP.Route>[] : Array of ABP.Route objects. The source code of ABP.Route can be found in [github](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/common.ts#L69).
+
+## See Also
+
+- [Page Component](./Page-Component.md)

npm/ng-packs/.gitignore

@@ -44,6 +44,9 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+yarn.lock
+package-lock.json
+
 
 # System Files
 .DS_Store

npm/ng-packs/package.json

@@ -71,7 +71,7 @@
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "~12.0.0-beta.4",
     "@ngneat/spectator": "^10.0.0",
-    "@ngx-validate/core": "^0.1.1",
+    "@ngx-validate/core": "^0.1.2",
     "@nrwl/angular": "13.10.3",
     "@nrwl/cli": "13.10.3",
     "@nrwl/cypress": "13.10.3",

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

@@ -26,9 +26,9 @@ export class FormSubmitDirective implements OnInit {
 
   @Input()
   notValidateOnSubmit: string | boolean;
-  
+
   @Input()
-  markAsDirtyWhenSubmit:  boolean = true
+  markAsDirtyWhenSubmit = true;
 
   @Output() readonly ngSubmit = new EventEmitter();
 
@@ -43,10 +43,10 @@ export class FormSubmitDirective implements OnInit {
 
   ngOnInit() {
     this.subscription.addOne(this.formGroupDirective.ngSubmit, () => {
-      if(this.markAsDirtyWhenSubmit){
+      if (this.markAsDirtyWhenSubmit) {
         this.markAsDirty();
       }
-      
+
       this.executedNgSubmit = true;
     });
 

npm/ng-packs/packages/theme-shared/package.json

@@ -10,7 +10,7 @@
     "@abp/ng.core": "~5.3.0-rc.3",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "~12.0.0-beta.4",
-    "@ngx-validate/core": "^0.1.1",
+    "@ngx-validate/core": "^0.1.2",
     "@popperjs/core": "~2.11.2",
     "@swimlane/ngx-datatable": "^19.0.0",
     "bootstrap": "^5.1.1",