Merge branch 'development' into development

.editorconfig

@@ -1,4 +1,4 @@
-# Editor configuration, see http://editorconfig.org
+# Editor configuration, see https://editorconfig.org
 root = true
 
 [*]

README.md

@@ -101,19 +101,19 @@ npm install ngx-bootstrap --save
 
 Add wanted package to NgModule imports:
 
-```
+```ts
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   ...
-  imports: [TooltipModule.forRoot(),...]
+  imports: [TooltipModule,...]
   ...
 })
 ```
 
 Add component to your page:
 
-```
+```html
 <button type="button" class="btn btn-primary"
         tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Simple demo
@@ -126,14 +126,14 @@ This can be done with the css file directly in the index.html, or alternatively
 
 - `Bootstrap 5`
 
-```
+```html
 <!--- index.html -->
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
 ```
 
 - `Bootstrap 4`
 
-```
+```html
 <!--- index.html -->
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2">
 ```
@@ -148,7 +148,7 @@ have a customized version of bootstrap. The consequence is that the process of d
 be failed, which can break the UI. In that case, we can still set the bootstrap version manually in the bootstrapping
 component (i.e. `AppComponent`):
 
-```
+```ts
 import { setTheme } from 'ngx-bootstrap/utils';
 
 @Component({...})

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

@@ -1,7 +1,6 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { environment } from '../environments/environment';
@@ -15,8 +14,8 @@ import { routes } from './app.routing';
     ],
     bootstrap: [AppComponent], imports: [BrowserAnimationsModule,
         DocsModule,
-        RouterModule.forRoot(routes, { useHash: environment.useHash }),
-        BsDropdownModule.forRoot()], providers: [
+        RouterModule.forRoot(routes, { useHash: environment.useHash })
+        ], providers: [
         { provide: NgApiDoc, useValue: ngdoc },
         { provide: DOCS_TOKENS, useValue: routes },
         { provide: SIDEBAR_ROUTES, useValue: SidebarRoutesStructure },

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

@@ -2,7 +2,9 @@
 @import "bs-datepicker";
 
 /* HEADER */
-
+.bs-datepicker-head {
+  width: 150px;
+}
 header {
   padding: 10px 50px 10px 30px;
   height: $header-height;

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

@@ -1,3 +1,3 @@
 {
-  "version": "18.0.0"
+  "version": "18.1.2"
 }

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

@@ -112,6 +112,22 @@ <h2 id="installation">
         <a class="anchor-link" routerLink="." fragment="installation">#</a>
       </h2>
       <h4>Angular CLI way</h4>
+      <p>Make sure that your app uses modular approach and you have app.module.ts set as your starting point before you proceed</p>
+      <pre class="prettyprint lang-js prettyprinted">
+<span class="kwd">import</span><span class="pln"> </span><span class="pun">{{'{'}}</span><span class="kwd"> platformBrowser </span><span
+        class="pun">{{'}'}}</span><span class="pln"> from </span><span class="str">'&#64;angular/platform-browser'</span><span
+        class="pun">;</span>
+<span class="kwd">import</span><span class="pln"> </span><span class="pun">{{'{'}}</span><span class="kwd"> AppModule </span><span
+        class="pun">{{'}'}}</span><span class="pln"> from </span><span class="str">'./app.module'</span><span
+class="pun">;</span>
+<span class="pln">&nbsp;</span>
+<span class="pun">platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));</span>
+      </pre>
+<!--          // main.ts-->
+<!--          import { platformBrowser } from '&#64;angular/platform-browser';-->
+<!--          import { AppModule } from './app.module';-->
+
+<!--          platformBrowser().bootstrapModule(AppModule).catch((err) => console.error(err));-->
       <p>Use the Angular CLI ng add command for updating your Angular project.</p>
       <pre class="prettyprint lang-bash prettyprinted"><span class="pln">ng add ngx-bootstrap</span></pre>
 
@@ -233,7 +249,7 @@ <h2 id="compatibility">
         </thead>
         <tbody>
           <tr>
-            <th>13.x.x</th>
+            <th>18.x.x</th>
             <th>18.x.x</th>
             <th>5.x.x or 4.x.x</th>
           </tr>

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

@@ -138,7 +138,7 @@ <h2 id="getting-started">Schematics</h2>
     ],
     <span class="kwd">imports</span>: [
         <span class="pln">  &hellip;</span>
-        <span class="lit">AccordionModule.forRoot()</span>,
+        <span class="lit">AccordionModule</span>,
     ],
         bootstrap: [AppComponent]
     <span class="pun">{{'}'}}</span>)

libs/common-docs/src/lib/common/top-menu/top-menu.component.ts

@@ -44,8 +44,11 @@ export class TopMenuComponent implements AfterViewInit {
       this.http
         .get<{ url: string; version: string; unprefixedUrl: string }[]>('assets/json/versions.json')
         .subscribe((data) => {
-          this.previousDocs.push(data[0]);
-          this.previousDocs = this.previousDocs.concat(data.reverse()).slice(0, -1);
+          this.previousDocs = data.sort((versionA, versionB) => {
+            const versionAsNumberA = Number(versionA.version.split('.').join(''));
+            const versionAsNumberB = Number(versionB.version.split('.').join(''));
+            return versionAsNumberB - versionAsNumberA;
+          });
         });
 
       this.http.get<{ version: string }>('assets/json/current-version.json').subscribe((data: { version: string }) => {

libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts

@@ -20,7 +20,7 @@ export { ExamplesComponent } from './examples.component';
     CommonModule,
     NgApiDocModule,
     RouterModule,
-    TabsModule.forRoot(),
+    TabsModule,
   ],
   exports: [
     ExamplesComponent,

libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts

@@ -25,8 +25,8 @@ import { ${className === 'DemoModalServiceFromComponent' ? `${className}, ModalC
   declarations: [${className === 'DemoModalServiceFromComponent' ? `${className}, ModalContentComponent` : className}],
   imports: [
     ${moduleData.moduleName}.forRoot(),
-    ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule.forRoot(),
-    PopoverModule.forRoot(),` : ''}
+    ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule,
+    PopoverModule,` : ''}
     BrowserAnimationsModule,
     CommonModule,
     FormsModule,

