feat(moduleless): migrating to standalone modules support (#6669)

* feat(accordion): migrated to standalone

* feat(accordion): migrated to standalone

* feat(alert)): migrated to standalone

* feat(buttons): migrated to standalone

* feat(carousel): migrated to standalone

* feat(collapse): migrated to standalone

* feat(datepicker): migrated to standalone

* fix(accordion): fixed tests

* fix(accordion): fixed tests

* fix(accordion): fixed tests

* fix(accordion): fixed tests

* fix(accordion): fixed tests

* fix(carousel): fixed tests

* feat(dropdown): added moduleless support

* feat(focustrap): added moduleless support

* feat(modal): added moduleless support

* feat(pagination): added moduleless support

* feat(popover): added moduleless support

* feat(progressbar): added moduleless support

* feat(rating): added moduleless support

* feat(sortable): added moduleless support

* feat(tabs): added moduleless support

* feat(timepicker): added moduleless support

* feat(timepicker): added moduleless support

* feat(typeahead): added moduleless support

* feat(typeahead): added moduleless support

* fix(rating): tests ajust to moduleless

* fix(progressbar): tests ajust to moduleless

* chore(docs): added deprecations

* chore(docs): updated documentation regarding standalone usage

* chore(docs): updated documentation regarding standalone usage

* fix(modal): fixed nested backdrop issue

* 18.1.0

* chore(version): bumped version to 18.1.0

Author: lexasq

README.md

@@ -106,7 +106,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   ...
-  imports: [TooltipModule.forRoot(),...]
+  imports: [TooltipModule,...]
   ...
 })
 ```

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

@@ -16,7 +16,7 @@ import { routes } from './app.routing';
     bootstrap: [AppComponent], imports: [BrowserAnimationsModule,
         DocsModule,
         RouterModule.forRoot(routes, { useHash: environment.useHash }),
-        BsDropdownModule.forRoot()], providers: [
+        BsDropdownModule], providers: [
         { provide: NgApiDoc, useValue: ngdoc },
         { provide: DOCS_TOKENS, useValue: routes },
         { provide: SIDEBAR_ROUTES, useValue: SidebarRoutesStructure },

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

@@ -1,3 +1,3 @@
 {
-  "version": "18.0.2"
+  "version": "18.1.0"
 }

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/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)