Merge branch 'development' into fix-collapse-display-value

CHANGELOG.md

@@ -1,3 +1,29 @@
+# [7.1.0](https://github.com/valor-software/ngx-bootstrap/compare/v7.0.1...v7.1.0) (2021-08-27)
+
+
+### Features
+
+* **core:** added bootstrap5 support ([#6115](https://github.com/valor-software/ngx-bootstrap/issues/6115)) ([29c1e27](https://github.com/valor-software/ngx-bootstrap/commit/29c1e27b19d9dac9773f50e07355bb8d2f03113e))
+
+
+
+## [7.0.1](https://github.com/valor-software/ngx-bootstrap/compare/v7.0.0...v7.0.1) (2021-08-26)
+
+
+### Bug Fixes
+
+* **accordion:** fix isOpenChangeevent ([#6254](https://github.com/valor-software/ngx-bootstrap/issues/6254)) ([51808da](https://github.com/valor-software/ngx-bootstrap/commit/51808daf6befeaf0ef7d695e0299cc606f9cfb6f))
+* **documentation:** fix cdn links for bs4 ([#6215](https://github.com/valor-software/ngx-bootstrap/issues/6215)) ([a929485](https://github.com/valor-software/ngx-bootstrap/commit/a929485bf3142e70cfdf2d366aa833ab3a2e00d9))
+* **popover:** add fallback value if parseFloat on css fails ([69f68bd](https://github.com/valor-software/ngx-bootstrap/commit/69f68bdc8d7957b5a2005000f9454c9389914250))
+* **typeahead:** need to check if `_matches` is not undefined in the `blur` handler ([#6028](https://github.com/valor-software/ngx-bootstrap/issues/6028)) ([c0beddb](https://github.com/valor-software/ngx-bootstrap/commit/c0beddba14d5e1caca1dde298e08b390e7f91fd7))
+
+
+### Features
+
+* **modal:** edited id type ([b6bb985](https://github.com/valor-software/ngx-bootstrap/commit/b6bb985beeda9b39130b38bac5fd4472140e04d5))
+
+
+
 # [7.0.0](https://github.com/valor-software/ngx-bootstrap/compare/v6.2.0...v7.0.0) (2021-07-21)
 
 

README.md

@@ -6,7 +6,7 @@
 </a>
 
 <p align="center">
-The best way to quickly integrate <a href="https://getbootstrap.com/">Bootstrap 3</a> or <a href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
+The best way to quickly integrate <a href="https://getbootstrap.com/docs/5.1">Bootstrap 5</a> <a href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> or <a href="https://getbootstrap.com/">Bootstrap 3</a> Components with <a href="https://angular.io/">Angular</a>
 </p>
 
 <p align="center">
@@ -102,10 +102,10 @@ Add component to your page:
 ```
 
 You will need to add bootstrap css:
-- `Bootstrap 3`
+- `Bootstrap 5`
 ```
-<!-- index.html -->
-<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+<!--- index.html -->
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
 ```
 
 - `Bootstrap 4`
@@ -114,7 +114,11 @@ You will need to add bootstrap css:
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2">
 ```
 
-
+- `Bootstrap 3`
+```
+<!-- index.html -->
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+```
 
 ### Setting up the bootstrap version manually
 
@@ -152,6 +156,7 @@ Here is the versions compatibility list:
 
 | ngx-bootstrap |    Angular    |  Bootstrap CSS |
 | ------------- | ------------- | -------------- |
+| 7.1.0         | 11.x.x - 12.x.x | 5.x.x 4.x.x or 3.x.x |
 | 7.0.0         | 11.x.x - 12.x.x | 3.x.x or 4.x.x |
 | 6.0.0         | 9.x.x - 10.x.x | 3.x.x or 4.x.x |
 | 5.6.x         | 7.x.x - 9.1.0 | 3.x.x or 4.x.x |

apps/ngx-bootstrap-docs/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { DOCUMENT } from '@angular/common';
 import { AfterContentInit, Component, Inject } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, UrlSerializer } from '@angular/router';
 import { PageScrollService } from 'ngx-page-scroll-core';
-import { isBs3 } from 'ngx-bootstrap/utils';
 
 import { Analytics } from '@ngx-bootstrap-doc/docs';
 import { filter } from 'rxjs/operators';
@@ -13,9 +12,6 @@ import { filter } from 'rxjs/operators';
   templateUrl: './app.component.html'
 })
 export class AppComponent implements AfterContentInit {
-  get isBs3(): boolean {
-    return isBs3();
-  }
 
   constructor(
     private route: ActivatedRoute,

apps/ngx-bootstrap-docs/src/assets/css/style.scss

@@ -274,6 +274,7 @@ a:hover {
       font-size: 0.8125rem;
       line-height: 1.25;
       transition: all .15s ease-in-out;
+      border-radius: 0;
 
       &:first-of-type {
         border-radius: .25rem 0 0 .25rem;

apps/ngx-bootstrap-docs/src/assets/json/current-version.json

@@ -1,3 +1,3 @@
 {
-  "version": "7.0.0"
+  "version": "7.1.0"
 }

apps/ngx-bootstrap-docs/src/index.html

@@ -4,7 +4,7 @@
   <title>Angular Bootstrap</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="description" content="Bootstrap 3 and Bootstrap 4 widgets for Angular: autocomplete, accordion, alert, buttons, carousel, collapse, dropdown, pagination, popover, progressbar, rating, tabset, timepicker, tooltip, typeahead, sortable, tabs">
+  <meta name="description" content="Bootstrap 5 Bootstrap 4 and Bootstrap 3 widgets for Angular: accordion, alerts, buttons, carousel, collapse, datepicker, dropdowns, modals, pagination, popover, progressbar, rating, sortable, tabs, timepicker, tooltip, typeahead">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" type="image/png" sizes="32x32" href='assets/images/favicons/favicon-32x32.png'>

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -173,13 +173,13 @@ export const ngdoc: any = {
       {
         "name": "btnCheckboxFalse",
         "defaultValue": "false",
-        "type": "boolean",
+        "type": "AvailableValues",
         "description": "<p>Falsy value, will be set to ngModel</p>\n"
       },
       {
         "name": "btnCheckboxTrue",
         "defaultValue": "true",
-        "type": "boolean",
+        "type": "AvailableValues",
         "description": "<p>Truthy value, will be set to ngModel</p>\n"
       }
     ],
@@ -2969,7 +2969,7 @@ export const ngdoc: any = {
       },
       {
         "name": "id",
-        "type": "number",
+        "type": "string | number",
         "description": "<p>Allow user to ID for the modal. Otherwise, a unique number will be given</p>\n"
       },
       {
@@ -3070,7 +3070,7 @@ export const ngdoc: any = {
       },
       {
         "name": "id",
-        "type": "number",
+        "type": "string | number",
         "description": "<p>Allow user to ID for the modal. Otherwise, a unique number will be given</p>\n"
       },
       {
@@ -3523,7 +3523,7 @@ export const ngdoc: any = {
     "inputs": [
       {
         "name": "placement",
-        "type": "string",
+        "type": "AvailbleBSPositions",
         "description": ""
       },
       {
@@ -3616,7 +3616,7 @@ export const ngdoc: any = {
       {
         "name": "placement",
         "defaultValue": "top",
-        "type": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"auto\" | \"top left\" | \"top right\" | \"right top\" | \"right bottom\" | \"bottom right\" | \"bottom left\" | \"left bottom\" | \"left top\"",
+        "type": "AvailbleBSPositions",
         "description": "<p>Placement of a popover. Accepts: &quot;top&quot;, &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;</p>\n"
       },
       {
@@ -4573,7 +4573,7 @@ export const ngdoc: any = {
       {
         "name": "placement",
         "defaultValue": "top",
-        "type": "string",
+        "type": "AvailbleBSPositions",
         "description": "<p>Placement of a tooltip. Accepts: &quot;top&quot;, &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;</p>\n"
       },
       {
@@ -4625,7 +4625,7 @@ export const ngdoc: any = {
       },
       {
         "name": "tooltipPlacement",
-        "type": "string",
+        "type": "AvailbleBSPositions",
         "description": ""
       },
       {
@@ -5053,5 +5053,19 @@ export const ngdoc: any = {
     "description": "",
     "methods": [],
     "properties": []
+  },
+  "IObjectKeys": {
+    "fileName": "src/utils/theme-provider.ts",
+    "className": "IObjectKeys",
+    "description": "",
+    "methods": [],
+    "properties": []
+  },
+  "IBsVersion": {
+    "fileName": "src/utils/theme-provider.ts",
+    "className": "IBsVersion",
+    "description": "",
+    "methods": [],
+    "properties": []
   }
 };

libs/common-docs/src/lib/api-docs/analytics/analytics.ts

@@ -49,10 +49,15 @@ export class Analytics {
   /**
    * Sends an event.
    */
-  trackEvent(action: string, category: string): void {
+  trackEvent(action: string, category?: string): void {
     if (!this.enabled) {
       return;
     }
+
+    if (!category) {
+      return;
+    }
+
     if (typeof ga !== 'undefined') {
       ga('send', {
         hitType: 'event',

libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.html

@@ -1,16 +1,16 @@
 <div class="api-doc-component" (click)="trackSourceClick()">
   <h3 [attr.id]="headerAnchor">
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs.fileName}}"
-       target="_blank" rel="noopener">{{apiDocs.className}}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{apiDocs?.fileName}}"
+       target="_blank" rel="noopener">{{apiDocs?.className}}</a>
   </h3>
-  <p [innerHTML]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs?.description"></p>
 
-  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+  <ng-template [ngIf]="apiDocs?.properties && apiDocs?.properties?.length">
     <section>
       <h3>Properties</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let prop of apiDocs.properties">
+        <tr *ngFor="let prop of apiDocs?.properties">
           <td class="col-xs-3"><code>{{prop.name}}</code></td>
           <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
@@ -25,12 +25,12 @@ <h3>Properties</h3>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length">
+  <ng-template [ngIf]="apiDocs?.methods && apiDocs?.methods?.length">
     <section>
       <h3 id="methods">Methods</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let method of apiDocs.methods">
+        <tr *ngFor="let method of apiDocs?.methods">
           <td class="col-xs-3"><code>{{method.name}}</code></td>
           <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>

libs/common-docs/src/lib/api-docs/api-doc-class/api-doc-class.component.ts

@@ -20,7 +20,7 @@ import { ComponentApi } from '../../models/components-api.model';
 })
 export class NgApiDocClassComponent {
   headerAnchor?: string;
-  apiDocs: ClassDesc;
+  apiDocs?: ClassDesc;
 
   private analytics: Analytics;
   private docs: NgApiDoc;
@@ -30,14 +30,16 @@ export class NgApiDocClassComponent {
     this.analytics = analytics;
 
     this.headerAnchor = content.anchor;
-    this.apiDocs = this.docs[content.title];
+    if (content?.title) {
+      this.apiDocs = this.docs[content.title];
+    }
   }
 
   methodSignature(method: MethodDesc): string {
     return signature(method);
   }
 
   trackSourceClick(): void {
-    this.analytics.trackEvent('Source File View', this.apiDocs.className);
+    this.analytics.trackEvent('Source File View', this.apiDocs?.className);
   }
 }

libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.html

@@ -1,16 +1,16 @@
 <div (click)="trackSourceClick()" class="api-doc-component">
   <h3 [attr.id]="headerAnchor">
-    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs.fileName }}"
-       target="_blank" rel="noopener">{{ apiDocs.className }}</a>
+    <a href="https://github.com/valor-software/ngx-bootstrap/tree/development/{{ apiDocs?.fileName }}"
+       target="_blank" rel="noopener">{{ apiDocs?.className }}</a>
   </h3>
-  <p [innerHTML]="apiDocs.description"></p>
+  <p [innerHTML]="apiDocs?.description"></p>
 
-  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
+  <ng-template [ngIf]="apiDocs?.properties && apiDocs?.properties?.length">
     <section>
       <h3>Properties</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let prop of apiDocs.properties">
+        <tr *ngFor="let prop of apiDocs?.properties">
           <td class="col-xs-3"><code>{{ prop.name }}</code></td>
           <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
@@ -25,12 +25,12 @@ <h3>Properties</h3>
     </section>
   </ng-template>
 
-  <ng-template [ngIf]="apiDocs.methods && apiDocs.methods.length && this.isShowMethods">
+  <ng-template [ngIf]="apiDocs?.methods && apiDocs?.methods?.length && this.isShowMethods">
     <section>
       <h3>Methods</h3>
       <table class="table table-bordered">
         <tbody>
-        <tr *ngFor="let method of apiDocs.methods">
+        <tr *ngFor="let method of apiDocs?.methods">
           <td class="col-xs-3"><code>{{ method.name }}</code></td>
           <td class="col-xs-9">
             <div>

libs/common-docs/src/lib/api-docs/api-doc-config/api-doc-config.component.ts

@@ -24,7 +24,7 @@ const CONFIG_SUFFIX_LENGTH = 'Config'.length;
   templateUrl: './api-doc-config.component.html'
 })
 export class NgApiDocConfigComponent {
-  apiDocs: ClassDesc;
+  apiDocs?: ClassDesc;
   directiveName?: string;
   headerAnchor?: string;
   isShowMethods = false;
@@ -37,12 +37,14 @@ export class NgApiDocConfigComponent {
     this.docs = docs;
 
     this.headerAnchor = content.anchor;
-    this.apiDocs = this.docs[content.title];
+    if (content?.title) {
+      this.apiDocs = this.docs[content.title];
+    }
     this.isShowMethods = content.showMethods || this.isShowMethods;
     this.directiveName = content.title?.slice(0, -CONFIG_SUFFIX_LENGTH);
   }
 
   trackSourceClick(): void {
-    this.analytics.trackEvent('Source File View', this.apiDocs.className);
+    this.analytics.trackEvent('Source File View', this.apiDocs?.className);
   }
 }