libs/common-docs/src/lib/docs.module.ts

@@ -79,8 +79,8 @@ export { ThemesComponent } from './common/themes/themes.component';
     NgApiDocModule,
     ExamplesComponentModule,
     ApiSectionsComponentModule,
-    TabsModule.forRoot(),
-    BsDropdownModule.forRoot(),
+    TabsModule,
+    BsDropdownModule,
     RouterModule
   ],
   exports: [

libs/doc-pages/accordion/src/lib/accordion.module.ts

@@ -17,7 +17,7 @@ export { AccordionSectionComponent } from './accordion-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AccordionModule.forRoot(),
+        AccordionModule,
         CommonModule,
         FormsModule,
         DocsModule,

libs/doc-pages/accordion/src/lib/docs/usage.md

@@ -1,11 +1,29 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AccordionComponent, AccordionPanelComponent } from 'ngx-bootstrap/accordion';
+
+@Component({
+  standalone: true,
+  imports: [
+    BrowserAnimationsModule,
+    AccordionComponent,
+    AccordionPanelComponent
+    ...
+  ]
+})
+export class AppComponent(){}
+
+Also should be added web-animations-js polyfill for IE browser (Edge)
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    AccordionModule.forRoot(),
+    AccordionModule,
     ...
   ]
 })

libs/doc-pages/alerts/src/lib/alerts.module.ts

@@ -15,7 +15,7 @@ export { AlertsSectionComponent } from './alerts-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AlertModule.forRoot(),
+        AlertModule,
         CommonModule,
         DocsModule,
         RouterModule.forChild(routes)

libs/doc-pages/alerts/src/lib/docs/usage.md

@@ -1,6 +1,17 @@
+### Standalone component usage
+import { AlertComponent } from 'ngx-bootstrap/alert';
+
+@Components({
+  standalone: true,
+  imports: [AlertComponent,...]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { AlertModule } from 'ngx-bootstrap/alert';
 
 @NgModule({
-  imports: [AlertModule.forRoot(),...]
+  imports: [AlertModule,...]
 })
 export class AppModule(){}

libs/doc-pages/buttons/src/lib/buttons.module.ts

@@ -22,7 +22,7 @@ export { ButtonsSectionComponent } from './buttons-section.component';
         CommonModule,
         DocsModule,
         RouterModule.forChild(routes),
-        ButtonsModule.forRoot()
+        ButtonsModule
     ],
     exports: [ButtonsSectionComponent]
 })

libs/doc-pages/buttons/src/lib/docs/usage.md

