Skip to content

Commit 29c1e27

Browse files
feat(core): added bootstrap5 support (#6115)
1 parent 3d6ee6d commit 29c1e27

File tree

126 files changed

+688
-358
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

126 files changed

+688
-358
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { DOCUMENT } from '@angular/common';
22
import { AfterContentInit, Component, Inject } from '@angular/core';
33
import { ActivatedRoute, NavigationEnd, Router, UrlSerializer } from '@angular/router';
44
import { PageScrollService } from 'ngx-page-scroll-core';
5-
import { isBs3 } from 'ngx-bootstrap/utils';
65

76
import { Analytics } from '@ngx-bootstrap-doc/docs';
87
import { filter } from 'rxjs/operators';
@@ -13,9 +12,6 @@ import { filter } from 'rxjs/operators';
1312
templateUrl: './app.component.html'
1413
})
1514
export class AppComponent implements AfterContentInit {
16-
get isBs3(): boolean {
17-
return isBs3();
18-
}
1915

2016
constructor(
2117
private route: ActivatedRoute,

apps/ngx-bootstrap-docs/src/assets/css/bootstrap-5.1.0/css/bootstrap.min.css

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

apps/ngx-bootstrap-docs/src/assets/css/bootstrap-5.1.0/css/bootstrap.min.css.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,7 @@ a:hover {
274274
font-size: 0.8125rem;
275275
line-height: 1.25;
276276
transition: all .15s ease-in-out;
277+
border-radius: 0;
277278

278279
&:first-of-type {
279280
border-radius: .25rem 0 0 .25rem;

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,13 @@ export const ngdoc: any = {
173173
{
174174
"name": "btnCheckboxFalse",
175175
"defaultValue": "false",
176-
"type": "boolean",
176+
"type": "AvailableValues",
177177
"description": "<p>Falsy value, will be set to ngModel</p>\n"
178178
},
179179
{
180180
"name": "btnCheckboxTrue",
181181
"defaultValue": "true",
182-
"type": "boolean",
182+
"type": "AvailableValues",
183183
"description": "<p>Truthy value, will be set to ngModel</p>\n"
184184
}
185185
],
@@ -2969,7 +2969,7 @@ export const ngdoc: any = {
29692969
},
29702970
{
29712971
"name": "id",
2972-
"type": "number",
2972+
"type": "string | number",
29732973
"description": "<p>Allow user to ID for the modal. Otherwise, a unique number will be given</p>\n"
29742974
},
29752975
{
@@ -3070,7 +3070,7 @@ export const ngdoc: any = {
30703070
},
30713071
{
30723072
"name": "id",
3073-
"type": "number",
3073+
"type": "string | number",
30743074
"description": "<p>Allow user to ID for the modal. Otherwise, a unique number will be given</p>\n"
30753075
},
30763076
{
@@ -3523,7 +3523,7 @@ export const ngdoc: any = {
35233523
"inputs": [
35243524
{
35253525
"name": "placement",
3526-
"type": "string",
3526+
"type": "AvailbleBSPositions",
35273527
"description": ""
35283528
},
35293529
{
@@ -3616,7 +3616,7 @@ export const ngdoc: any = {
36163616
{
36173617
"name": "placement",
36183618
"defaultValue": "top",
3619-
"type": "\"top\" | \"bottom\" | \"left\" | \"right\" | \"auto\" | \"top left\" | \"top right\" | \"right top\" | \"right bottom\" | \"bottom right\" | \"bottom left\" | \"left bottom\" | \"left top\"",
3619+
"type": "AvailbleBSPositions",
36203620
"description": "<p>Placement of a popover. Accepts: &quot;top&quot;, &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;</p>\n"
36213621
},
36223622
{
@@ -4573,7 +4573,7 @@ export const ngdoc: any = {
45734573
{
45744574
"name": "placement",
45754575
"defaultValue": "top",
4576-
"type": "string",
4576+
"type": "AvailbleBSPositions",
45774577
"description": "<p>Placement of a tooltip. Accepts: &quot;top&quot;, &quot;bottom&quot;, &quot;left&quot;, &quot;right&quot;</p>\n"
45784578
},
45794579
{
@@ -4625,7 +4625,7 @@ export const ngdoc: any = {
46254625
},
46264626
{
46274627
"name": "tooltipPlacement",
4628-
"type": "string",
4628+
"type": "AvailbleBSPositions",
46294629
"description": ""
46304630
},
46314631
{
@@ -5053,5 +5053,19 @@ export const ngdoc: any = {
50535053
"description": "",
50545054
"methods": [],
50555055
"properties": []
5056+
},
5057+
"IObjectKeys": {
5058+
"fileName": "src/utils/theme-provider.ts",
5059+
"className": "IObjectKeys",
5060+
"description": "",
5061+
"methods": [],
5062+
"properties": []
5063+
},
5064+
"IBsVersion": {
5065+
"fileName": "src/utils/theme-provider.ts",
5066+
"className": "IBsVersion",
5067+
"description": "",
5068+
"methods": [],
5069+
"properties": []
50565070
}
50575071
};

libs/common-docs/src/lib/common/discover/discover.component.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ <h1 align="center">
99
</h1>
1010

1111
<p align="center">
12-
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> or <a
13-
href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
12+
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3 </a>, <a
13+
href="https://getbootstrap.com/docs/4.0">Bootstrap 4 </a>, <a
14+
href="https://getbootstrap.com/docs/5.1">Bootstrap 5 </a> Components with <a href="https://angular.io/">Angular</a>
1415
</p>
1516

1617
<h2>Table of contents</h2>
@@ -49,12 +50,12 @@ <h2 id="releases">Versioning and Releases </h2>
4950
<div>We make all possible to make ngx-bootstrap wide-compatible. Compatibility table you can find in the <a target="_blank" href="#/documentation#compatibility">documentation</a>.</div>
5051
<div>All our issues , enhancements, feature requests, which would be taken into work first you can find in the nearest <a target="_blank" href="https://github.com/valor-software/ngx-bootstrap/milestones">Milestone</a>.</div>
5152

52-
<h2 id="compatibility">Changelog</h2>
53+
<h2 id="changelog">Changelog</h2>
5354
<p> All notable changes are described in the <a target="_blank" href="https://github.com/valor-software/ngx-bootstrap/blob/development/CHANGELOG.md">CHANGELOG.md</a> file.</p>
5455

5556
<h2 id="community">Community</h2>
5657

57-
<p>Chat with us on <a target="_blank" href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWQ5M2Y4OWM0OGJjNmZiOGYyNjFlZTdlOGI1YjcxYWQ2ODhiOTY4NzhiODgwMTIzNDczODIyNWNmM2RlYWRhNTg">Slack</a>.</p>
58+
<p>Chat with us on <a target="_blank" href="https://join.slack.com/t/ngx-home/shared_invite/enQtNTExMTY5MzcwMTM0LWVjZGU2MjI4MTVhMGVlMTc2OWRiMzA0NzBhNDU5YzQ0MDM3MWI5NzJjZTUzNzIxZmNjYmFlMjU2MzE0YmY0NWY">Slack</a>.</p>
5859
<p>For help using NGX-bootstrap, ask on <a target="_blank" href="https://stackoverflow.com/questions/tagged/ngx-bootstrap">StackOverflow</a> using the tag <b>ngx-bootstrap</b>.</p>
5960
<p>Follow our core team member <a href="https://twitter.com/valorkin" target="_blank">@valorkin</a> on Twitter.</p>
6061

libs/common-docs/src/lib/common/documentation/documentation.component.html

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ <h1 align="center">ngx-bootstrap</h1>
99
</a>
1010

1111
<p align="center">
12-
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> or <a
13-
href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
12+
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3 </a>, <a
13+
href="https://getbootstrap.com/docs/4.0">Bootstrap 4 </a>, <a
14+
href="https://getbootstrap.com/docs/5.1">Bootstrap 5 </a> Components with <a href="https://angular.io/">Angular</a>
1415
</p>
1516

1617
<p align="center">
@@ -61,8 +62,7 @@ <h2 id="getting-started">
6162
</h2>
6263
<p>ngx-bootstrap provides Bootstrap components powered by Angular, so you don't need to include original JS
6364
components.</p>
64-
<p>Check our <a href="https://valor-software.com/ngx-bootstrap/#/documentation#getting-started">Getting started
65-
guide</a> if it's your first project with Angular Bootstrap.</p>
65+
<p>Check our Getting started guide if it's your first project with Angular Bootstrap.</p>
6666

6767
<h2 id="usage--demo">
6868
Usage & Demo
@@ -155,6 +155,19 @@ <h4>Manual way</h4>
155155
class="atv">"anonymous"</span> <span class="atn">integrity</span><span class="pun">=</span><span
156156
class="atv">"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"</span><span class="tag">&gt;</span></pre>
157157

158+
<ul>
159+
<li><code>Bootstrap 5</code></li>
160+
</ul>
161+
162+
<pre class="prettyprint prettyprinted"><span class="com">&lt;!--- index.html --&gt;</span><span
163+
class="pln"></span>
164+
<span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span
165+
class="atv">"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"</span><span
166+
class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span
167+
class="atv">"stylesheet"</span> <span class="atn">crossorigin</span><span class="pun">=</span><span
168+
class="atv">"anonymous"</span> <span class="atn">integrity</span><span class="pun">=</span><span
169+
class="atv">"sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"</span><span class="tag">&gt;</span></pre>
170+
158171
<h3>Setting up the bootstrap version manually</h3>
159172
<p>
160173
As you may know <code>ngx-bootstrap</code> support several <code>bootstrap.css</code> versions at the same time
@@ -281,14 +294,14 @@ <h3 id="credits">
281294
<a class="anchor-link" routerLink="." fragment="credits">#</a>
282295
</h3>
283296
<p>Crossbrowser testing sponsored by
284-
<a href="https://saucelabs.com/" class="pr-1">Saucelabs</a>
297+
<a href="https://saucelabs.com/" class="pr-1 pe-1">Saucelabs</a>
285298
<a href="https://saucelabs.com/">
286299
<img src="https://avatars2.githubusercontent.com/u/88837?s=200&v=4" alt="Saucelabs" width="31" height="31">
287300
</a>
288301
</p>
289302

290303
<p>End-to-end testing sponsored by
291-
<a href="https://www.cypress.io/" class="pr-1">Cypress</a>
304+
<a href="https://www.cypress.io/" class="pr-1 pe-1">Cypress</a>
292305
<a href="https://www.cypress.io/">
293306
<img src="https://raw.githubusercontent.com/cypress-io/cypress-icons/master/src/favicon/favicon.ico" alt="Cypress" width="31" height="31">
294307
</a>

libs/common-docs/src/lib/common/landing/landing.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export class LandingComponent implements AfterViewInit {
2929

3030
ngAfterViewInit(): void {
3131
if (typeof window !== 'undefined') {
32+
window.scroll(0,0);
3233
this.http.get<any>('assets/json/current-version.json').subscribe(data => {
3334
this.currentVersion = data.version;
3435
});

libs/common-docs/src/lib/common/schematics/schematics.component.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@ <h1 align="center">ngx-bootstrap</h1>
99
</a>
1010

1111
<p align="center">
12-
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3</a> or <a
13-
href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
12+
The best way to quickly integrate <a href="https://getbootstrap.com/docs/3.3/">Bootstrap 3 </a>, <a
13+
href="https://getbootstrap.com/docs/4.0">Bootstrap 4 </a>, <a
14+
href="https://getbootstrap.com/docs/5.1">Bootstrap 5 </a> Components with <a href="https://angular.io/">Angular</a>
1415
</p>
1516

1617
<section class="section">

libs/common-docs/src/lib/common/sidebar/sidebar.component.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
<input #searchInput
33
type="text"
44
aria-label="Search in docs" name="search"
5-
placeholder="Search..." [value]="search.text" (change)='search.text = searchInput.value'/>
5+
placeholder="Search..."
6+
[value]="search.text"
7+
(keyup)='search.text = searchInput.value'
8+
(keypress)='preventReloading($event)'/>
69

710
<button id="mobile-main-menu" type="button" (click)="toggle()">
811
<img src="assets/images/icons/menu-left.svg" alt="left menu">
@@ -11,8 +14,9 @@
1114
<div class="mobile-menu">
1215
<div class="bootstrap-version">
1316
<span>Bootstrap: </span>
14-
<button class="btn" type="button" [class.selected]="isBs3" (click)="installTheme('bs3')">3</button>
15-
<button class="btn" type="button" [class.selected]="!isBs3" (click)="installTheme('bs4')">4</button>
17+
<button class="btn" type="button" [class.selected]="_bsVersions.isBs3" (click)="installTheme('bs3')">3</button>
18+
<button class="btn" type="button" [class.selected]="_bsVersions.isBs4" (click)="installTheme('bs4')">4</button>
19+
<button class="btn" type="button" [class.selected]="_bsVersions.isBs5" (click)="installTheme('bs5')">5</button>
1620
</div>
1721
<div class="sidebar-content" *ngIf="routes && routes.length">
1822
<ul class="sidebar-list">

0 commit comments

Comments
 (0)