diff --git a/README.md b/README.md index bdff34ff81..0230c075ff 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; @NgModule({ ... - imports: [TooltipModule.forRoot(),...] + imports: [TooltipModule,...] ... }) ``` diff --git a/apps/ngx-bootstrap-docs/src/app/app.module.ts b/apps/ngx-bootstrap-docs/src/app/app.module.ts index 92a30bc309..fcc97e640f 100644 --- a/apps/ngx-bootstrap-docs/src/app/app.module.ts +++ b/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 }, diff --git a/apps/ngx-bootstrap-docs/src/assets/json/current-version.json b/apps/ngx-bootstrap-docs/src/assets/json/current-version.json index 51e97297c7..468bce7d10 100644 --- a/apps/ngx-bootstrap-docs/src/assets/json/current-version.json +++ b/apps/ngx-bootstrap-docs/src/assets/json/current-version.json @@ -1,3 +1,3 @@ { - "version": "18.0.2" + "version": "18.1.0" } diff --git a/libs/common-docs/src/lib/common/schematics/schematics.component.html b/libs/common-docs/src/lib/common/schematics/schematics.component.html index e3c89fbff3..bee3230604 100644 --- a/libs/common-docs/src/lib/common/schematics/schematics.component.html +++ b/libs/common-docs/src/lib/common/schematics/schematics.component.html @@ -138,7 +138,7 @@

Schematics

], imports: [ … - AccordionModule.forRoot(), + AccordionModule, ], bootstrap: [AppComponent] {{'}'}}) diff --git a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts index ba874f9e36..916aa27eb2 100644 --- a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/index.ts +++ b/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, diff --git a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts b/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts index bcc6c66c87..99d8fbfde8 100644 --- a/libs/common-docs/src/lib/demo-section-components/demo-examples-section/stackblitz/app.module.ts +++ b/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, diff --git a/libs/common-docs/src/lib/docs.module.ts b/libs/common-docs/src/lib/docs.module.ts index c5ebec82ef..63d909c472 100644 --- a/libs/common-docs/src/lib/docs.module.ts +++ b/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: [ diff --git a/libs/doc-pages/accordion/src/lib/accordion.module.ts b/libs/doc-pages/accordion/src/lib/accordion.module.ts index 8cdc8ced3e..06e856a2d8 100644 --- a/libs/doc-pages/accordion/src/lib/accordion.module.ts +++ b/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, diff --git a/libs/doc-pages/accordion/src/lib/docs/usage.md b/libs/doc-pages/accordion/src/lib/docs/usage.md index 7f803207de..e27b73912e 100644 --- a/libs/doc-pages/accordion/src/lib/docs/usage.md +++ b/libs/doc-pages/accordion/src/lib/docs/usage.md @@ -1,3 +1,21 @@ +### 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'; @@ -5,7 +23,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion'; @NgModule({ imports: [ BrowserAnimationsModule, - AccordionModule.forRoot(), + AccordionModule, ... ] }) diff --git a/libs/doc-pages/alerts/src/lib/alerts.module.ts b/libs/doc-pages/alerts/src/lib/alerts.module.ts index 61b8bfe9ae..b706ee6b07 100644 --- a/libs/doc-pages/alerts/src/lib/alerts.module.ts +++ b/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) diff --git a/libs/doc-pages/alerts/src/lib/docs/usage.md b/libs/doc-pages/alerts/src/lib/docs/usage.md index 9377ee9726..2538714a2d 100644 --- a/libs/doc-pages/alerts/src/lib/docs/usage.md +++ b/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(){} diff --git a/libs/doc-pages/buttons/src/lib/buttons.module.ts b/libs/doc-pages/buttons/src/lib/buttons.module.ts index f5c2d6ce69..dc843fcb4e 100644 --- a/libs/doc-pages/buttons/src/lib/buttons.module.ts +++ b/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] }) diff --git a/libs/doc-pages/buttons/src/lib/docs/usage.md b/libs/doc-pages/buttons/src/lib/docs/usage.md index e2f35603f9..1dcb59c41d 100644 --- a/libs/doc-pages/buttons/src/lib/docs/usage.md +++ b/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(){} diff --git a/libs/doc-pages/carousel/src/lib/carousel.module.ts b/libs/doc-pages/carousel/src/lib/carousel.module.ts index 331b263cce..b25d084e33 100644 --- a/libs/doc-pages/carousel/src/lib/carousel.module.ts +++ b/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, diff --git a/libs/doc-pages/carousel/src/lib/docs/usage.md b/libs/doc-pages/carousel/src/lib/docs/usage.md index 771bca859f..c08c4f3ac1 100644 --- a/libs/doc-pages/carousel/src/lib/docs/usage.md +++ b/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(){} diff --git a/libs/doc-pages/collapse/src/lib/collapse.module.ts b/libs/doc-pages/collapse/src/lib/collapse.module.ts index 0608a8280a..3fc120c352 100644 --- a/libs/doc-pages/collapse/src/lib/collapse.module.ts +++ b/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, diff --git a/libs/doc-pages/collapse/src/lib/docs/usage.md b/libs/doc-pages/collapse/src/lib/docs/usage.md index 0a93782a8d..9294e7d0c8 100644 --- a/libs/doc-pages/collapse/src/lib/docs/usage.md +++ b/libs/doc-pages/collapse/src/lib/docs/usage.md @@ -1,3 +1,19 @@ +### 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'; @@ -5,7 +21,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse'; @NgModule({ imports: [ BrowserAnimationsModule, - CollapseModule.forRoot(), + CollapseModule, ... ] }) diff --git a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts index 2fadc6ba23..35920e95b0 100644 --- a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts @@ -43,8 +43,8 @@ locales.forEach((locale: LocaleData) => { ...DEMO_COMPONENTS ], imports: [ - BsDatepickerModule.forRoot(), - TabsModule.forRoot(), + BsDatepickerModule, + TabsModule, CommonModule, FormsModule, ReactiveFormsModule, diff --git a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts index 2fc35ba559..4c6894e684 100644 --- a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts @@ -41,8 +41,8 @@ locales.forEach((locale: LocaleData) => { ...DEMO_COMPONENTS ], imports: [ - BsDatepickerModule.forRoot(), - TabsModule.forRoot(), + BsDatepickerModule, + TabsModule, CommonModule, FormsModule, ReactiveFormsModule, diff --git a/libs/doc-pages/datepicker/src/lib/docs/usage.md b/libs/doc-pages/datepicker/src/lib/docs/usage.md index a2799ce796..dbd68f24fd 100644 --- a/libs/doc-pages/datepicker/src/lib/docs/usage.md +++ b/libs/doc-pages/datepicker/src/lib/docs/usage.md @@ -1,3 +1,19 @@ +### Standalone component usage +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; + +@Components({ + imports: [ + BrowserAnimationsModule, + BsDatepickerModule, + ... + ] +}) +export class AppComponents(){} + + +### Module usage import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; @@ -5,7 +21,7 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; @NgModule({ imports: [ BrowserAnimationsModule, - BsDatepickerModule.forRoot(), + BsDatepickerModule, ... ] }) diff --git a/libs/doc-pages/dropdown/src/lib/docs/usage.md b/libs/doc-pages/dropdown/src/lib/docs/usage.md index da282ecc1b..d553ac89b7 100644 --- a/libs/doc-pages/dropdown/src/lib/docs/usage.md +++ b/libs/doc-pages/dropdown/src/lib/docs/usage.md @@ -1,3 +1,20 @@ +### Standalone component usage +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { BsDropdownModule } from 'ngx-bootstrap/datepicker'; + +@Components({ + standalone: true, + imports: [ + BrowserAnimationsModule, + BsDropdownModule, + ... + ] +}) +export class AppComponents(){} + + +### Module usage import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; @@ -5,7 +22,7 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; @NgModule({ imports: [ BrowserAnimationsModule, - BsDropdownModule.forRoot() + BsDropdownModule ] }) export class AppModule(){} diff --git a/libs/doc-pages/dropdown/src/lib/dropdown.module.ts b/libs/doc-pages/dropdown/src/lib/dropdown.module.ts index 008a79d149..5e80244baf 100644 --- a/libs/doc-pages/dropdown/src/lib/dropdown.module.ts +++ b/libs/doc-pages/dropdown/src/lib/dropdown.module.ts @@ -17,7 +17,7 @@ export { DropdownSectionComponent } from './dropdown-section.component'; ...DEMO_COMPONENTS ], imports: [ - BsDropdownModule.forRoot(), + BsDropdownModule, CommonModule, FormsModule, DocsModule, diff --git a/libs/doc-pages/modal/src/lib/docs/usage.md b/libs/doc-pages/modal/src/lib/docs/usage.md index 179a43940c..15a3beadd5 100644 --- a/libs/doc-pages/modal/src/lib/docs/usage.md +++ b/libs/doc-pages/modal/src/lib/docs/usage.md @@ -1,6 +1,18 @@ +### Standalone component usage +import { ModalModule, BsModalService } from 'ngx-bootstrap/modal'; + +@Component({ + standalone: true, + imports: [ModalModule,...], // module can be optional + providers: [BsModalService] +}) +export class AppComponent(){} + +### Module usage import { ModalModule } from 'ngx-bootstrap/modal'; @NgModule({ - imports: [ModalModule.forRoot(),...] + imports: [ModalModule,...], + providers: [BsModalService] }) export class AppModule(){} diff --git a/libs/doc-pages/modal/src/lib/modal.module.ts b/libs/doc-pages/modal/src/lib/modal.module.ts index cb0498270f..cad8420865 100644 --- a/libs/doc-pages/modal/src/lib/modal.module.ts +++ b/libs/doc-pages/modal/src/lib/modal.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { ModalModule } from 'ngx-bootstrap/modal'; +import { BsModalService, ModalModule } from 'ngx-bootstrap/modal'; import { DocsModule } from '@ngx-bootstrap-doc/docs'; import { ModalSectionComponent } from './modal-section.component'; @@ -24,14 +24,15 @@ export { ModalSectionComponent } from './modal-section.component'; ...DEMO_COMPONENTS ], imports: [ - ModalModule.forRoot(), - PopoverModule.forRoot(), - TooltipModule.forRoot(), + ModalModule, + PopoverModule, + TooltipModule, CommonModule, FormsModule, DocsModule, RouterModule.forChild(routes) ], - exports: [ModalSectionComponent] + exports: [ModalSectionComponent], + providers: [BsModalService] }) export class DemoModalModule {} diff --git a/libs/doc-pages/pagination/src/lib/docs/usage.md b/libs/doc-pages/pagination/src/lib/docs/usage.md index 07f1cbb7ee..6e87078c94 100644 --- a/libs/doc-pages/pagination/src/lib/docs/usage.md +++ b/libs/doc-pages/pagination/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { PaginationModule } from 'ngx-bootstrap/pagination'; + +@Component({ + standalone: true, + imports: [PaginationModule,...], +}) +export class AppComponent(){} + +### Module usage import { PaginationModule } from 'ngx-bootstrap/pagination'; @NgModule({ - imports: [PaginationModule.forRoot(),...] + imports: [PaginationModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/pagination/src/lib/pagination.module.ts b/libs/doc-pages/pagination/src/lib/pagination.module.ts index 1b1fb1900b..10b7ce1c2d 100644 --- a/libs/doc-pages/pagination/src/lib/pagination.module.ts +++ b/libs/doc-pages/pagination/src/lib/pagination.module.ts @@ -17,7 +17,7 @@ export { PaginationSectionComponent } from './pagination-section.component'; ...DEMO_COMPONENTS ], imports: [ - PaginationModule.forRoot(), + PaginationModule, CommonModule, FormsModule, DocsModule, diff --git a/libs/doc-pages/popover/src/lib/docs/usage.md b/libs/doc-pages/popover/src/lib/docs/usage.md index 249cf11056..8fcd116a33 100644 --- a/libs/doc-pages/popover/src/lib/docs/usage.md +++ b/libs/doc-pages/popover/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { PopoverModule } from 'ngx-bootstrap/popover'; + +@Component({ + standalone: true, + imports: [PopoverModule,...] +}) +export class AppComponent(){} + +### Module usage import { PopoverModule } from 'ngx-bootstrap/popover'; @NgModule({ - imports: [PopoverModule.forRoot(),...] + imports: [PopoverModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/popover/src/lib/popover.module.ts b/libs/doc-pages/popover/src/lib/popover.module.ts index 29db72567b..a4993a19df 100644 --- a/libs/doc-pages/popover/src/lib/popover.module.ts +++ b/libs/doc-pages/popover/src/lib/popover.module.ts @@ -20,7 +20,7 @@ export { PopoverSectionComponent } from './popover-section.component'; CommonModule, FormsModule, DocsModule, - PopoverModule.forRoot(), + PopoverModule, RouterModule.forChild(routes) ], exports: [PopoverSectionComponent] diff --git a/libs/doc-pages/progressbar/src/lib/docs/usage.md b/libs/doc-pages/progressbar/src/lib/docs/usage.md index 4e07857dcf..cfd43bec3e 100644 --- a/libs/doc-pages/progressbar/src/lib/docs/usage.md +++ b/libs/doc-pages/progressbar/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; + +@Component({ + standalone: true, + imports: [ProgressbarModule,...] +}) +export class AppComponent(){} + +### Module usage import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; @NgModule({ - imports: [ProgressbarModule.forRoot(),...] + imports: [ProgressbarModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/progressbar/src/lib/progressbar.module.ts b/libs/doc-pages/progressbar/src/lib/progressbar.module.ts index 3fa7493cca..9de9163afa 100644 --- a/libs/doc-pages/progressbar/src/lib/progressbar.module.ts +++ b/libs/doc-pages/progressbar/src/lib/progressbar.module.ts @@ -20,7 +20,7 @@ export { ProgressbarSectionComponent } from './progressbar-section.component'; CommonModule, FormsModule, DocsModule, - ProgressbarModule.forRoot(), + ProgressbarModule, RouterModule.forChild(routes) ], exports: [ProgressbarSectionComponent] diff --git a/libs/doc-pages/rating/src/lib/docs/usage.md b/libs/doc-pages/rating/src/lib/docs/usage.md index 5d87d36b73..a3c6fce690 100644 --- a/libs/doc-pages/rating/src/lib/docs/usage.md +++ b/libs/doc-pages/rating/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { RatingModule } from 'ngx-bootstrap/rating'; + +@Component({ + standalone: true, + imports: [RatingModule,...] +}) +export class AppComponent(){} + +### Module usage import { RatingModule } from 'ngx-bootstrap/rating'; @NgModule({ - imports: [RatingModule.forRoot(),...] + imports: [RatingModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/rating/src/lib/rating.module.ts b/libs/doc-pages/rating/src/lib/rating.module.ts index b6d50d84d5..6c5977037f 100644 --- a/libs/doc-pages/rating/src/lib/rating.module.ts +++ b/libs/doc-pages/rating/src/lib/rating.module.ts @@ -20,7 +20,7 @@ export { RatingSectionComponent } from './rating-section.component'; CommonModule, FormsModule, DocsModule, - RatingModule.forRoot(), + RatingModule, RouterModule.forChild(routes) ], exports: [RatingSectionComponent] diff --git a/libs/doc-pages/sortable/src/lib/docs/usage.md b/libs/doc-pages/sortable/src/lib/docs/usage.md index 9e361d631d..fcb9091a9a 100644 --- a/libs/doc-pages/sortable/src/lib/docs/usage.md +++ b/libs/doc-pages/sortable/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { SortableModule } from 'ngx-bootstrap/sortable'; + +@Component({ + standalone: true, + imports: [SortableModule,...] +}) +export class AppComponent(){} + +### Module usage import { SortableModule } from 'ngx-bootstrap/sortable'; @NgModule({ - imports: [SortableModule.forRoot(),...] + imports: [SortableModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/sortable/src/lib/sortable.module.ts b/libs/doc-pages/sortable/src/lib/sortable.module.ts index 3f0c51ff49..0d0c837d25 100644 --- a/libs/doc-pages/sortable/src/lib/sortable.module.ts +++ b/libs/doc-pages/sortable/src/lib/sortable.module.ts @@ -20,7 +20,7 @@ export { SortableSectionComponent } from './sortable-section.component'; CommonModule, FormsModule, DocsModule, - SortableModule.forRoot(), + SortableModule, RouterModule.forChild(routes) ], exports: [SortableSectionComponent] diff --git a/libs/doc-pages/tabs/src/lib/docs/usage.md b/libs/doc-pages/tabs/src/lib/docs/usage.md index 338fa69b36..2bac90e16f 100644 --- a/libs/doc-pages/tabs/src/lib/docs/usage.md +++ b/libs/doc-pages/tabs/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { TabsModule } from 'ngx-bootstrap/tabs'; + +@Component({ + standalone: true, + imports: [TabsModule,...] +}) +export class AppComponent(){} + +### Module usage import { TabsModule } from 'ngx-bootstrap/tabs'; @NgModule({ - imports: [TabsModule.forRoot(),...] + imports: [TabsModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/tabs/src/lib/tabs.module.ts b/libs/doc-pages/tabs/src/lib/tabs.module.ts index 595e725bb3..68824a2545 100644 --- a/libs/doc-pages/tabs/src/lib/tabs.module.ts +++ b/libs/doc-pages/tabs/src/lib/tabs.module.ts @@ -20,7 +20,7 @@ export { TabsSectionComponent } from './tabs-section.component'; CommonModule, FormsModule, DocsModule, - TabsModule.forRoot(), + TabsModule, RouterModule.forChild(routes) ], exports: [TabsSectionComponent] diff --git a/libs/doc-pages/timepicker/src/lib/docs/usage.md b/libs/doc-pages/timepicker/src/lib/docs/usage.md index 1ccef910f7..3a4b5b8c2b 100644 --- a/libs/doc-pages/timepicker/src/lib/docs/usage.md +++ b/libs/doc-pages/timepicker/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; + +@Component({ + standalone: true, + imports: [TimepickerModule,...] +}) +export class AppComponent(){} + +### Module usage import { TimepickerModule } from 'ngx-bootstrap/timepicker'; @NgModule({ - imports: [TimepickerModule.forRoot(),...] + imports: [TimepickerModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/timepicker/src/lib/timepicker.module.ts b/libs/doc-pages/timepicker/src/lib/timepicker.module.ts index 2079b441cb..85bdf36048 100644 --- a/libs/doc-pages/timepicker/src/lib/timepicker.module.ts +++ b/libs/doc-pages/timepicker/src/lib/timepicker.module.ts @@ -21,7 +21,7 @@ export { TimepickerSectionComponent } from './timepicker-section.component'; FormsModule, ReactiveFormsModule, DocsModule, - TimepickerModule.forRoot(), + TimepickerModule, RouterModule.forChild(routes) ], exports: [TimepickerSectionComponent] diff --git a/libs/doc-pages/tooltip/src/lib/docs/usage.md b/libs/doc-pages/tooltip/src/lib/docs/usage.md index f35fe98d1d..c89ad98ffc 100644 --- a/libs/doc-pages/tooltip/src/lib/docs/usage.md +++ b/libs/doc-pages/tooltip/src/lib/docs/usage.md @@ -1,6 +1,16 @@ +### Standalone component usage +import { TooltipModule } from 'ngx-bootstrap/timepicker'; + +@Component({ + standalone: true, + imports: [TooltipModule,...] +}) +export class AppComponent(){} + +### Module usage import { TooltipModule } from 'ngx-bootstrap/tooltip'; @NgModule({ - imports: [TooltipModule.forRoot(),...] + imports: [TooltipModule,...] }) export class AppModule(){} diff --git a/libs/doc-pages/tooltip/src/lib/tooltip.module.ts b/libs/doc-pages/tooltip/src/lib/tooltip.module.ts index 8ee443d1b1..a63adde26f 100644 --- a/libs/doc-pages/tooltip/src/lib/tooltip.module.ts +++ b/libs/doc-pages/tooltip/src/lib/tooltip.module.ts @@ -20,7 +20,7 @@ export { TooltipSectionComponent } from './tooltip-section.component'; CommonModule, FormsModule, DocsModule, - TooltipModule.forRoot(), + TooltipModule, RouterModule.forChild(routes) ], exports: [TooltipSectionComponent] diff --git a/libs/doc-pages/typeahead/src/lib/docs/usage.md b/libs/doc-pages/typeahead/src/lib/docs/usage.md index 843de6f716..5a7c9bb6b7 100644 --- a/libs/doc-pages/typeahead/src/lib/docs/usage.md +++ b/libs/doc-pages/typeahead/src/lib/docs/usage.md @@ -1,3 +1,18 @@ +### Standalone component usage +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; +@Component({ + standalone: true, + imports: [ + BrowserAnimationsModule, + TypeaheadModule, + ... + ] +}) +export class AppComponent(){} + +### Module usage import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; @@ -5,7 +20,7 @@ import { TypeaheadModule } from 'ngx-bootstrap/typeahead'; @NgModule({ imports: [ BrowserAnimationsModule, - TypeaheadModule.forRoot(), + TypeaheadModule, ... ] }) diff --git a/libs/doc-pages/typeahead/src/lib/typeahead.module.ts b/libs/doc-pages/typeahead/src/lib/typeahead.module.ts index e7c76c37c9..0a8ea17691 100644 --- a/libs/doc-pages/typeahead/src/lib/typeahead.module.ts +++ b/libs/doc-pages/typeahead/src/lib/typeahead.module.ts @@ -21,7 +21,7 @@ export { TypeaheadSectionComponent } from './typeahead-section.component'; FormsModule, ReactiveFormsModule, DocsModule, - TypeaheadModule.forRoot(), + TypeaheadModule, RouterModule.forChild(routes) ], exports: [TypeaheadSectionComponent] diff --git a/package-lock.json b/package-lock.json index 786605b43e..d64369dc7a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-bootstrap-base", - "version": "18.0.2", + "version": "18.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ngx-bootstrap-base", - "version": "18.0.2", + "version": "18.1.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index b40b6ebd27..65ed365e53 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap-base", - "version": "18.0.2", + "version": "18.1.0", "license": "MIT", "author": "Dmitriy Shekhovtsov ", "schematics": "./schematics/src/collection.json", diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts index f0dbc8ecd7..20e01f29a4 100644 --- a/src/accordion/accordion-group.component.ts +++ b/src/accordion/accordion-group.component.ts @@ -2,6 +2,8 @@ import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; import { AccordionComponent } from './accordion.component'; +import { CollapseModule } from 'ngx-bootstrap/collapse'; +import { NgClass, NgIf } from '@angular/common'; /** * ### Accordion heading @@ -10,14 +12,16 @@ import { AccordionComponent } from './accordion.component'; * will be used as group's header template. */ @Component({ - selector: 'accordion-group, accordion-panel', - templateUrl: './accordion-group.component.html', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - class: 'panel', - style: 'display: block' - }, - styleUrls: ['./accordion.scss'] + selector: 'accordion-group, accordion-panel', + templateUrl: './accordion-group.component.html', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + class: 'panel', + style: 'display: block' + }, + styleUrls: ['./accordion.scss'], + standalone: true, + imports: [NgClass, NgIf, CollapseModule] }) export class AccordionPanelComponent implements OnInit, OnDestroy { /** turn on/off animation */ diff --git a/src/accordion/accordion.component.ts b/src/accordion/accordion.component.ts index 6fd63d7cfa..c6782fa87a 100644 --- a/src/accordion/accordion.component.ts +++ b/src/accordion/accordion.component.ts @@ -4,15 +4,16 @@ import { AccordionConfig } from './accordion.config'; /** Displays collapsible content panels for presenting information in a limited amount of space. */ @Component({ - selector: 'accordion', - template: ``, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[attr.aria-multiselectable]': 'closeOthers', - role: 'tablist', - class: 'panel-group', - style: 'display: block' - } + selector: 'accordion', + template: ``, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[attr.aria-multiselectable]': 'closeOthers', + role: 'tablist', + class: 'panel-group', + style: 'display: block' + }, + standalone: true }) export class AccordionComponent { /** turn on/off animation */ diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts index 667f85686d..60a8a70db1 100644 --- a/src/accordion/accordion.module.ts +++ b/src/accordion/accordion.module.ts @@ -1,17 +1,15 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { AccordionComponent } from './accordion.component'; import { AccordionPanelComponent } from './accordion-group.component'; -import { CollapseModule } from 'ngx-bootstrap/collapse'; @NgModule({ - imports: [CommonModule, CollapseModule], - declarations: [AccordionComponent, AccordionPanelComponent], - exports: [AccordionComponent, AccordionPanelComponent] + imports: [AccordionComponent, AccordionPanelComponent], + exports: [AccordionComponent, AccordionPanelComponent] }) export class AccordionModule { - static forRoot(): ModuleWithProviders { - return { ngModule: AccordionModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return AccordionModule; } } diff --git a/src/accordion/package.json b/src/accordion/package.json index b21be99d7b..1f30f5dc8b 100644 --- a/src/accordion/package.json +++ b/src/accordion/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/accordion", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/accordion/testing/accordion.component.spec.ts b/src/accordion/testing/accordion.component.spec.ts index 335a2c0eee..f2b097925f 100644 --- a/src/accordion/testing/accordion.component.spec.ts +++ b/src/accordion/testing/accordion.component.spec.ts @@ -4,8 +4,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AccordionConfig, AccordionModule } from '../index'; @Component({ - selector: 'accordion-test', - template: '' + selector: 'accordion-test', + template: '' }) class TestAccordionComponent { oneAtATime = true; @@ -77,10 +77,10 @@ describe('Component: Accordion', () => { TestBed.configureTestingModule({ declarations: [TestAccordionComponent], imports: [ - AccordionModule.forRoot(), + AccordionModule, BrowserAnimationsModule ] - }); +}); TestBed.overrideComponent(TestAccordionComponent, { set: { template: html } }); diff --git a/src/alert/alert.component.ts b/src/alert/alert.component.ts index 07885ae597..47b1c92176 100644 --- a/src/alert/alert.component.ts +++ b/src/alert/alert.component.ts @@ -9,11 +9,14 @@ import { } from '@angular/core'; import { AlertConfig } from './alert.config'; import { OnChange } from 'ngx-bootstrap/utils'; +import { NgIf, NgClass } from '@angular/common'; @Component({ - selector: 'alert,bs-alert', - templateUrl: './alert.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'alert,bs-alert', + templateUrl: './alert.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgIf, NgClass] }) export class AlertComponent implements OnInit { /** Alert type. diff --git a/src/alert/alert.module.ts b/src/alert/alert.module.ts index c43aeb56bf..d682d7cbce 100644 --- a/src/alert/alert.module.ts +++ b/src/alert/alert.module.ts @@ -1,14 +1,13 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { AlertComponent } from './alert.component'; @NgModule({ - imports: [CommonModule], - declarations: [AlertComponent], + imports: [AlertComponent], exports: [AlertComponent] }) export class AlertModule { - static forRoot(): ModuleWithProviders { - return { ngModule: AlertModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return AlertModule; } } diff --git a/src/alert/package.json b/src/alert/package.json index 37e220999b..a1b343725d 100644 --- a/src/alert/package.json +++ b/src/alert/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/alert", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/alert/testing/alert.component.spec.ts b/src/alert/testing/alert.component.spec.ts index d589800d6d..e247d4888b 100644 --- a/src/alert/testing/alert.component.spec.ts +++ b/src/alert/testing/alert.component.spec.ts @@ -3,7 +3,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { AlertComponent, AlertConfig, AlertModule } from '../index'; -@Component({selector: 'alert-test', template: ''}) +@Component({ + selector: 'alert-test', template: '', + standalone: true +}) class TestAlertComponent extends AlertComponent { constructor(config: AlertConfig, changeDetection: ChangeDetectorRef) { super(config, changeDetection); @@ -25,9 +28,8 @@ describe('Component: Alert', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestAlertComponent], - imports: [AlertModule.forRoot()] - }); + imports: [AlertModule, TestAlertComponent] +}); TestBed.overrideComponent(TestAlertComponent, { set: {template: overTemplate} }); diff --git a/src/buttons/button-checkbox.directive.ts b/src/buttons/button-checkbox.directive.ts index fa60148960..7bd2a6552b 100644 --- a/src/buttons/button-checkbox.directive.ts +++ b/src/buttons/button-checkbox.directive.ts @@ -22,8 +22,9 @@ type AvailableValues = boolean | string | number; * Add checkbox functionality to any element */ @Directive({ - selector: '[btnCheckbox]', - providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR] + selector: '[btnCheckbox]', + providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], + standalone: true }) export class ButtonCheckboxDirective implements ControlValueAccessor, OnInit { /** Truthy value, will be set to ngModel */ diff --git a/src/buttons/button-radio-group.directive.ts b/src/buttons/button-radio-group.directive.ts index d4ad61c9d5..7e18ca1fc5 100644 --- a/src/buttons/button-radio-group.directive.ts +++ b/src/buttons/button-radio-group.directive.ts @@ -22,8 +22,9 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: Provider = { * A value of a selected button is bound to a variable specified via ngModel. */ @Directive({ - selector: '[btnRadioGroup]', - providers: [RADIO_CONTROL_VALUE_ACCESSOR] + selector: '[btnRadioGroup]', + providers: [RADIO_CONTROL_VALUE_ACCESSOR], + standalone: true }) export class ButtonRadioGroupDirective implements ControlValueAccessor { onChange = Function.prototype; diff --git a/src/buttons/button-radio.directive.ts b/src/buttons/button-radio.directive.ts index 4a477a66ba..5f8004282e 100644 --- a/src/buttons/button-radio.directive.ts +++ b/src/buttons/button-radio.directive.ts @@ -27,8 +27,9 @@ export const RADIO_CONTROL_VALUE_ACCESSOR: Provider = { * A value of a selected button is bound to a variable specified via ngModel. */ @Directive({ - selector: '[btnRadio]', - providers: [RADIO_CONTROL_VALUE_ACCESSOR] + selector: '[btnRadio]', + providers: [RADIO_CONTROL_VALUE_ACCESSOR], + standalone: true }) export class ButtonRadioDirective implements ControlValueAccessor, OnChanges { onChange = Function.prototype; diff --git a/src/buttons/buttons.module.ts b/src/buttons/buttons.module.ts index 7c59bbe825..dd6ad1d660 100644 --- a/src/buttons/buttons.module.ts +++ b/src/buttons/buttons.module.ts @@ -1,15 +1,16 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { ButtonCheckboxDirective } from './button-checkbox.directive'; import { ButtonRadioDirective } from './button-radio.directive'; import { ButtonRadioGroupDirective } from './button-radio-group.directive'; @NgModule({ - declarations: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], - exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] + imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], + exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] }) export class ButtonsModule { - static forRoot(): ModuleWithProviders { - return { ngModule: ButtonsModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return ButtonsModule; } } diff --git a/src/buttons/package.json b/src/buttons/package.json index 25e606aaf8..d37d360daa 100644 --- a/src/buttons/package.json +++ b/src/buttons/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/buttons", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/buttons/testing/button.directive.spec.ts b/src/buttons/testing/button.directive.spec.ts index 838a954020..618520f884 100644 --- a/src/buttons/testing/button.directive.spec.ts +++ b/src/buttons/testing/button.directive.spec.ts @@ -3,7 +3,11 @@ import { ComponentFixture, ComponentFixtureAutoDetect, fakeAsync, TestBed, tick import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ButtonsModule } from '../index'; -@Component({ selector: 'buttons-test', template: '' }) +@Component({ + selector: 'buttons-test', template: '', + standalone: true, + imports: [ButtonsModule, FormsModule, ReactiveFormsModule] +}) class TestButtonsComponent implements OnInit { singleModel = '0'; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -136,10 +140,9 @@ describe('Directive: Buttons', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - declarations: [TestButtonsComponent], - imports: [ButtonsModule, FormsModule, ReactiveFormsModule], - providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }] - }); + imports: [ButtonsModule, FormsModule, ReactiveFormsModule, TestButtonsComponent], + providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }] +}); }) ); diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index 366ed1ac82..c47e370251 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -18,7 +18,7 @@ import { Component, EventEmitter, Input, NgZone, OnDestroy, Output, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core'; -import { isPlatformBrowser } from '@angular/common'; +import { isPlatformBrowser, NgIf, NgFor, NgStyle } from '@angular/common'; import { LinkedList, getBsVer, IBsVersion } from 'ngx-bootstrap/utils'; import { SlideComponent } from './slide.component'; @@ -38,8 +38,10 @@ let _currentId = 1; * Base element to create carousel */ @Component({ - selector: 'carousel', - templateUrl: './carousel.component.html' + selector: 'carousel', + templateUrl: './carousel.component.html', + standalone: true, + imports: [NgIf, NgFor, NgStyle] }) export class CarouselComponent implements AfterViewInit, OnDestroy { /* If `true` — carousel will not cycle continuously and will have hard stops (prevent looping) */ diff --git a/src/carousel/carousel.module.ts b/src/carousel/carousel.module.ts index 03a86e0389..177452e83c 100644 --- a/src/carousel/carousel.module.ts +++ b/src/carousel/carousel.module.ts @@ -1,16 +1,15 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CarouselComponent } from './carousel.component'; import { SlideComponent } from './slide.component'; @NgModule({ - imports: [CommonModule], - declarations: [SlideComponent, CarouselComponent], - exports: [SlideComponent, CarouselComponent] + imports: [SlideComponent, CarouselComponent], + exports: [SlideComponent, CarouselComponent] }) export class CarouselModule { - static forRoot(): ModuleWithProviders { - return { ngModule: CarouselModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return CarouselModule; } } diff --git a/src/carousel/package.json b/src/carousel/package.json index a8e3144d42..e1f4da7134 100644 --- a/src/carousel/package.json +++ b/src/carousel/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/carousel", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/carousel/slide.component.ts b/src/carousel/slide.component.ts index 87c310cc5b..3f4940904a 100644 --- a/src/carousel/slide.component.ts +++ b/src/carousel/slide.component.ts @@ -9,18 +9,18 @@ import { import { CarouselComponent } from './carousel.component'; @Component({ - selector: 'slide', - template: ` + selector: 'slide', + template: `
`, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[attr.aria-hidden]': '!active', - '[class.multilist-margin]': 'multilist' - }, - styles: [` + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[attr.aria-hidden]': '!active', + '[class.multilist-margin]': 'multilist' + }, + styles: [` :host.carousel-animation { transition: opacity 0.6s ease, visibility 0.6s ease; float: left; @@ -41,7 +41,8 @@ import { CarouselComponent } from './carousel.component'; :host.carousel-item { perspective: 1000px; } - `] + `], + standalone: true }) export class SlideComponent implements OnInit, OnDestroy { /** Is current slide active */ diff --git a/src/carousel/testing/carousel.component.spec.ts b/src/carousel/testing/carousel.component.spec.ts index f910e07310..332d6857e0 100644 --- a/src/carousel/testing/carousel.component.spec.ts +++ b/src/carousel/testing/carousel.component.spec.ts @@ -4,8 +4,13 @@ import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testin import '../../../scripts/jest/toHaveCssClass'; import { CarouselModule } from '../index'; import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils'; +import { CommonModule } from '@angular/common'; -@Component({ selector: 'carousel-test', template: '' }) +@Component({ + selector: 'carousel-test', template: '', + standalone: true, + imports: [CommonModule, CarouselModule] +}) class TestCarouselComponent { myInterval = 5000; noWrapSlides = false; @@ -84,9 +89,8 @@ describe('Component: Carousel', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestCarouselComponent], - imports: [CarouselModule] - }); + imports: [CarouselModule, TestCarouselComponent] +}); TestBed.overrideComponent(TestCarouselComponent, { set: { template: html } }); diff --git a/src/chronos/package.json b/src/chronos/package.json index 59b022b551..d6be16bbc2 100644 --- a/src/chronos/package.json +++ b/src/chronos/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/chronos", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts index 9c9ca36a97..c69338234a 100644 --- a/src/collapse/collapse.directive.ts +++ b/src/collapse/collapse.directive.ts @@ -21,12 +21,13 @@ import { } from './collapse-animations'; @Directive({ - selector: '[collapse]', - exportAs: 'bs-collapse', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[class.collapse]': 'true' - } + selector: '[collapse]', + exportAs: 'bs-collapse', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[class.collapse]': 'true' + }, + standalone: true }) export class CollapseDirective implements AfterViewChecked { /** This event fires as soon as content collapses */ diff --git a/src/collapse/collapse.module.ts b/src/collapse/collapse.module.ts index 94751fb209..769cddbde2 100644 --- a/src/collapse/collapse.module.ts +++ b/src/collapse/collapse.module.ts @@ -1,13 +1,14 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CollapseDirective } from './collapse.directive'; @NgModule({ - declarations: [CollapseDirective], - exports: [CollapseDirective] + imports: [CollapseDirective], + exports: [CollapseDirective] }) export class CollapseModule { - static forRoot(): ModuleWithProviders { - return { ngModule: CollapseModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return CollapseModule; } } diff --git a/src/collapse/package.json b/src/collapse/package.json index 5f137f3b3c..994c31561c 100644 --- a/src/collapse/package.json +++ b/src/collapse/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/collapse", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/collapse/testing/collapse.directive.spec.ts b/src/collapse/testing/collapse.directive.spec.ts index 27d0e25ec1..90c42c8d1a 100644 --- a/src/collapse/testing/collapse.directive.spec.ts +++ b/src/collapse/testing/collapse.directive.spec.ts @@ -13,8 +13,10 @@ const template = ` `; @Component({ - selector: 'collapse-test', - template + selector: 'collapse-test', + template, + standalone: true, + imports: [CollapseModule] }) class TestCollapseComponent {} @@ -28,12 +30,12 @@ describe('Directive: Collapse', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestCollapseComponent], - imports: [ + imports: [ CollapseModule, - BrowserAnimationsModule - ] - }); + BrowserAnimationsModule, + TestCollapseComponent + ] +}); fixture = TestBed.createComponent(TestCollapseComponent); fixture.detectChanges(); context = fixture.componentInstance; diff --git a/src/component-loader/package.json b/src/component-loader/package.json index 33cb1b1a24..d0f479a3e9 100644 --- a/src/component-loader/package.json +++ b/src/component-loader/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/component-loader", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/datepicker/bs-datepicker-inline.component.ts b/src/datepicker/bs-datepicker-inline.component.ts index d47457dad8..dc41e915c2 100644 --- a/src/datepicker/bs-datepicker-inline.component.ts +++ b/src/datepicker/bs-datepicker-inline.component.ts @@ -25,8 +25,10 @@ import { copyTime } from './utils/copy-time-utils'; import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-utils'; @Directive({ - selector: 'bs-datepicker-inline', - exportAs: 'bsDatepickerInline' + selector: 'bs-datepicker-inline', + exportAs: 'bsDatepickerInline', + standalone: true, + providers: [ComponentLoaderFactory] }) export class BsDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges { /** diff --git a/src/datepicker/bs-datepicker-input.directive.ts b/src/datepicker/bs-datepicker-input.directive.ts index dceac0a139..98d9d4b87f 100644 --- a/src/datepicker/bs-datepicker-input.directive.ts +++ b/src/datepicker/bs-datepicker-input.directive.ts @@ -49,8 +49,13 @@ const BS_DATEPICKER_VALIDATOR: Provider = { }; @Directive({ - selector: `input[bsDatepicker]`, - providers: [BS_DATEPICKER_VALUE_ACCESSOR, BS_DATEPICKER_VALIDATOR] + selector: `input[bsDatepicker]`, + providers: [ + BsLocaleService, + BS_DATEPICKER_VALUE_ACCESSOR, + BS_DATEPICKER_VALIDATOR + ], + standalone: true }) export class BsDatepickerInputDirective implements ControlValueAccessor, Validator, OnInit, OnDestroy { private _onChange = Function.prototype; diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts index c3a1c69e67..e17cc59516 100644 --- a/src/datepicker/bs-datepicker.component.ts +++ b/src/datepicker/bs-datepicker.component.ts @@ -25,8 +25,10 @@ import { checkBsValue, setCurrentTimeOnDateSelect } from './utils/bs-calendar-ut export let previousDate: Date | Date[] | undefined; @Directive({ - selector: '[bsDatepicker]', - exportAs: 'bsDatepicker' + selector: '[bsDatepicker]', + exportAs: 'bsDatepicker', + providers: [ComponentLoaderFactory], + standalone: true }) export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges, AfterViewInit { /** diff --git a/src/datepicker/bs-datepicker.module.ts b/src/datepicker/bs-datepicker.module.ts index 76b6920f14..88abae332f 100644 --- a/src/datepicker/bs-datepicker.module.ts +++ b/src/datepicker/bs-datepicker.module.ts @@ -1,10 +1,8 @@ import { CommonModule } from '@angular/common'; -import { ModuleWithProviders, NgModule } from '@angular/core'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; -import { PositioningService } from 'ngx-bootstrap/positioning'; +import { NgModule } from '@angular/core'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; -import { TimepickerModule, TimepickerActions } from 'ngx-bootstrap/timepicker'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; import { BsDatepickerInputDirective } from './bs-datepicker-input.directive'; import { BsDatepickerDirective } from './bs-datepicker.component'; @@ -13,10 +11,6 @@ import { BsDaterangepickerDirective } from './bs-daterangepicker.component'; import { BsDatepickerInlineDirective } from './bs-datepicker-inline.component'; -import { BsLocaleService } from './bs-locale.service'; -import { BsDatepickerActions } from './reducer/bs-datepicker.actions'; -import { BsDatepickerEffects } from './reducer/bs-datepicker.effects'; -import { BsDatepickerStore } from './reducer/bs-datepicker.store'; import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component'; import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component'; @@ -36,9 +30,7 @@ import { BsTimepickerViewComponent } from './themes/bs/bs-timepicker-view.compon import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view.component'; @NgModule({ - imports: [CommonModule, TooltipModule, TimepickerModule], - declarations: [ - BsCalendarLayoutComponent, + imports: [CommonModule, TooltipModule, TimepickerModule, BsCalendarLayoutComponent, BsCurrentDateViewComponent, BsCustomDatesViewComponent, BsDatepickerDayDecoratorComponent, @@ -56,8 +48,7 @@ import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view BsDaterangepickerDirective, BsDaterangepickerInlineContainerComponent, BsDaterangepickerInlineDirective, - BsDaterangepickerInputDirective - ], + BsDaterangepickerInputDirective], exports: [ BsDatepickerContainerComponent, BsDatepickerDirective, @@ -72,18 +63,8 @@ import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view ] }) export class BsDatepickerModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: BsDatepickerModule, - providers: [ - ComponentLoaderFactory, - PositioningService, - BsDatepickerStore, - BsDatepickerActions, - BsDatepickerEffects, - BsLocaleService, - TimepickerActions - ] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return BsDatepickerModule; } } diff --git a/src/datepicker/bs-daterangepicker-inline.component.ts b/src/datepicker/bs-daterangepicker-inline.component.ts index 2570ced468..0d1e0fd341 100644 --- a/src/datepicker/bs-daterangepicker-inline.component.ts +++ b/src/datepicker/bs-daterangepicker-inline.component.ts @@ -20,7 +20,11 @@ import { @Directive({ selector: 'bs-daterangepicker-inline', - exportAs: 'bsDaterangepickerInline' + exportAs: 'bsDaterangepickerInline', + standalone: true, + providers: [ + ComponentLoaderFactory + ] }) export class BsDaterangepickerInlineDirective implements OnInit, OnDestroy, OnChanges { _bsValue?: (Date|undefined)[] | undefined; diff --git a/src/datepicker/bs-daterangepicker-input.directive.ts b/src/datepicker/bs-daterangepicker-input.directive.ts index 89a659060f..7c5750ce6f 100644 --- a/src/datepicker/bs-daterangepicker-input.directive.ts +++ b/src/datepicker/bs-daterangepicker-input.directive.ts @@ -49,15 +49,20 @@ const BS_DATERANGEPICKER_VALIDATOR: Provider = { @Directive({ - selector: `input[bsDaterangepicker]`, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '(change)': 'onChange($event)', - '(keyup.esc)': 'hide()', - '(keydown)': 'onKeydownEvent($event)', - '(blur)': 'onBlur()' - }, - providers: [BS_DATERANGEPICKER_VALUE_ACCESSOR, BS_DATERANGEPICKER_VALIDATOR] + selector: `input[bsDaterangepicker]`, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '(change)': 'onChange($event)', + '(keyup.esc)': 'hide()', + '(keydown)': 'onKeydownEvent($event)', + '(blur)': 'onBlur()' + }, + providers: [ + BsLocaleService, + BS_DATERANGEPICKER_VALUE_ACCESSOR, + BS_DATERANGEPICKER_VALIDATOR + ], + standalone: true }) export class BsDaterangepickerInputDirective implements ControlValueAccessor, Validator, OnInit, OnDestroy { diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts index 7a2773af94..fa7bac9dbf 100644 --- a/src/datepicker/bs-daterangepicker.component.ts +++ b/src/datepicker/bs-daterangepicker.component.ts @@ -22,8 +22,12 @@ export let previousDate: (Date | undefined)[] | undefined; @Directive({ - selector: '[bsDaterangepicker]', - exportAs: 'bsDaterangepicker' + selector: '[bsDaterangepicker]', + exportAs: 'bsDaterangepicker', + standalone: true, + providers: [ + ComponentLoaderFactory + ] }) export class BsDaterangepickerDirective implements OnInit, OnDestroy, OnChanges, AfterViewInit { diff --git a/src/datepicker/package.json b/src/datepicker/package.json index e6aec3d959..13b0b449e2 100644 --- a/src/datepicker/package.json +++ b/src/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/datepicker", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts index eab3b3d894..d18f46b7cb 100644 --- a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts +++ b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts @@ -8,8 +8,8 @@ import { BsDatepickerDayDecoratorComponent } from '../themes/bs/bs-datepicker-da import '../../../scripts/jest/toHaveCssClass'; @Component({ - selector: 'test-cmp', - template: `{{ day.label }}` + selector: 'test-cmp', + template: `{{ day.label }}`, }) class TestComponent { day: DayViewModel = { date: new Date(), label: '' }; @@ -32,10 +32,11 @@ describe('datepicker: [bsDatepickerDayDecorator]', () => { beforeEach(waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent, BsDatepickerDayDecoratorComponent], + declarations: [TestComponent], + imports: [BsDatepickerDayDecoratorComponent], providers: [BsDatepickerConfig] - }).compileComponents() - )); + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); diff --git a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts index c7319bb339..20cf6f7b5c 100644 --- a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts +++ b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts @@ -5,12 +5,12 @@ import { BsDatepickerNavigationViewComponent } from '../themes/bs/bs-datepicker- @Component({ - selector: 'test-cmp', - template: ` + selector: 'test-cmp', + template: ` ` + >`, }) class TestComponent { month!: DaysCalendarViewModel; @@ -54,9 +54,10 @@ describe('datepicker: bs-datepicker-navigation-view', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent, BsDatepickerNavigationViewComponent] - }).compileComponents() - )); + declarations: [TestComponent], + imports: [BsDatepickerNavigationViewComponent] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); }); diff --git a/src/datepicker/testing/bs-datepicker-utils.spec.ts b/src/datepicker/testing/bs-datepicker-utils.spec.ts index 7a08240f36..5541bb082c 100644 --- a/src/datepicker/testing/bs-datepicker-utils.spec.ts +++ b/src/datepicker/testing/bs-datepicker-utils.spec.ts @@ -15,7 +15,7 @@ describe('daterangepicker:', () => { beforeEach( waitForAsync(() => TestBed.configureTestingModule({ imports: [ - BsDatepickerModule.forRoot(), + BsDatepickerModule, BrowserAnimationsModule ] }).compileComponents() diff --git a/src/datepicker/testing/bs-datepicker.spec.ts b/src/datepicker/testing/bs-datepicker.spec.ts index 560a5abac3..b9bb957a2e 100644 --- a/src/datepicker/testing/bs-datepicker.spec.ts +++ b/src/datepicker/testing/bs-datepicker.spec.ts @@ -11,10 +11,10 @@ import { BsDatepickerViewMode, CalendarCellViewModel, WeekViewModel } from '../m import { BsDatepickerContainerComponent } from '../themes/bs/bs-datepicker-container.component'; @Component({ - selector: 'test-cmp', - template: `` + [bsConfig]='bsConfig'>`, }) class TestComponent { @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective; @@ -55,12 +55,12 @@ describe('datepicker:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent], - imports: [ - BsDatepickerModule.forRoot(), - BrowserAnimationsModule - ] - }).compileComponents() + declarations: [TestComponent], + imports: [ + BsDatepickerModule, + BrowserAnimationsModule + ] +}).compileComponents() )); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); diff --git a/src/datepicker/testing/bs-daterangepicker.spec.ts b/src/datepicker/testing/bs-daterangepicker.spec.ts index 617235f365..9fa64bcb8f 100644 --- a/src/datepicker/testing/bs-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-daterangepicker.spec.ts @@ -13,7 +13,7 @@ import { firstValueFrom } from 'rxjs'; selector: 'test-cmp', template: `` + [bsConfig]="bsConfig">`, }) class TestComponent { @ViewChild(BsDaterangepickerDirective, { static: false }) daterangepicker: BsDaterangepickerDirective; @@ -54,13 +54,13 @@ describe('daterangepicker:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent], - imports: [ - BsDatepickerModule.forRoot(), - BrowserAnimationsModule - ] - }).compileComponents() - )); + declarations: [TestComponent], + imports: [ + BsDatepickerModule, + BrowserAnimationsModule + ] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); diff --git a/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts b/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts index 72bb0d28b5..6b76deb7ed 100644 --- a/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts +++ b/src/datepicker/testing/bs-inline-datepicker-minmode-year.spec.ts @@ -13,8 +13,9 @@ import { CalendarCellViewModel } from '../models'; import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; @Component({ - selector: 'test-cmp', - template: `>` + selector: 'test-cmp', + template: `>`, + standalone: true }) class TestComponent { @ViewChild(BsDatepickerInlineDirective, { static: false }) datepicker: BsDatepickerInlineDirective; @@ -38,12 +39,12 @@ xdescribe('datepicker inline minMode="year":', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent], - imports: [ - BsDatepickerModule.forRoot(), - BrowserAnimationsModule - ] - }).compileComponents() + imports: [ + BsDatepickerModule, + BrowserAnimationsModule, + TestComponent + ] +}).compileComponents() )); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); diff --git a/src/datepicker/testing/bs-inline-datepicker.spec.ts b/src/datepicker/testing/bs-inline-datepicker.spec.ts index 9016d2cb8b..87909cd339 100644 --- a/src/datepicker/testing/bs-inline-datepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-datepicker.spec.ts @@ -12,8 +12,8 @@ import { take } from 'rxjs/operators'; import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; @Component({ - selector: 'test-cmp', - template: `>` + selector: 'test-cmp', + template: `>` }) class TestComponent { @ViewChild(BsDatepickerInlineDirective, { static: false }) datepicker: BsDatepickerInlineDirective; @@ -39,13 +39,12 @@ describe('datepicker inline:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent], - imports: [ - BsDatepickerModule.forRoot(), - BrowserAnimationsModule - ] - }).compileComponents() - )); + declarations: [TestComponent], + imports: [ + BsDatepickerModule, + BrowserAnimationsModule + ]}).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); diff --git a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts index 4f4d4df06a..1a9651a946 100644 --- a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts @@ -11,8 +11,8 @@ import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; import { initialYearShift } from '../engine/format-years-calendar'; @Component({ - selector: 'test-cmp', - template: ` + selector: 'test-cmp', + template: ` ` }) class TestComponent { @@ -40,13 +40,13 @@ describe('daterangepicker inline:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent], - imports: [ - BsDatepickerModule.forRoot(), - BrowserAnimationsModule - ] - }).compileComponents() - )); + declarations: [TestComponent], + imports: [ + BsDatepickerModule, + BrowserAnimationsModule + ] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); diff --git a/src/datepicker/themes/bs/bs-calendar-layout.component.ts b/src/datepicker/themes/bs/bs-calendar-layout.component.ts index a15a4cecb6..5a28eaaad1 100644 --- a/src/datepicker/themes/bs/bs-calendar-layout.component.ts +++ b/src/datepicker/themes/bs/bs-calendar-layout.component.ts @@ -1,8 +1,11 @@ import { Component } from '@angular/core'; +import { BsTimepickerViewComponent } from './bs-timepicker-view.component'; +import { BsCurrentDateViewComponent } from './bs-current-date-view.component'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'bs-calendar-layout', - template: ` + selector: 'bs-calendar-layout', + template: ` @@ -17,6 +20,8 @@ import { Component } from '@angular/core'; - ` + `, + standalone: true, + imports: [NgIf, BsCurrentDateViewComponent, BsTimepickerViewComponent] }) export class BsCalendarLayoutComponent {} diff --git a/src/datepicker/themes/bs/bs-current-date-view.component.ts b/src/datepicker/themes/bs/bs-current-date-view.component.ts index 081839b6bd..530f5e8921 100644 --- a/src/datepicker/themes/bs/bs-current-date-view.component.ts +++ b/src/datepicker/themes/bs/bs-current-date-view.component.ts @@ -1,8 +1,9 @@ import { Component, Input } from '@angular/core'; @Component({ - selector: 'bs-current-date', - template: `
{{ title }}
` + selector: 'bs-current-date', + template: `
{{ title }}
`, + standalone: true }) export class BsCurrentDateViewComponent { @Input() title?: string; diff --git a/src/datepicker/themes/bs/bs-custom-dates-view.component.ts b/src/datepicker/themes/bs/bs-custom-dates-view.component.ts index ea84edb1df..9bc17f543b 100644 --- a/src/datepicker/themes/bs/bs-custom-dates-view.component.ts +++ b/src/datepicker/themes/bs/bs-custom-dates-view.component.ts @@ -1,4 +1,5 @@ import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core'; +import { NgFor } from '@angular/common'; export interface BsCustomDates { label: string; @@ -6,8 +7,8 @@ export interface BsCustomDates { } @Component({ - selector: 'bs-custom-date-view', - template: ` + selector: 'bs-custom-date-view', + template: `
`, - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgFor] }) export class BsCustomDatesViewComponent { @Input() ranges?: BsCustomDates[]; diff --git a/src/datepicker/themes/bs/bs-datepicker-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-container.component.ts index 51162c53d0..c2913bfbca 100644 --- a/src/datepicker/themes/bs/bs-datepicker-container.component.ts +++ b/src/datepicker/themes/bs/bs-datepicker-container.component.ts @@ -24,18 +24,28 @@ import { CalendarCellViewModel, DayViewModel } from '../../models'; import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions'; import { BsDatepickerEffects } from '../../reducer/bs-datepicker.effects'; import { BsDatepickerStore } from '../../reducer/bs-datepicker.store'; +import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component'; +import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component'; +import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; +import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; @Component({ - selector: 'bs-datepicker-container', - providers: [BsDatepickerStore, BsDatepickerEffects], - templateUrl: './bs-datepicker-view.html', - host: { - class: 'bottom', - '(click)': '_stopPropagation($event)', - role: 'dialog', - 'aria-label': 'calendar' - }, - animations: [datepickerAnimation] + selector: 'bs-datepicker-container', + providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], + templateUrl: './bs-datepicker-view.html', + host: { + class: 'bottom', + '(click)': '_stopPropagation($event)', + role: 'dialog', + 'aria-label': 'calendar' + }, + animations: [datepickerAnimation], + standalone: true, + imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, + BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe + ] }) export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent diff --git a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts index 2fab4ba25b..3cefe25748 100644 --- a/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts +++ b/src/datepicker/themes/bs/bs-datepicker-day-decorator.directive.ts @@ -11,19 +11,20 @@ import { BsDatepickerConfig } from '../../bs-datepicker.config'; import { DayViewModel } from '../../models'; @Component({ - selector: '[bsDatepickerDayDecorator]', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - '[class.disabled]': 'day.isDisabled', - '[class.is-highlighted]': 'day.isHovered', - '[class.is-other-month]': 'day.isOtherMonth', - '[class.is-active-other-month]': 'day.isOtherMonthHovered', - '[class.in-range]': 'day.isInRange', - '[class.select-start]': 'day.isSelectionStart', - '[class.select-end]': 'day.isSelectionEnd', - '[class.selected]': 'day.isSelected' - }, - template: `{{ day && day.label || '' }}` + selector: '[bsDatepickerDayDecorator]', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + '[class.disabled]': 'day.isDisabled', + '[class.is-highlighted]': 'day.isHovered', + '[class.is-other-month]': 'day.isOtherMonth', + '[class.is-active-other-month]': 'day.isOtherMonthHovered', + '[class.in-range]': 'day.isInRange', + '[class.select-start]': 'day.isSelectionStart', + '[class.select-end]': 'day.isSelectionEnd', + '[class.selected]': 'day.isSelected' + }, + template: `{{ day && day.label || '' }}`, + standalone: true }) export class BsDatepickerDayDecoratorComponent implements OnInit { @Input() day: DayViewModel = { date: new Date(), label: '' }; diff --git a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts index 749804be27..184a8eec67 100644 --- a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts +++ b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts @@ -8,15 +8,23 @@ import { BsDatepickerStore } from '../../reducer/bs-datepicker.store'; import { PositioningService } from 'ngx-bootstrap/positioning'; import { datepickerAnimation } from '../../datepicker-animations'; +import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component'; +import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component'; +import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; +import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; @Component({ - selector: 'bs-datepicker-inline-container', - providers: [BsDatepickerStore, BsDatepickerEffects], - templateUrl: './bs-datepicker-view.html', - host: { - '(click)': '_stopPropagation($event)' - }, - animations: [datepickerAnimation] + selector: 'bs-datepicker-inline-container', + providers: [BsDatepickerStore, BsDatepickerEffects, PositioningService], + templateUrl: './bs-datepicker-view.html', + host: { + '(click)': '_stopPropagation($event)' + }, + animations: [datepickerAnimation], + standalone: true, + imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe] }) export class BsDatepickerInlineContainerComponent extends BsDatepickerContainerComponent implements OnInit, OnDestroy { diff --git a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts index 406db3e13e..415122349d 100644 --- a/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts +++ b/src/datepicker/themes/bs/bs-datepicker-navigation-view.component.ts @@ -1,10 +1,11 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { BsDatepickerViewMode, BsNavigationDirection, NavigationViewModel } from '../../models'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'bs-datepicker-navigation-view', - changeDetection: ChangeDetectionStrategy.OnPush, - template: ` + selector: 'bs-datepicker-navigation-view', + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` - ` + `, + standalone: true, + imports: [NgIf] }) export class BsDatepickerNavigationViewComponent { @Input() calendar!: NavigationViewModel; diff --git a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts index 5dc2c65c26..b930213239 100644 --- a/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts +++ b/src/datepicker/themes/bs/bs-daterangepicker-container.component.ts @@ -24,20 +24,39 @@ import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions'; import { BsDatepickerEffects } from '../../reducer/bs-datepicker.effects'; import { BsDatepickerStore } from '../../reducer/bs-datepicker.store'; import { datepickerAnimation } from '../../datepicker-animations'; -import { BsCustomDates } from './bs-custom-dates-view.component'; +import { BsCustomDates, BsCustomDatesViewComponent } from './bs-custom-dates-view.component'; import { dayInMilliseconds } from '../../reducer/_defaults'; +import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component'; +import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; +import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; @Component({ - selector: 'bs-daterangepicker-container', - providers: [BsDatepickerStore, BsDatepickerEffects], - templateUrl: './bs-datepicker-view.html', - host: { - class: 'bottom', - '(click)': '_stopPropagation($event)', - role: 'dialog', - 'aria-label': 'calendar' - }, - animations: [datepickerAnimation] + selector: 'bs-daterangepicker-container', + providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], + templateUrl: './bs-datepicker-view.html', + host: { + class: 'bottom', + '(click)': '_stopPropagation($event)', + role: 'dialog', + 'aria-label': 'calendar' + }, + animations: [datepickerAnimation], + standalone: true, + imports: [ + NgIf, + NgClass, + NgSwitch, + NgSwitchCase, + NgFor, + BsDaysCalendarViewComponent, + TimepickerModule, + BsMonthCalendarViewComponent, + BsYearsCalendarViewComponent, + BsCustomDatesViewComponent, + AsyncPipe + ] }) export class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent diff --git a/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts b/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts index 62ec9084b6..df68a3ced9 100644 --- a/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts +++ b/src/datepicker/themes/bs/bs-daterangepicker-inline-container.component.ts @@ -8,15 +8,23 @@ import { BsDatepickerStore } from '../../reducer/bs-datepicker.store'; import { PositioningService } from 'ngx-bootstrap/positioning'; import { datepickerAnimation } from '../../datepicker-animations'; +import { BsCustomDatesViewComponent } from './bs-custom-dates-view.component'; +import { BsYearsCalendarViewComponent } from './bs-years-calendar-view.component'; +import { BsMonthCalendarViewComponent } from './bs-months-calendar-view.component'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; +import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; +import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; @Component({ - selector: 'bs-daterangepicker-inline-container', - providers: [BsDatepickerStore, BsDatepickerEffects], - templateUrl: './bs-datepicker-view.html', - host: { - '(click)': '_stopPropagation($event)' - }, - animations: [datepickerAnimation] + selector: 'bs-daterangepicker-inline-container', + providers: [BsDatepickerStore, BsDatepickerEffects, BsDatepickerActions, PositioningService], + templateUrl: './bs-datepicker-view.html', + host: { + '(click)': '_stopPropagation($event)' + }, + animations: [datepickerAnimation], + standalone: true, + imports: [NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, BsDaysCalendarViewComponent, TimepickerModule, BsMonthCalendarViewComponent, BsYearsCalendarViewComponent, BsCustomDatesViewComponent, AsyncPipe] }) export class BsDaterangepickerInlineContainerComponent extends BsDaterangepickerContainerComponent implements OnInit, OnDestroy { diff --git a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts index e4a4ee05bc..5d17b3096f 100644 --- a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts @@ -18,11 +18,16 @@ import { } from '../../models'; import { BsDatepickerConfig } from '../../bs-datepicker.config'; +import { TooltipModule } from 'ngx-bootstrap/tooltip'; +import { BsDatepickerDayDecoratorComponent } from './bs-datepicker-day-decorator.directive'; +import { NgIf, NgFor } from '@angular/common'; +import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component'; +import { BsCalendarLayoutComponent } from './bs-calendar-layout.component'; @Component({ - selector: 'bs-days-calendar-view', - // changeDetection: ChangeDetectionStrategy.OnPush, - template: ` + selector: 'bs-days-calendar-view', + // changeDetection: ChangeDetectionStrategy.OnPush, + template: ` - ` + `, + standalone: true, + imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgIf, NgFor, BsDatepickerDayDecoratorComponent, TooltipModule] }) export class BsDaysCalendarViewComponent { @Input() calendar!: DaysCalendarViewModel; diff --git a/src/datepicker/themes/bs/bs-months-calendar-view.component.ts b/src/datepicker/themes/bs/bs-months-calendar-view.component.ts index be554adc1d..cc7f911eed 100644 --- a/src/datepicker/themes/bs/bs-months-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-months-calendar-view.component.ts @@ -7,10 +7,13 @@ import { MonthsCalendarViewModel, CalendarCellViewModel } from '../../models'; +import { NgFor } from '@angular/common'; +import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component'; +import { BsCalendarLayoutComponent } from './bs-calendar-layout.component'; @Component({ - selector: 'bs-month-calendar-view', - template: ` + selector: 'bs-month-calendar-view', + template: ` - ` + `, + standalone: true, + imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor] }) export class BsMonthCalendarViewComponent { @Input() calendar!: MonthsCalendarViewModel; diff --git a/src/datepicker/themes/bs/bs-timepicker-view.component.ts b/src/datepicker/themes/bs/bs-timepicker-view.component.ts index 6b666da4e3..4fa22243d5 100644 --- a/src/datepicker/themes/bs/bs-timepicker-view.component.ts +++ b/src/datepicker/themes/bs/bs-timepicker-view.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; @Component({ - selector: 'bs-timepicker', - template: ` + selector: 'bs-timepicker', + template: `
@@ -20,7 +20,8 @@ import { Component } from '@angular/core'; alt="">
- ` + `, + standalone: true }) export class BsTimepickerViewComponent { ampm = 'ok'; diff --git a/src/datepicker/themes/bs/bs-years-calendar-view.component.ts b/src/datepicker/themes/bs/bs-years-calendar-view.component.ts index 5b0a658c29..7641aeb478 100644 --- a/src/datepicker/themes/bs/bs-years-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-years-calendar-view.component.ts @@ -8,10 +8,13 @@ import { CellHoverEvent, YearsCalendarViewModel } from '../../models'; +import { NgFor } from '@angular/common'; +import { BsDatepickerNavigationViewComponent } from './bs-datepicker-navigation-view.component'; +import { BsCalendarLayoutComponent } from './bs-calendar-layout.component'; @Component({ - selector: 'bs-years-calendar-view', - template: ` + selector: 'bs-years-calendar-view', + template: ` - ` + `, + standalone: true, + imports: [BsCalendarLayoutComponent, BsDatepickerNavigationViewComponent, NgFor] }) export class BsYearsCalendarViewComponent { @Input() calendar!: YearsCalendarViewModel; diff --git a/src/dropdown/bs-dropdown-container.component.ts b/src/dropdown/bs-dropdown-container.component.ts index e24ce958aa..ea8e5749a8 100644 --- a/src/dropdown/bs-dropdown-container.component.ts +++ b/src/dropdown/bs-dropdown-container.component.ts @@ -12,12 +12,15 @@ import { BsDropdownState } from './bs-dropdown.state'; import { dropdownAnimation } from './dropdown-animations'; import { AnimationBuilder, AnimationFactory } from '@angular/animations'; import { Subscription } from 'rxjs'; +import { NgClass } from '@angular/common'; // todo: revert ngClass to [class] when false positive angular-cli issue is fixed // [class.dropdown]="direction === 'down'"--> @Component({ selector: 'bs-dropdown-container', changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgClass], // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { style: 'display:block;position: absolute;z-index: 1040' @@ -28,7 +31,8 @@ import { Subscription } from 'rxjs'; [class.show]="isOpen" [class.open]="isOpen">
- ` + `, + providers: [BsDropdownState] }) export class BsDropdownContainerComponent implements OnDestroy { isOpen = false; diff --git a/src/dropdown/bs-dropdown-menu.directive.ts b/src/dropdown/bs-dropdown-menu.directive.ts index 2fdc8898cd..5bc064e579 100644 --- a/src/dropdown/bs-dropdown-menu.directive.ts +++ b/src/dropdown/bs-dropdown-menu.directive.ts @@ -3,7 +3,8 @@ import { BsDropdownState } from './bs-dropdown.state'; @Directive({ selector: '[bsDropdownMenu],[dropdownMenu]', - exportAs: 'bs-dropdown-menu' + exportAs: 'bs-dropdown-menu', + standalone: true }) export class BsDropdownMenuDirective { constructor( diff --git a/src/dropdown/bs-dropdown-toggle.directive.ts b/src/dropdown/bs-dropdown-toggle.directive.ts index a42ec9d076..68566d0e95 100644 --- a/src/dropdown/bs-dropdown-toggle.directive.ts +++ b/src/dropdown/bs-dropdown-toggle.directive.ts @@ -18,7 +18,8 @@ import { BsDropdownDirective } from './bs-dropdown.directive'; // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { '[attr.aria-haspopup]': 'true' - } + }, + standalone: true }) export class BsDropdownToggleDirective implements OnDestroy { @HostBinding('attr.disabled') isDisabled: undefined | true; diff --git a/src/dropdown/bs-dropdown.directive.ts b/src/dropdown/bs-dropdown.directive.ts index e4bff6932e..dd6f4f3578 100644 --- a/src/dropdown/bs-dropdown.directive.ts +++ b/src/dropdown/bs-dropdown.directive.ts @@ -25,7 +25,8 @@ import { dropdownAnimation } from './dropdown-animations'; @Directive({ selector: '[bsDropdown], [dropdown]', exportAs: 'bs-dropdown', - providers: [BsDropdownState], + providers: [BsDropdownState, ComponentLoaderFactory, BsDropdownConfig], + standalone: true, // eslint-disable-next-line @angular-eslint/no-host-metadata-property host: { '[class.dropup]': 'dropup', diff --git a/src/dropdown/bs-dropdown.module.ts b/src/dropdown/bs-dropdown.module.ts index d7b0d8010a..5ab54af6fd 100644 --- a/src/dropdown/bs-dropdown.module.ts +++ b/src/dropdown/bs-dropdown.module.ts @@ -1,22 +1,17 @@ -import { CommonModule } from '@angular/common'; -import { ModuleWithProviders, NgModule } from '@angular/core'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; +import { NgModule } from '@angular/core'; -import { PositioningService } from 'ngx-bootstrap/positioning'; import { BsDropdownContainerComponent } from './bs-dropdown-container.component'; import { BsDropdownMenuDirective } from './bs-dropdown-menu.directive'; import { BsDropdownToggleDirective } from './bs-dropdown-toggle.directive'; import { BsDropdownDirective } from './bs-dropdown.directive'; -import { BsDropdownState } from './bs-dropdown.state'; @NgModule({ - imports: [CommonModule], - declarations: [ - BsDropdownMenuDirective, - BsDropdownToggleDirective, - BsDropdownContainerComponent, - BsDropdownDirective + imports: [ + BsDropdownDirective, + BsDropdownContainerComponent, + BsDropdownMenuDirective, + BsDropdownToggleDirective ], exports: [ BsDropdownMenuDirective, @@ -25,14 +20,8 @@ import { BsDropdownState } from './bs-dropdown.state'; ] }) export class BsDropdownModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: BsDropdownModule, - providers: [ - ComponentLoaderFactory, - PositioningService, - BsDropdownState - ] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return BsDropdownModule; } } diff --git a/src/dropdown/package.json b/src/dropdown/package.json index b979ff0d5f..1c22dd6f4b 100644 --- a/src/dropdown/package.json +++ b/src/dropdown/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/dropdown", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/dropdown/testing/bs-dropdown-container.component.spec.ts b/src/dropdown/testing/bs-dropdown-container.component.spec.ts index be541cfcbb..d9ff630454 100644 --- a/src/dropdown/testing/bs-dropdown-container.component.spec.ts +++ b/src/dropdown/testing/bs-dropdown-container.component.spec.ts @@ -17,7 +17,7 @@ describe('BsDropdownContainerComponent tests', () => { }; TestBed.configureTestingModule({ imports: [ - BsDropdownModule.forRoot(), + BsDropdownModule, BrowserAnimationsModule ], providers: [{ provide: BsDropdownState, useValue: fakeService }] diff --git a/src/dropdown/testing/bs-dropdown.directive.spec.ts b/src/dropdown/testing/bs-dropdown.directive.spec.ts index 52cab11926..173ed3fdff 100644 --- a/src/dropdown/testing/bs-dropdown.directive.spec.ts +++ b/src/dropdown/testing/bs-dropdown.directive.spec.ts @@ -50,7 +50,7 @@ describe('Directive: Dropdown', () => { TestBed.configureTestingModule({ declarations: [TestDropdownComponent], imports: [ - BsDropdownModule.forRoot(), + BsDropdownModule, BrowserAnimationsModule ] }); diff --git a/src/focus-trap/focus-trap.module.ts b/src/focus-trap/focus-trap.module.ts index 4fec94fc00..60ecd48574 100644 --- a/src/focus-trap/focus-trap.module.ts +++ b/src/focus-trap/focus-trap.module.ts @@ -1,25 +1,15 @@ -import { ModuleWithProviders, NgModule } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { FocusTrapManager } from './focus-trap-manager'; -import { InteractivityChecker } from './interactivity-checker'; import { FocusTrapDirective } from './focus-trap'; -import { Platform } from './platform'; @NgModule({ - imports: [CommonModule], - declarations: [FocusTrapDirective], - exports: [FocusTrapDirective] + imports: [CommonModule, FocusTrapDirective], + exports: [FocusTrapDirective] }) export class FocusTrapModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: FocusTrapModule, - providers: [ - FocusTrapManager, - Platform, - InteractivityChecker - ] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return FocusTrapModule; } } diff --git a/src/focus-trap/focus-trap.ts b/src/focus-trap/focus-trap.ts index 42daa06875..bd0c43dc49 100644 --- a/src/focus-trap/focus-trap.ts +++ b/src/focus-trap/focus-trap.ts @@ -25,6 +25,8 @@ import { } from '@angular/core'; import { take } from 'rxjs/operators'; import { InteractivityChecker } from './interactivity-checker'; +import { FocusTrapManager } from './focus-trap-manager'; +import { Platform } from './platform'; /** @@ -386,8 +388,14 @@ export class FocusTrapFactory { /** Directive for trapping focus within a region. */ @Directive({ - selector: '[focusTrap]', - exportAs: 'focusTrap' + selector: '[focusTrap]', + exportAs: 'focusTrap', + standalone: true, + providers: [ + FocusTrapManager, + Platform, + InteractivityChecker + ] }) export class FocusTrapDirective implements OnDestroy, AfterContentInit, OnChanges, DoCheck { private _document: Document; diff --git a/src/focus-trap/package.json b/src/focus-trap/package.json index 798cddf9e9..a68da03899 100644 --- a/src/focus-trap/package.json +++ b/src/focus-trap/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/focus-trap", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/locale/package.json b/src/locale/package.json index f798d0e568..fbe62dc60b 100644 --- a/src/locale/package.json +++ b/src/locale/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/locale", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/mini-ngrx/package.json b/src/mini-ngrx/package.json index 0a88fb31d2..fb562980c5 100644 --- a/src/mini-ngrx/package.json +++ b/src/mini-ngrx/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/mini-ngrx", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/modal/bs-modal.service.ts b/src/modal/bs-modal.service.ts index a5a253b24a..490bf2b4cd 100644 --- a/src/modal/bs-modal.service.ts +++ b/src/modal/bs-modal.service.ts @@ -42,6 +42,7 @@ export class BsModalService { protected backdropRef?: ComponentRef; private _backdropLoader: ComponentLoader; private modalsCount = 0; + private lastHiddenId: number | string | undefined = 0; private lastDismissReason?: string; private loaders: ComponentLoader[] = []; @@ -83,6 +84,10 @@ export class BsModalService { } hide(id?: number | string) { + if (this.lastHiddenId === id) { + return; + } + this.lastHiddenId = id; if (this.modalsCount === 1 || id == null) { this._hideBackdrop(); this.resetScrollbar(); diff --git a/src/modal/modal-backdrop.component.ts b/src/modal/modal-backdrop.component.ts index 3ae8796015..4271a25cf8 100644 --- a/src/modal/modal-backdrop.component.ts +++ b/src/modal/modal-backdrop.component.ts @@ -6,10 +6,11 @@ import { Utils } from 'ngx-bootstrap/utils'; /** This component will be added as background layout for modals if enabled */ @Component({ - selector: 'bs-modal-backdrop', - template: ' ', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { class: CLASS_NAME.BACKDROP } + selector: 'bs-modal-backdrop', + template: ' ', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { class: CLASS_NAME.BACKDROP }, + standalone: true }) export class ModalBackdropComponent implements OnInit { get isAnimated(): boolean { diff --git a/src/modal/modal-container.component.ts b/src/modal/modal-container.component.ts index fd3f09ccb8..5f09ecdd73 100644 --- a/src/modal/modal-container.component.ts +++ b/src/modal/modal-container.component.ts @@ -14,10 +14,11 @@ import { } from './modal-options.class'; import { BsModalService } from './bs-modal.service'; import { document } from 'ngx-bootstrap/utils'; +import { FocusTrapDirective } from 'ngx-bootstrap/focus-trap'; @Component({ - selector: 'modal-container', - template: ` + selector: 'modal-container', + template: `
@@ -26,15 +27,18 @@ import { document } from 'ngx-bootstrap/utils';
`, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - class: 'modal', - role: 'dialog', - tabindex: '-1', - '[attr.aria-modal]': 'true', - '[attr.aria-labelledby]': 'config.ariaLabelledBy', - '[attr.aria-describedby]': 'config.ariaDescribedby' - } + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + class: 'modal', + role: 'dialog', + tabindex: '-1', + '[attr.aria-modal]': 'true', + '[attr.aria-labelledby]': 'config.ariaLabelledBy', + '[attr.aria-describedby]': 'config.ariaDescribedby' + }, + standalone: true, + imports: [FocusTrapDirective], + providers: [BsModalService] }) export class ModalContainerComponent implements OnInit, OnDestroy { config: ModalOptions; diff --git a/src/modal/modal.directive.ts b/src/modal/modal.directive.ts index 0d72bccf62..9093448ca1 100644 --- a/src/modal/modal.directive.ts +++ b/src/modal/modal.directive.ts @@ -20,8 +20,9 @@ const BACKDROP_TRANSITION_DURATION = 150; /** Mark any code with directive to show it's content in modal */ @Directive({ - selector: '[bsModal]', - exportAs: 'bs-modal' + selector: '[bsModal]', + exportAs: 'bs-modal', + standalone: true }) export class ModalDirective implements OnDestroy, OnInit { /** allows to set modal configuration via element property */ diff --git a/src/modal/modal.module.ts b/src/modal/modal.module.ts index 85f0a91b6d..76b5b06e6f 100644 --- a/src/modal/modal.module.ts +++ b/src/modal/modal.module.ts @@ -1,32 +1,33 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { ModuleWithProviders, NgModule } from '@angular/core'; -import { PositioningService } from 'ngx-bootstrap/positioning'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; import { FocusTrapModule } from 'ngx-bootstrap/focus-trap'; import { ModalBackdropComponent } from './modal-backdrop.component'; import { ModalDirective } from './modal.directive'; import { ModalContainerComponent } from './modal-container.component'; import { BsModalService } from './bs-modal.service'; - -export const focusTrapModule = FocusTrapModule.forRoot(); +import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; +import { PositioningService } from 'ngx-bootstrap/positioning'; @NgModule({ - imports: [FocusTrapModule], - declarations: [ - ModalBackdropComponent, - ModalDirective, - ModalContainerComponent + imports: [ + FocusTrapModule, + ModalBackdropComponent, + ModalDirective, + ModalContainerComponent ], exports: [ModalBackdropComponent, ModalDirective] }) export class ModalModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 static forRoot(): ModuleWithProviders { return { ngModule: ModalModule, providers: [BsModalService, ComponentLoaderFactory, PositioningService] }; } + + // @deprecated method not required anymore, will be deleted in v19.0.0 static forChild(): ModuleWithProviders { return { ngModule: ModalModule, diff --git a/src/modal/package.json b/src/modal/package.json index 0b076c8e90..26ad72a93b 100644 --- a/src/modal/package.json +++ b/src/modal/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/modal", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/modal/testing/modal-backdrop.component.spec.ts b/src/modal/testing/modal-backdrop.component.spec.ts index 15afb57292..0a65861a8f 100644 --- a/src/modal/testing/modal-backdrop.component.spec.ts +++ b/src/modal/testing/modal-backdrop.component.spec.ts @@ -6,8 +6,8 @@ describe('ModalBackdropComponent tests', () => { let component: ModalBackdropComponent; beforeEach(() => { TestBed.configureTestingModule({ - declarations: [ModalBackdropComponent] - }); + imports: [ModalBackdropComponent] +}); fixture = TestBed.createComponent(ModalBackdropComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/src/modal/testing/modal.default-setting.spec.ts b/src/modal/testing/modal.default-setting.spec.ts index 22639672c3..5ec395d1f5 100644 --- a/src/modal/testing/modal.default-setting.spec.ts +++ b/src/modal/testing/modal.default-setting.spec.ts @@ -29,7 +29,7 @@ describe('Modal service', () => { TestBed.configureTestingModule({ declarations: [DummyComponent], providers: [BsModalService], - imports: [ModalModule.forRoot(), TestModule] + imports: [ModalModule, TestModule] }); fixture = TestBed.createComponent(DummyComponent); modalService = fixture.debugElement.injector.get(BsModalService); diff --git a/src/modal/testing/modal.service.spec.ts b/src/modal/testing/modal.service.spec.ts index 5e827167cc..c40b8f3e1f 100644 --- a/src/modal/testing/modal.service.spec.ts +++ b/src/modal/testing/modal.service.spec.ts @@ -28,7 +28,7 @@ describe('Modal service', () => { TestBed.configureTestingModule({ declarations: [DummyComponent], providers: [BsModalService], - imports: [ModalModule.forRoot(), TestModule] + imports: [ModalModule, TestModule] }); fixture = TestBed.createComponent(DummyComponent); modalService = fixture.debugElement.injector.get(BsModalService); diff --git a/src/pagination/package.json b/src/pagination/package.json index 65ea992f8e..91a730bb89 100644 --- a/src/pagination/package.json +++ b/src/pagination/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/pagination", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/pagination/pager.component.ts b/src/pagination/pager.component.ts index 92e3e923fb..04347cac08 100644 --- a/src/pagination/pager.component.ts +++ b/src/pagination/pager.component.ts @@ -15,6 +15,7 @@ import { ConfigModel, PagesModel } from './models'; import { PageChangedEvent } from './pagination.component'; import { PaginationConfig } from './pagination.config'; +import { NgClass } from '@angular/common'; export const PAGER_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, @@ -23,9 +24,11 @@ export const PAGER_CONTROL_VALUE_ACCESSOR: Provider = { }; @Component({ - selector: 'pager', - templateUrl: './pager.component.html', - providers: [PAGER_CONTROL_VALUE_ACCESSOR] + selector: 'pager', + templateUrl: './pager.component.html', + providers: [PAGER_CONTROL_VALUE_ACCESSOR], + standalone: true, + imports: [NgClass] }) export class PagerComponent implements ControlValueAccessor, OnInit { config?: Partial; diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts index abfdb1c3f2..9bb0fdee0e 100644 --- a/src/pagination/pagination.component.ts +++ b/src/pagination/pagination.component.ts @@ -14,6 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { ConfigModel, PagesModel, PaginationLinkContext, PaginationNumberLinkContext } from './models'; import { PaginationConfig } from './pagination.config'; +import { NgClass, NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; export interface PageChangedEvent { itemsPerPage: number; @@ -27,9 +28,11 @@ export const PAGINATION_CONTROL_VALUE_ACCESSOR: Provider = { }; @Component({ - selector: 'pagination', - templateUrl: './pagination.component.html', - providers: [PAGINATION_CONTROL_VALUE_ACCESSOR] + selector: 'pagination', + templateUrl: './pagination.component.html', + providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], + standalone: true, + imports: [NgClass, NgIf, NgTemplateOutlet, NgFor] }) export class PaginationComponent implements ControlValueAccessor, OnInit { config?: Partial; diff --git a/src/pagination/pagination.module.ts b/src/pagination/pagination.module.ts index ff9c1a926e..0dc6fd8334 100644 --- a/src/pagination/pagination.module.ts +++ b/src/pagination/pagination.module.ts @@ -1,16 +1,16 @@ import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { PagerComponent } from './pager.component'; import { PaginationComponent } from './pagination.component'; @NgModule({ - imports: [CommonModule], - declarations: [PagerComponent, PaginationComponent], - exports: [PagerComponent, PaginationComponent] + imports: [CommonModule, PagerComponent, PaginationComponent], + exports: [PagerComponent, PaginationComponent] }) export class PaginationModule { - static forRoot(): ModuleWithProviders { - return { ngModule: PaginationModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return PaginationModule; } } diff --git a/src/pagination/testing/pager.component.spec.ts b/src/pagination/testing/pager.component.spec.ts index ebbab050ac..b91ed275ba 100644 --- a/src/pagination/testing/pager.component.spec.ts +++ b/src/pagination/testing/pager.component.spec.ts @@ -16,7 +16,7 @@ describe('Component: Pager:', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [PaginationModule.forRoot()] + imports: [PaginationModule] }); fixture = TestBed.createComponent(PagerComponent); context = fixture.debugElement.componentInstance; diff --git a/src/pagination/testing/pagination.component.spec.ts b/src/pagination/testing/pagination.component.spec.ts index f7633d267b..a48dce7f27 100644 --- a/src/pagination/testing/pagination.component.spec.ts +++ b/src/pagination/testing/pagination.component.spec.ts @@ -14,7 +14,7 @@ describe('Component: Pagination:', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [PaginationModule.forRoot()] + imports: [PaginationModule] }); fixture = TestBed.createComponent(PaginationComponent); context = fixture.debugElement.componentInstance; diff --git a/src/popover/package.json b/src/popover/package.json index 181f647f9a..7f533c3196 100644 --- a/src/popover/package.json +++ b/src/popover/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/popover", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/popover/popover-container.component.ts b/src/popover/popover-container.component.ts index be845b9693..44fe02989c 100644 --- a/src/popover/popover-container.component.ts +++ b/src/popover/popover-container.component.ts @@ -2,22 +2,22 @@ import { ChangeDetectionStrategy, Input, Component } from '@angular/core'; import { PopoverConfig } from './popover.config'; import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils'; import { PlacementForBs5, checkMargins, AvailableBSPositions } from 'ngx-bootstrap/positioning'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'popover-container', - changeDetection: ChangeDetectionStrategy.OnPush, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[attr.id]': 'popoverId', - '[class]': - '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + " " + checkMarginNecessity()', - '[class.show]': '!_bsVersions.isBs3', - '[class.bs3]': '_bsVersions.isBs3', - role: 'tooltip', - style: 'display:block; position:absolute' - }, - styles: [ - ` + selector: 'popover-container', + changeDetection: ChangeDetectionStrategy.OnPush, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[attr.id]': 'popoverId', + '[class]': '"popover in popover-" + _placement + " " + "bs-popover-" + _placement + " " + _placement + " " + containerClass + " " + checkMarginNecessity()', + '[class.show]': '!_bsVersions.isBs3', + '[class.bs3]': '_bsVersions.isBs3', + role: 'tooltip', + style: 'display:block; position:absolute' + }, + styles: [ + ` :host.popover.bottom > .arrow { margin-left: -4px; } @@ -26,8 +26,10 @@ import { PlacementForBs5, checkMargins, AvailableBSPositions } from 'ngx-bootstr position: absolute; } ` - ], - templateUrl: './popover-container.component.html' + ], + templateUrl: './popover-container.component.html', + standalone: true, + imports: [NgIf] }) export class PopoverContainerComponent { @Input() set placement(value: AvailableBSPositions) { diff --git a/src/popover/popover.directive.ts b/src/popover/popover.directive.ts index 2a99169143..cb9d953d95 100644 --- a/src/popover/popover.directive.ts +++ b/src/popover/popover.directive.ts @@ -22,7 +22,12 @@ let id = 0; /** * A lightweight, extensible directive for fancy popover creation. */ -@Directive({ selector: '[popover]', exportAs: 'bs-popover' }) +@Directive({ + selector: '[popover]', + exportAs: 'bs-popover', + standalone: true, + providers: [ PositioningService, ComponentLoaderFactory ] +}) export class PopoverDirective implements OnInit, OnDestroy { /** unique id popover - use for aria-describedby */ popoverId = id++; diff --git a/src/popover/popover.module.ts b/src/popover/popover.module.ts index ef030556f7..d992626951 100644 --- a/src/popover/popover.module.ts +++ b/src/popover/popover.module.ts @@ -1,21 +1,16 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; -import { PositioningService } from 'ngx-bootstrap/positioning'; import { PopoverDirective } from './popover.directive'; import { PopoverContainerComponent } from './popover-container.component'; @NgModule({ - imports: [CommonModule], - declarations: [PopoverDirective, PopoverContainerComponent], + imports: [CommonModule, PopoverDirective, PopoverContainerComponent], exports: [PopoverDirective] }) export class PopoverModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: PopoverModule, - providers: [ComponentLoaderFactory, PositioningService] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return PopoverModule; } } diff --git a/src/positioning/package.json b/src/positioning/package.json index 16268dc595..6043faf3a7 100644 --- a/src/positioning/package.json +++ b/src/positioning/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/positioning", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/progressbar/bar.component.ts b/src/progressbar/bar.component.ts index 35a8a86907..23fd07a5dc 100644 --- a/src/progressbar/bar.component.ts +++ b/src/progressbar/bar.component.ts @@ -11,22 +11,23 @@ import { import { ProgressbarType } from './progressbar-type.interface'; @Component({ - selector: 'bar', - templateUrl: './bar.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - role: 'progressbar', - 'aria-valuemin': '0', - '[class.progress-bar]': 'true', - '[class.progress-bar-animated]': 'animate', - '[class.progress-bar-striped]': 'striped', - '[attr.aria-valuenow]': 'value', - '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""', - '[attr.aria-valuemax]': 'max', - '[style.height.%]': '"100"', - '[style.width.%]': 'percent' - } + selector: 'bar', + templateUrl: './bar.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + role: 'progressbar', + 'aria-valuemin': '0', + '[class.progress-bar]': 'true', + '[class.progress-bar-animated]': 'animate', + '[class.progress-bar-striped]': 'striped', + '[attr.aria-valuenow]': 'value', + '[attr.aria-valuetext]': 'percent ? percent.toFixed(0) + "%" : ""', + '[attr.aria-valuemax]': 'max', + '[style.height.%]': '"100"', + '[style.width.%]': 'percent' + }, + standalone: true }) export class BarComponent implements OnChanges { /** maximum total value of progress element */ diff --git a/src/progressbar/package.json b/src/progressbar/package.json index adba2d57f4..2339be3541 100644 --- a/src/progressbar/package.json +++ b/src/progressbar/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/progressbar", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/progressbar/progressbar.component.ts b/src/progressbar/progressbar.component.ts index 4e78dc1f10..b8967f9ae7 100644 --- a/src/progressbar/progressbar.component.ts +++ b/src/progressbar/progressbar.component.ts @@ -1,21 +1,25 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { BarValue, ProgressbarType } from './progressbar-type.interface'; import { ProgressbarConfig } from './progressbar.config'; +import { BarComponent } from './bar.component'; +import { NgIf, NgFor } from '@angular/common'; @Component({ - selector: 'progressbar', - templateUrl: './progressbar.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[class.progress]': 'true', - '[attr.max]': 'max' - }, - styles: [` + selector: 'progressbar', + templateUrl: './progressbar.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[class.progress]': 'true', + '[attr.max]': 'max' + }, + styles: [` :host { width: 100%; display: flex; - } `] + } `], + standalone: true, + imports: [NgIf, BarComponent, NgFor] }) export class ProgressbarComponent { /** maximum total value of progress element */ diff --git a/src/progressbar/progressbar.module.ts b/src/progressbar/progressbar.module.ts index 207ed17a45..feb7ac4f90 100644 --- a/src/progressbar/progressbar.module.ts +++ b/src/progressbar/progressbar.module.ts @@ -1,16 +1,15 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { BarComponent } from './bar.component'; import { ProgressbarComponent } from './progressbar.component'; @NgModule({ - imports: [CommonModule], - declarations: [BarComponent, ProgressbarComponent], - exports: [BarComponent, ProgressbarComponent] + imports: [BarComponent, ProgressbarComponent], + exports: [BarComponent, ProgressbarComponent] }) export class ProgressbarModule { - static forRoot(): ModuleWithProviders { - return { ngModule: ProgressbarModule, providers: [] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return ProgressbarModule; } } diff --git a/src/progressbar/testing/progressbar.component.spec.ts b/src/progressbar/testing/progressbar.component.spec.ts index 273545d29b..7028dbe435 100644 --- a/src/progressbar/testing/progressbar.component.spec.ts +++ b/src/progressbar/testing/progressbar.component.spec.ts @@ -20,7 +20,7 @@ describe('Component: Progress Bar', () => { it('check animate setter when _animate is equal to setter\'s argument', () => { TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; @@ -33,7 +33,7 @@ describe('Component: Progress Bar', () => { it('check striped setter when _striped is equal to setter\'s argument', () => { TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; @@ -47,7 +47,7 @@ describe('Component: Progress Bar', () => { const tpl = ``; TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } @@ -65,7 +65,7 @@ describe('Component: Progress Bar', () => { const tpl = ``; TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } @@ -85,7 +85,7 @@ describe('Component: Progress Bar', () => { const tpl = ``; TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } @@ -113,7 +113,7 @@ describe('Component: Progress Bar', () => { const tpl = ``; TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } @@ -147,7 +147,7 @@ describe('progress bar', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] + imports: [ProgressbarModule] }); fixture = TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } diff --git a/src/rating/package.json b/src/rating/package.json index d3ee92def2..ee9399e5ab 100644 --- a/src/rating/package.json +++ b/src/rating/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/rating", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/rating/rating.component.ts b/src/rating/rating.component.ts index e382b7d9b3..e1fd2a3285 100644 --- a/src/rating/rating.component.ts +++ b/src/rating/rating.component.ts @@ -14,6 +14,7 @@ import { import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RatingResults } from './models'; import { RatingConfig } from './rating.config'; +import { NgFor, NgTemplateOutlet } from '@angular/common'; export const RATING_CONTROL_VALUE_ACCESSOR: Provider = { provide: NG_VALUE_ACCESSOR, @@ -22,10 +23,12 @@ export const RATING_CONTROL_VALUE_ACCESSOR: Provider = { }; @Component({ - selector: 'rating', - templateUrl: './rating.component.html', - providers: [RATING_CONTROL_VALUE_ACCESSOR], - changeDetection: ChangeDetectionStrategy.OnPush + selector: 'rating', + templateUrl: './rating.component.html', + providers: [RATING_CONTROL_VALUE_ACCESSOR], + changeDetection: ChangeDetectionStrategy.OnPush, + standalone: true, + imports: [NgFor, NgTemplateOutlet] }) export class RatingComponent implements ControlValueAccessor, OnInit { /** number of icons */ diff --git a/src/rating/rating.module.ts b/src/rating/rating.module.ts index eb6df14b6d..2b75fd726d 100644 --- a/src/rating/rating.module.ts +++ b/src/rating/rating.module.ts @@ -1,18 +1,14 @@ -import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { RatingComponent } from './rating.component'; @NgModule({ - imports: [CommonModule], - declarations: [RatingComponent], - exports: [RatingComponent] + imports: [RatingComponent], + exports: [RatingComponent] }) export class RatingModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: RatingModule, - providers: [] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return RatingModule; } } diff --git a/src/rating/testing/rating.component.spec.ts b/src/rating/testing/rating.component.spec.ts index b22cedca8d..21cc76245a 100644 --- a/src/rating/testing/rating.component.spec.ts +++ b/src/rating/testing/rating.component.spec.ts @@ -26,7 +26,7 @@ describe('Component: Rating. Init:', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [RatingComponent], + imports: [RatingComponent], providers: [RatingConfig] }); fixture = TestBed.createComponent(RatingComponent); @@ -90,7 +90,7 @@ describe('Component: Rating. Custom template:', () => { fakeAsync(() => { TestBed.configureTestingModule({ declarations: [TestRatingComponent], - imports: [RatingModule.forRoot(), FormsModule] + imports: [RatingModule, FormsModule] }); TestBed.overrideComponent(TestRatingComponent, { set: { template: ` @@ -126,7 +126,7 @@ describe('Component: Rating. Clicks:', () => { fakeAsync(() => { TestBed.configureTestingModule({ declarations: [TestRatingComponent], - imports: [RatingModule.forRoot(), FormsModule] + imports: [RatingModule, FormsModule] }); TestBed.overrideComponent(TestRatingComponent, { set: {template: tpl} diff --git a/src/root/README.md b/src/root/README.md index d3f4aab4e0..9816ae7b90 100644 --- a/src/root/README.md +++ b/src/root/README.md @@ -98,7 +98,7 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip'; @NgModule({ ... - imports: [TooltipModule.forRoot(),...] + imports: [TooltipModule,...] ... }) ``` diff --git a/src/root/package.json b/src/root/package.json index 5e198f62d0..cac63c15f4 100644 --- a/src/root/package.json +++ b/src/root/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap", - "version": "18.0.2", + "version": "18.1.0", "description": "Angular Bootstrap", "author": "Dmitriy Shekhovtsov ", "license": "MIT", diff --git a/src/schematics/package.json b/src/schematics/package.json index 31bad55d78..845a97bd64 100644 --- a/src/schematics/package.json +++ b/src/schematics/package.json @@ -1,6 +1,6 @@ { "name": "schematics", - "version": "18.0.2", + "version": "18.1.0", "schematics": "./collection.json", "author": "Dmitriy Shekhovtsov ", "license": "MIT" diff --git a/src/schematics/src/utils/current_dependency_versions.json b/src/schematics/src/utils/current_dependency_versions.json index 389d54faa6..49465a7534 100644 --- a/src/schematics/src/utils/current_dependency_versions.json +++ b/src/schematics/src/utils/current_dependency_versions.json @@ -1,4 +1,4 @@ { - "NGX_BOOTSTRAP_VERSION": "18.0.2", + "NGX_BOOTSTRAP_VERSION": "18.1.0", "BOOTSTRAP_VERSION": "^5.2.3" } diff --git a/src/sortable/package.json b/src/sortable/package.json index 5b3c90df38..d41793f039 100644 --- a/src/sortable/package.json +++ b/src/sortable/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/sortable", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/sortable/sortable.component.ts b/src/sortable/sortable.component.ts index 7761bc6394..4440d05c80 100644 --- a/src/sortable/sortable.component.ts +++ b/src/sortable/sortable.component.ts @@ -9,11 +9,12 @@ import { import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; import { DraggableItem } from './draggable-item'; import { DraggableItemService } from './draggable-item.service'; +import { NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; @Component({ - selector: 'bs-sortable', - exportAs: 'bs-sortable', - template: ` + selector: 'bs-sortable', + exportAs: 'bs-sortable', + template: `
{{item.value}} `, - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => SortableComponent), - multi: true - } - ] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SortableComponent), + multi: true + }, + DraggableItemService + ], + standalone: true, + imports: [NgClass, NgStyle, NgIf, NgFor, NgTemplateOutlet] }) export class SortableComponent implements ControlValueAccessor { private static globalZoneIndex = 0; diff --git a/src/sortable/sortable.module.ts b/src/sortable/sortable.module.ts index ab4ef68b4d..1bddcf40cc 100644 --- a/src/sortable/sortable.module.ts +++ b/src/sortable/sortable.module.ts @@ -1,16 +1,14 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; import { SortableComponent } from './sortable.component'; -import { DraggableItemService } from './draggable-item.service'; @NgModule({ - declarations: [SortableComponent], - imports: [CommonModule], - exports: [SortableComponent] + imports: [SortableComponent], + exports: [SortableComponent] }) export class SortableModule { - static forRoot(): ModuleWithProviders { - return { ngModule: SortableModule, providers: [DraggableItemService] }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return SortableModule; } } diff --git a/src/sortable/testing/draggable-item.service.spec.ts b/src/sortable/testing/draggable-item.service.spec.ts index c302addf32..a447be91a4 100644 --- a/src/sortable/testing/draggable-item.service.spec.ts +++ b/src/sortable/testing/draggable-item.service.spec.ts @@ -3,7 +3,8 @@ import { fakeAsync, inject, TestBed } from '@angular/core/testing'; import { DraggableItem, DraggableItemService, SortableItem } from '../index'; @Component({ - template: `

Test

` + template: `

Test

`, + standalone: true }) class TestComponent {} @@ -14,9 +15,9 @@ describe('Service: DraggableItem', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - declarations: [TestComponent], - providers: [DraggableItemService] - }).createComponent(TestComponent); + imports: [TestComponent], + providers: [DraggableItemService] +}).createComponent(TestComponent); }) ); diff --git a/src/sortable/testing/sortable.component.spec.ts b/src/sortable/testing/sortable.component.spec.ts index 2647868a0c..d409d1a431 100644 --- a/src/sortable/testing/sortable.component.spec.ts +++ b/src/sortable/testing/sortable.component.spec.ts @@ -14,7 +14,7 @@ const HEROES_OBJ: { id: number; name: string }[] = [ ]; @Component({ - template: ` + template: ` - ` + `, + standalone: true, + imports: [FormsModule] }) class TestSortableComponent { selectedState?: string; @@ -38,10 +40,9 @@ xdescribe('Component: Sortable', () => { beforeEach(() => { fixture = TestBed.configureTestingModule({ - declarations: [TestSortableComponent], - imports: [SortableModule.forRoot(), FormsModule], - providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }] - }).createComponent(TestSortableComponent); + imports: [SortableModule, FormsModule, TestSortableComponent], + providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }] +}).createComponent(TestSortableComponent); fixture.detectChanges(); diff --git a/src/tabs/ng-transclude.directive.ts b/src/tabs/ng-transclude.directive.ts index 833549af16..0c99a46ac9 100644 --- a/src/tabs/ng-transclude.directive.ts +++ b/src/tabs/ng-transclude.directive.ts @@ -1,7 +1,8 @@ import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ - selector: '[ngTransclude]' + selector: '[ngTransclude]', + standalone: true }) export class NgTranscludeDirective { viewRef: ViewContainerRef; diff --git a/src/tabs/package.json b/src/tabs/package.json index f069af6371..56770abf88 100644 --- a/src/tabs/package.json +++ b/src/tabs/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/tabs", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/tabs/tab-heading.directive.ts b/src/tabs/tab-heading.directive.ts index 15d811b373..10bc975c2a 100644 --- a/src/tabs/tab-heading.directive.ts +++ b/src/tabs/tab-heading.directive.ts @@ -3,7 +3,10 @@ import { Directive, TemplateRef } from '@angular/core'; import { TabDirective } from './tab.directive'; /** Should be used to mark element as a template for tab heading */ -@Directive({ selector: '[tabHeading]' }) +@Directive({ + selector: '[tabHeading]', + standalone: true +}) export class TabHeadingDirective { // eslint-disable-next-line @typescript-eslint/no-explicit-any templateRef?: TemplateRef; diff --git a/src/tabs/tab.directive.ts b/src/tabs/tab.directive.ts index 20a53500c0..e81950a7e9 100644 --- a/src/tabs/tab.directive.ts +++ b/src/tabs/tab.directive.ts @@ -12,7 +12,10 @@ import { } from '@angular/core'; import { TabsetComponent } from './tabset.component'; -@Directive({ selector: 'tab, [tab]', exportAs: 'tab' }) +@Directive({ + selector: 'tab, [tab]', exportAs: 'tab', + standalone: true +}) export class TabDirective implements OnInit, OnDestroy { /** tab header text */ @Input() heading?: string; diff --git a/src/tabs/tabs.module.ts b/src/tabs/tabs.module.ts index e407d65304..359d111fcc 100644 --- a/src/tabs/tabs.module.ts +++ b/src/tabs/tabs.module.ts @@ -7,25 +7,20 @@ import { TabDirective } from './tab.directive'; import { TabsetComponent } from './tabset.component'; @NgModule({ - imports: [CommonModule], - declarations: [ - NgTranscludeDirective, - TabDirective, - TabsetComponent, - TabHeadingDirective - ], - exports: [ - TabDirective, - TabsetComponent, - TabHeadingDirective, - NgTranscludeDirective - ] + imports: [CommonModule, NgTranscludeDirective, + TabDirective, + TabsetComponent, + TabHeadingDirective], + exports: [ + TabDirective, + TabsetComponent, + TabHeadingDirective, + NgTranscludeDirective + ] }) export class TabsModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: TabsModule, - providers: [] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TabsModule; } } diff --git a/src/tabs/tabset.component.ts b/src/tabs/tabset.component.ts index b7a5880480..50060e0ffb 100644 --- a/src/tabs/tabset.component.ts +++ b/src/tabs/tabset.component.ts @@ -2,12 +2,16 @@ import { Component, HostBinding, Input, OnDestroy, Renderer2, ElementRef } from import { TabDirective } from './tab.directive'; import { TabsetConfig } from './tabset.config'; +import { NgTranscludeDirective } from './ng-transclude.directive'; +import { NgClass, NgFor, NgIf } from '@angular/common'; // todo: add active event to tab // todo: fix? mixing static and dynamic tabs position tabs in order of creation @Component({ - selector: 'tabset', - templateUrl: './tabset.component.html', - styleUrls: ['./tabs.scss'] + selector: 'tabset', + templateUrl: './tabset.component.html', + styleUrls: ['./tabs.scss'], + standalone: true, + imports: [NgClass, NgFor, NgTranscludeDirective, NgIf] }) export class TabsetComponent implements OnDestroy { /** if true tabs will be placed vertically */ diff --git a/src/tabs/testing/tabset.component.spec.ts b/src/tabs/testing/tabset.component.spec.ts index 18ddb84caa..1e6f2afeb3 100644 --- a/src/tabs/testing/tabset.component.spec.ts +++ b/src/tabs/testing/tabset.component.spec.ts @@ -105,7 +105,7 @@ describe('Component: Tabs', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestTabsetComponent], - imports: [TabsModule.forRoot()] + imports: [TabsModule] }); TestBed.overrideComponent(TestTabsetComponent, { set: { template: html } }); fixture = TestBed.createComponent(TestTabsetComponent); diff --git a/src/timepicker/package.json b/src/timepicker/package.json index b9a371e8f9..c8ead5ed52 100644 --- a/src/timepicker/package.json +++ b/src/timepicker/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/timepicker", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/timepicker/testing/timepicker.component.spec.ts b/src/timepicker/testing/timepicker.component.spec.ts index e6d8a04cd8..ceeb5a5fe8 100644 --- a/src/timepicker/testing/timepicker.component.spec.ts +++ b/src/timepicker/testing/timepicker.component.spec.ts @@ -50,7 +50,7 @@ describe('Component: TimepickerComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [TimepickerModule.forRoot(), FormsModule, ReactiveFormsModule], + imports: [TimepickerModule, FormsModule, ReactiveFormsModule], providers: [TimepickerConfig, TimepickerActions] }); }); diff --git a/src/timepicker/timepicker.component.ts b/src/timepicker/timepicker.component.ts index 9540912f08..5442e2720a 100644 --- a/src/timepicker/timepicker.component.ts +++ b/src/timepicker/timepicker.component.ts @@ -35,6 +35,7 @@ import { padNumber, parseTime } from './timepicker.utils'; +import { NgIf } from '@angular/common'; export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = { provide: NG_VALUE_ACCESSOR, @@ -43,11 +44,11 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = { }; @Component({ - selector: 'timepicker', - changeDetection: ChangeDetectionStrategy.OnPush, - providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore], - templateUrl: './timepicker.component.html', - styles: [` + selector: 'timepicker', + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR, TimepickerStore, TimepickerActions], + templateUrl: './timepicker.component.html', + styles: [` .bs-chevron { border-style: solid; display: block; @@ -74,7 +75,9 @@ export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: ControlValueAccessorModel = { padding: .375rem .55rem; } `], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [NgIf] }) export class TimepickerComponent implements ControlValueAccessor, diff --git a/src/timepicker/timepicker.module.ts b/src/timepicker/timepicker.module.ts index 336bcdf22a..9b10a82df5 100644 --- a/src/timepicker/timepicker.module.ts +++ b/src/timepicker/timepicker.module.ts @@ -1,21 +1,14 @@ -import { ModuleWithProviders, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; import { TimepickerComponent } from './timepicker.component'; -import { TimepickerActions } from './reducer/timepicker.actions'; -import { TimepickerStore } from './reducer/timepicker.store'; @NgModule({ - imports: [CommonModule], - declarations: [TimepickerComponent], - exports: [TimepickerComponent], - providers:[TimepickerStore] + imports: [TimepickerComponent], + exports: [TimepickerComponent], }) export class TimepickerModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: TimepickerModule, - providers: [TimepickerActions, TimepickerStore] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TimepickerModule; } } diff --git a/src/tooltip/package.json b/src/tooltip/package.json index f7d6326dad..83552bf072 100644 --- a/src/tooltip/package.json +++ b/src/tooltip/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/tooltip", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/tooltip/testing/tooltip.directive.spec.ts b/src/tooltip/testing/tooltip.directive.spec.ts index 4465ea6e19..eb9b1c5762 100644 --- a/src/tooltip/testing/tooltip.directive.spec.ts +++ b/src/tooltip/testing/tooltip.directive.spec.ts @@ -41,7 +41,7 @@ describe('Directives: Tooltips', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [TestTooltipComponent], - imports: [TooltipModule.forRoot(), FormsModule] + imports: [TooltipModule, FormsModule] }); TestBed.overrideComponent(TestTooltipComponent, { set: {template: overTemplate} diff --git a/src/tooltip/tooltip-container.component.ts b/src/tooltip/tooltip-container.component.ts index 3548287f94..e907f4fd53 100644 --- a/src/tooltip/tooltip-container.component.ts +++ b/src/tooltip/tooltip-container.component.ts @@ -8,17 +8,16 @@ import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils'; import { PlacementForBs5 } from 'ngx-bootstrap/positioning'; @Component({ - selector: 'bs-tooltip-container', - changeDetection: ChangeDetectionStrategy.OnPush, - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[class]': - '"show tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass', - '[attr.id]': 'this.id', - role: 'tooltip' - }, - styles: [ - ` + selector: 'bs-tooltip-container', + changeDetection: ChangeDetectionStrategy.OnPush, + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[class]': '"show tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass', + '[attr.id]': 'this.id', + role: 'tooltip' + }, + styles: [ + ` :host.tooltip { display: block; pointer-events: none; @@ -29,11 +28,12 @@ import { PlacementForBs5 } from 'ngx-bootstrap/positioning'; position: absolute; } ` - ], - template: ` + ], + template: `
- ` + `, + standalone: true }) export class TooltipContainerComponent implements AfterViewInit { classMap?: { [key: string]: boolean }; diff --git a/src/tooltip/tooltip.directive.ts b/src/tooltip/tooltip.directive.ts index 263da9325a..a31141acdc 100644 --- a/src/tooltip/tooltip.directive.ts +++ b/src/tooltip/tooltip.directive.ts @@ -24,8 +24,12 @@ import { AvailableBSPositions } from 'ngx-bootstrap/positioning'; let id = 0; @Directive({ - selector: '[tooltip], [tooltipHtml]', - exportAs: 'bs-tooltip' + selector: '[tooltip], [tooltipHtml]', + exportAs: 'bs-tooltip', + standalone: true, + providers: [ + ComponentLoaderFactory, PositioningService + ] }) export class TooltipDirective implements OnInit, OnDestroy { tooltipId = id++; diff --git a/src/tooltip/tooltip.module.ts b/src/tooltip/tooltip.module.ts index 7fbeef6d2c..928ca7a217 100644 --- a/src/tooltip/tooltip.module.ts +++ b/src/tooltip/tooltip.module.ts @@ -1,20 +1,15 @@ import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { TooltipContainerComponent } from './tooltip-container.component'; import { TooltipDirective } from './tooltip.directive'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; -import { PositioningService } from 'ngx-bootstrap/positioning'; @NgModule({ - imports: [CommonModule], - declarations: [TooltipDirective, TooltipContainerComponent], + imports: [CommonModule, TooltipDirective, TooltipContainerComponent], exports: [TooltipDirective] }) export class TooltipModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: TooltipModule, - providers: [ComponentLoaderFactory, PositioningService] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TooltipModule; } } diff --git a/src/typeahead/package.json b/src/typeahead/package.json index f982c99d2c..86d148ddf8 100644 --- a/src/typeahead/package.json +++ b/src/typeahead/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/typeahead", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" } diff --git a/src/typeahead/testing/typeahead-container.component.spec.ts b/src/typeahead/testing/typeahead-container.component.spec.ts index 054d89343c..6bc23400da 100644 --- a/src/typeahead/testing/typeahead-container.component.spec.ts +++ b/src/typeahead/testing/typeahead-container.component.spec.ts @@ -34,8 +34,7 @@ describe('Component: TypeaheadContainer', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ - declarations: [TypeaheadContainerComponent], - imports: [BrowserAnimationsModule], + imports: [BrowserAnimationsModule, TypeaheadContainerComponent], providers: [ { provide: TypeaheadOptions, diff --git a/src/typeahead/testing/typeahead.directive.spec.ts b/src/typeahead/testing/typeahead.directive.spec.ts index c750486577..203265ae0a 100644 --- a/src/typeahead/testing/typeahead.directive.spec.ts +++ b/src/typeahead/testing/typeahead.directive.spec.ts @@ -16,7 +16,7 @@ interface State { } @Component({ - template: ` { beforeEach(waitForAsync(() => TestBed.configureTestingModule({ declarations: [TestTypeaheadComponent], - imports: [TypeaheadModule.forRoot(), BrowserAnimationsModule, FormsModule] - }).compileComponents())); + imports: [TypeaheadModule, BrowserAnimationsModule, FormsModule] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestTypeaheadComponent); diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts index 5220e44621..6cc0a6e7c5 100644 --- a/src/typeahead/typeahead-container.component.ts +++ b/src/typeahead/typeahead-container.component.ts @@ -22,23 +22,24 @@ import { TypeaheadMatch } from './typeahead-match.class'; import { TypeaheadDirective } from './typeahead.directive'; import { typeaheadAnimation } from './typeahead-animations'; import { TypeaheadOptionItemContext, TypeaheadOptionListContext, TypeaheadTemplateMethods } from './models'; +import { NgTemplateOutlet, NgFor, NgIf } from '@angular/common'; let nextWindowId = 0; @Component({ - selector: 'typeahead-container', - templateUrl: './typeahead-container.component.html', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - class: 'dropdown open bottom dropdown-menu', - '[style.height]': `needScrollbar ? guiHeight: 'auto'`, - '[style.visibility]': `'inherit'`, - '[class.dropup]': 'dropup', - style: 'position: absolute;display: block;', - '[attr.role]': `'listbox'` - }, - styles: [ - ` + selector: 'typeahead-container', + templateUrl: './typeahead-container.component.html', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + class: 'dropdown open bottom dropdown-menu', + '[style.height]': `needScrollbar ? guiHeight: 'auto'`, + '[style.visibility]': `'inherit'`, + '[class.dropup]': 'dropup', + style: 'position: absolute;display: block;', + '[attr.role]': `'listbox'` + }, + styles: [ + ` :host.dropdown { z-index: 1000; } @@ -48,8 +49,11 @@ let nextWindowId = 0; height: 100px; } ` - ], - animations: [typeaheadAnimation] + ], + animations: [typeaheadAnimation], + standalone: true, + imports: [NgTemplateOutlet, NgFor, NgIf], + providers: [PositioningService] }) export class TypeaheadContainerComponent implements OnDestroy { diff --git a/src/typeahead/typeahead.directive.ts b/src/typeahead/typeahead.directive.ts index 1722256f12..2296e55ce6 100644 --- a/src/typeahead/typeahead.directive.ts +++ b/src/typeahead/typeahead.directive.ts @@ -24,21 +24,24 @@ import { TypeaheadMatch } from './typeahead-match.class'; import { TypeaheadOrder } from './typeahead-order.class'; import { getValueFromObject, latinize, tokenize } from './typeahead-utils'; import { TypeaheadConfig } from './typeahead.config'; +import { PositioningService } from 'ngx-bootstrap/positioning'; // eslint-disable-next-line type TypeaheadOption = string | Record; type TypeaheadOptionArr = TypeaheadOption[] | Observable; @Directive({ - selector: '[typeahead]', - exportAs: 'bs-typeahead', - // eslint-disable-next-line @angular-eslint/no-host-metadata-property - host: { - '[attr.aria-activedescendant]': 'activeDescendant', - '[attr.aria-owns]': 'isOpen ? this._container.popupId : null', - '[attr.aria-expanded]': 'isOpen', - '[attr.aria-autocomplete]': 'list' - } + selector: '[typeahead]', + exportAs: 'bs-typeahead', + // eslint-disable-next-line @angular-eslint/no-host-metadata-property + host: { + '[attr.aria-activedescendant]': 'activeDescendant', + '[attr.aria-owns]': 'isOpen ? this._container.popupId : null', + '[attr.aria-expanded]': 'isOpen', + '[attr.aria-autocomplete]': 'list' + }, + standalone: true, + providers: [ComponentLoaderFactory, PositioningService] }) export class TypeaheadDirective implements OnInit, OnDestroy { /** options source, can be Array of strings, objects or diff --git a/src/typeahead/typeahead.module.ts b/src/typeahead/typeahead.module.ts index f5729decee..ccdd9d35dd 100644 --- a/src/typeahead/typeahead.module.ts +++ b/src/typeahead/typeahead.module.ts @@ -1,21 +1,16 @@ import { CommonModule } from '@angular/common'; -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { NgModule } from '@angular/core'; import { TypeaheadContainerComponent } from './typeahead-container.component'; import { TypeaheadDirective } from './typeahead.directive'; -import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader'; -import { PositioningService } from 'ngx-bootstrap/positioning'; @NgModule({ - imports: [CommonModule], - declarations: [TypeaheadContainerComponent, TypeaheadDirective], + imports: [CommonModule, TypeaheadContainerComponent, TypeaheadDirective], exports: [TypeaheadContainerComponent, TypeaheadDirective] }) export class TypeaheadModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: TypeaheadModule, - providers: [ComponentLoaderFactory, PositioningService] - }; + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TypeaheadModule; } } diff --git a/src/utils/package.json b/src/utils/package.json index 799da4bf79..52ada5e345 100644 --- a/src/utils/package.json +++ b/src/utils/package.json @@ -1,6 +1,6 @@ { "name": "ngx-bootstrap/utils", - "version": "18.0.2", + "version": "18.1.0", "author": "Dmitriy Shekhovtsov ", "license": "MIT" }