@@ -1,6 +1,19 @@
+### Standalone component usage
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
+
+@Component({
+  imports: [
+    ButtonsModule,
+    ...
+  ]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { ButtonsModule } from 'ngx-bootstrap/buttons';
 
 @NgModule({
-  imports: [ButtonsModule.forRoot(),...]
+  imports: [ButtonsModule,...]
 })
 export class AppModule(){}

libs/doc-pages/carousel/src/lib/carousel.module.ts

@@ -16,7 +16,7 @@ export { CarouselSectionComponent } from './carousel-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        CarouselModule.forRoot(),
+        CarouselModule,
         CommonModule,
         FormsModule,
         DocsModule,

libs/doc-pages/carousel/src/lib/docs/usage.md

@@ -1,6 +1,19 @@
+### Standalone component usage
+import { CarouselModule } from 'ngx-bootstrap/carousel';
+
+@Component({
+  imports: [
+    CarouselModule,
+    ...
+]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 
 @NgModule({
-  imports: [CarouselModule.forRoot(),...]
+  imports: [CarouselModule,...]
 })
 export class AppModule(){}

libs/doc-pages/collapse/src/lib/collapse.module.ts

@@ -17,7 +17,7 @@ export { CollapseSectionComponent } from './collapse-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        CollapseModule.forRoot(),
+        CollapseModule,
         CommonModule,
         FormsModule,
         DocsModule,

libs/doc-pages/collapse/src/lib/docs/usage.md

@@ -1,11 +1,27 @@
+### Standalone component usage
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { CollapseDirective } from 'ngx-bootstrap/collapse';
+
+@Component({
+  imports: [
+    BrowserAnimationsModule,
+    CollapseDirective,
+    ...
+  ]
+})
+export class AppComponent(){}
+
+
+### Module usage
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    CollapseModule.forRoot(),
+    CollapseModule,
     ...
   ]
 })

libs/doc-pages/datepicker/src/lib/datepicker.module.ts

@@ -10,7 +10,7 @@ import {
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esUsLocale, etLocale, frLocale, heLocale,
   hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale, nbLocale,
   nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale, trLocale, viLocale,
-  zhCnLocale, ukLocale
+  zhCnLocale, ukLocale, frCaLocale
 } from 'ngx-bootstrap/locale';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -26,7 +26,7 @@ const locales = [
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esUsLocale, etLocale, frLocale,
   heLocale, hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale,
   nbLocale, nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale,
-  trLocale, ukLocale, viLocale, zhCnLocale
+  trLocale, ukLocale, viLocale, zhCnLocale, frCaLocale
 ];
 
 locales.forEach((locale: LocaleData) => {
@@ -43,8 +43,8 @@ locales.forEach((locale: LocaleData) => {
         ...DEMO_COMPONENTS
     ],
     imports: [
-        BsDatepickerModule.forRoot(),
-        TabsModule.forRoot(),
+        BsDatepickerModule,
+        TabsModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,

libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts

@@ -10,7 +10,7 @@ import {
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esPrLocale, esUsLocale, etLocale, frLocale, heLocale,
   hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale, nbLocale,
   nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale, trLocale, viLocale,
-  zhCnLocale, ukLocale
+  zhCnLocale, ukLocale, frCaLocale
 } from 'ngx-bootstrap/locale';
 
 import { TabsModule } from 'ngx-bootstrap/tabs';
@@ -24,7 +24,7 @@ const locales = [
   arLocale, bgLocale, caLocale, csLocale, daLocale, deLocale, enGbLocale, esDoLocale, esLocale, esPrLocale, esUsLocale, etLocale, frLocale,
   heLocale, hiLocale, hrLocale, fiLocale, glLocale, huLocale, idLocale, itLocale, jaLocale, kaLocale, kkLocale, koLocale, ltLocale, lvLocale, mnLocale,
   nbLocale, nlBeLocale, nlLocale, plLocale, ptBrLocale, ruLocale, roLocale, skLocale, slLocale, sqLocale, svLocale, thLocale, thBeLocale,
-  trLocale, ukLocale, viLocale, zhCnLocale
+  trLocale, ukLocale, viLocale, zhCnLocale, frCaLocale
 ];
 
 locales.forEach((locale: LocaleData) => {
@@ -41,8 +41,8 @@ locales.forEach((locale: LocaleData) => {
         ...DEMO_COMPONENTS
     ],
     imports: [
-        BsDatepickerModule.forRoot(),
-        TabsModule.forRoot(),
+        BsDatepickerModule,
+        TabsModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,