From 20265c58d4510697b18161824fa8273cd3cce12c Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:27:59 +0300 Subject: [PATCH 01/29] feat(accordion): migrated to standalone --- .../schematics/schematics.component.html | 2 +- .../accordion/src/lib/accordion.module.ts | 2 +- .../doc-pages/accordion/src/lib/docs/usage.md | 2 +- src/accordion/accordion-group.component.ts | 20 +++++++++++-------- src/accordion/accordion.component.ts | 19 +++++++++--------- src/accordion/accordion.module.ts | 15 ++++---------- .../testing/accordion.component.spec.ts | 17 ++++++++-------- 7 files changed, 38 insertions(+), 39 deletions(-) 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/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..a263020fad 100644 --- a/libs/doc-pages/accordion/src/lib/docs/usage.md +++ b/libs/doc-pages/accordion/src/lib/docs/usage.md @@ -5,7 +5,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion'; @NgModule({ imports: [ BrowserAnimationsModule, - AccordionModule.forRoot(), + AccordionModule, ... ] }) diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts index f0dbc8ecd7..b94979ebec 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 '../collapse/collapse.module'; +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..4dd2978be8 100644 --- a/src/accordion/accordion.module.ts +++ b/src/accordion/accordion.module.ts @@ -1,17 +1,10 @@ -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: [] }; - } -} +export class AccordionModule {} diff --git a/src/accordion/testing/accordion.component.spec.ts b/src/accordion/testing/accordion.component.spec.ts index 335a2c0eee..f10d4e17ab 100644 --- a/src/accordion/testing/accordion.component.spec.ts +++ b/src/accordion/testing/accordion.component.spec.ts @@ -4,8 +4,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AccordionConfig, AccordionModule } from '../index'; @Component({ - selector: 'accordion-test', - template: '' + selector: 'accordion-test', + template: '', + standalone: true }) class TestAccordionComponent { oneAtATime = true; @@ -75,12 +76,12 @@ describe('Component: Accordion', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestAccordionComponent], - imports: [ - AccordionModule.forRoot(), - BrowserAnimationsModule - ] - }); + imports: [ + AccordionModule, + BrowserAnimationsModule, + TestAccordionComponent + ] +}); TestBed.overrideComponent(TestAccordionComponent, { set: { template: html } }); From 24bfd94cc561d09ce44c3963f2dafe4b55f591b0 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:28:44 +0300 Subject: [PATCH 02/29] feat(accordion): migrated to standalone --- src/accordion/accordion-group.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/accordion/accordion-group.component.ts b/src/accordion/accordion-group.component.ts index b94979ebec..20e01f29a4 100644 --- a/src/accordion/accordion-group.component.ts +++ b/src/accordion/accordion-group.component.ts @@ -2,7 +2,7 @@ import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core'; import { AccordionComponent } from './accordion.component'; -import { CollapseModule } from '../collapse/collapse.module'; +import { CollapseModule } from 'ngx-bootstrap/collapse'; import { NgClass, NgIf } from '@angular/common'; /** From c8a4b16ca7b7ae0be3f998597dd89d61bc9453af Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:33:28 +0300 Subject: [PATCH 03/29] feat(alert)): migrated to standalone --- libs/doc-pages/alerts/src/lib/alerts.module.ts | 2 +- libs/doc-pages/alerts/src/lib/docs/usage.md | 2 +- src/alert/alert.component.ts | 9 ++++++--- src/alert/alert.module.ts | 12 +++--------- src/alert/testing/alert.component.spec.ts | 10 ++++++---- 5 files changed, 17 insertions(+), 18 deletions(-) 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..04d714747c 100644 --- a/libs/doc-pages/alerts/src/lib/docs/usage.md +++ b/libs/doc-pages/alerts/src/lib/docs/usage.md @@ -1,6 +1,6 @@ import { AlertModule } from 'ngx-bootstrap/alert'; @NgModule({ - imports: [AlertModule.forRoot(),...] + imports: [AlertModule,...] }) export class AppModule(){} 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..ce839d9ee8 100644 --- a/src/alert/alert.module.ts +++ b/src/alert/alert.module.ts @@ -1,14 +1,8 @@ -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: [] }; - } -} +export class AlertModule {} 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} }); From 2b1deef6fd71f133f757886950be94958c57cdd5 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:36:13 +0300 Subject: [PATCH 04/29] feat(buttons): migrated to standalone --- libs/doc-pages/buttons/src/lib/buttons.module.ts | 2 +- libs/doc-pages/buttons/src/lib/docs/usage.md | 2 +- src/buttons/button-checkbox.directive.ts | 5 +++-- src/buttons/button-radio-group.directive.ts | 5 +++-- src/buttons/button-radio.directive.ts | 5 +++-- src/buttons/buttons.module.ts | 12 ++++-------- src/buttons/testing/button.directive.spec.ts | 13 ++++++++----- 7 files changed, 23 insertions(+), 21 deletions(-) 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..c0d919753f 100644 --- a/libs/doc-pages/buttons/src/lib/docs/usage.md +++ b/libs/doc-pages/buttons/src/lib/docs/usage.md @@ -1,6 +1,6 @@ import { ButtonsModule } from 'ngx-bootstrap/buttons'; @NgModule({ - imports: [ButtonsModule.forRoot(),...] + imports: [ButtonsModule,...] }) export class AppModule(){} 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..a9741b5d13 100644 --- a/src/buttons/buttons.module.ts +++ b/src/buttons/buttons.module.ts @@ -1,15 +1,11 @@ -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: [] }; - } -} +export class ButtonsModule {} 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 }] +}); }) ); From 95475c4a392c7dd00b10a5aaa19bc0157a8da00c Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:40:06 +0300 Subject: [PATCH 05/29] feat(carousel): migrated to standalone --- .../carousel/src/lib/carousel.module.ts | 2 +- libs/doc-pages/carousel/src/lib/docs/usage.md | 2 +- src/carousel/carousel.component.ts | 8 +++++--- src/carousel/carousel.module.ts | 11 +++-------- src/carousel/slide.component.ts | 19 ++++++++++--------- .../testing/carousel.component.spec.ts | 11 +++++++---- 6 files changed, 27 insertions(+), 26 deletions(-) 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..0a932c42c7 100644 --- a/libs/doc-pages/carousel/src/lib/docs/usage.md +++ b/libs/doc-pages/carousel/src/lib/docs/usage.md @@ -1,6 +1,6 @@ import { CarouselModule } from 'ngx-bootstrap/carousel'; @NgModule({ - imports: [CarouselModule.forRoot(),...] + imports: [CarouselModule,...] }) export class AppModule(){} 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..30ed9d41b4 100644 --- a/src/carousel/carousel.module.ts +++ b/src/carousel/carousel.module.ts @@ -1,16 +1,11 @@ -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: [] }; - } } 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..25cffef976 100644 --- a/src/carousel/testing/carousel.component.spec.ts +++ b/src/carousel/testing/carousel.component.spec.ts @@ -5,7 +5,11 @@ import '../../../scripts/jest/toHaveCssClass'; import { CarouselModule } from '../index'; import { getBsVer, IBsVersion } from 'ngx-bootstrap/utils'; -@Component({ selector: 'carousel-test', template: '' }) +@Component({ + selector: 'carousel-test', template: '', + standalone: true, + imports: [CarouselModule] +}) class TestCarouselComponent { myInterval = 5000; noWrapSlides = false; @@ -84,9 +88,8 @@ describe('Component: Carousel', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestCarouselComponent], - imports: [CarouselModule] - }); + imports: [CarouselModule, TestCarouselComponent] +}); TestBed.overrideComponent(TestCarouselComponent, { set: { template: html } }); From aaef99a493341021707e6358b6fda4f9511e9962 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 14:43:32 +0300 Subject: [PATCH 06/29] feat(collapse): migrated to standalone --- .../collapse/src/lib/collapse.module.ts | 2 +- libs/doc-pages/collapse/src/lib/docs/usage.md | 2 +- src/collapse/collapse.directive.ts | 13 +++++++------ src/collapse/collapse.module.ts | 12 ++++-------- src/collapse/testing/collapse.directive.spec.ts | 16 +++++++++------- 5 files changed, 22 insertions(+), 23 deletions(-) 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..1404bfff14 100644 --- a/libs/doc-pages/collapse/src/lib/docs/usage.md +++ b/libs/doc-pages/collapse/src/lib/docs/usage.md @@ -5,7 +5,7 @@ import { CollapseModule } from 'ngx-bootstrap/collapse'; @NgModule({ imports: [ BrowserAnimationsModule, - CollapseModule.forRoot(), + CollapseModule, ... ] }) 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..3003a55d79 100644 --- a/src/collapse/collapse.module.ts +++ b/src/collapse/collapse.module.ts @@ -1,13 +1,9 @@ -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: [] }; - } -} +export class CollapseModule {} 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; From ae1862dc2f771587e6cdb236f0e1f3a9a5f40535 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Tue, 16 Jul 2024 15:12:30 +0300 Subject: [PATCH 07/29] feat(datepicker): migrated to standalone --- .../datepicker/src/lib/datepicker.module.ts | 2 +- .../src/lib/demo-datepicker.module.ts | 2 +- .../datepicker/src/lib/docs/usage.md | 2 +- .../bs-datepicker-inline.component.ts | 6 ++- .../bs-datepicker-input.directive.ts | 9 +++- src/datepicker/bs-datepicker.component.ts | 6 ++- src/datepicker/bs-datepicker.module.ts | 31 ++------------ .../bs-daterangepicker-inline.component.ts | 6 ++- .../bs-daterangepicker-input.directive.ts | 23 +++++++---- .../bs-daterangepicker.component.ts | 8 +++- .../bs-datepicker-day-decorator.spec.ts | 11 ++--- .../bs-datepicker-navigation-view.spec.ts | 11 ++--- .../testing/bs-datepicker-utils.spec.ts | 2 +- src/datepicker/testing/bs-datepicker.spec.ts | 19 +++++---- .../testing/bs-daterangepicker.spec.ts | 15 +++---- .../bs-inline-datepicker-minmode-year.spec.ts | 17 ++++---- .../testing/bs-inline-datepicker.spec.ts | 17 ++++---- .../testing/bs-inline-daterangepicker.spec.ts | 19 +++++---- .../themes/bs/bs-calendar-layout.component.ts | 11 +++-- .../bs/bs-current-date-view.component.ts | 5 ++- .../bs/bs-custom-dates-view.component.ts | 9 ++-- .../bs/bs-datepicker-container.component.ts | 30 +++++++++----- .../bs-datepicker-day-decorator.directive.ts | 27 ++++++------ ...s-datepicker-inline-container.component.ts | 22 ++++++---- ...bs-datepicker-navigation-view.component.ts | 11 +++-- .../bs-daterangepicker-container.component.ts | 41 ++++++++++++++----- ...erangepicker-inline-container.component.ts | 22 ++++++---- .../bs/bs-days-calendar-view.component.ts | 15 +++++-- .../bs/bs-months-calendar-view.component.ts | 11 +++-- .../themes/bs/bs-timepicker-view.component.ts | 7 ++-- .../bs/bs-years-calendar-view.component.ts | 11 +++-- 31 files changed, 255 insertions(+), 173 deletions(-) diff --git a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts index 2fadc6ba23..5f95b7b08d 100644 --- a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts @@ -43,7 +43,7 @@ locales.forEach((locale: LocaleData) => { ...DEMO_COMPONENTS ], imports: [ - BsDatepickerModule.forRoot(), + BsDatepickerModule, TabsModule.forRoot(), CommonModule, FormsModule, 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..d9c3533907 100644 --- a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts @@ -41,7 +41,7 @@ locales.forEach((locale: LocaleData) => { ...DEMO_COMPONENTS ], imports: [ - BsDatepickerModule.forRoot(), + BsDatepickerModule, TabsModule.forRoot(), CommonModule, FormsModule, diff --git a/libs/doc-pages/datepicker/src/lib/docs/usage.md b/libs/doc-pages/datepicker/src/lib/docs/usage.md index a2799ce796..26fb37f7d5 100644 --- a/libs/doc-pages/datepicker/src/lib/docs/usage.md +++ b/libs/doc-pages/datepicker/src/lib/docs/usage.md @@ -5,7 +5,7 @@ import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; @NgModule({ imports: [ BrowserAnimationsModule, - BsDatepickerModule.forRoot(), + BsDatepickerModule, ... ] }) 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..bac60376fd 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,4 @@ 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 - ] - }; - } } 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/testing/bs-datepicker-day-decorator.spec.ts b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts index eab3b3d894..964b0563b8 100644 --- a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts +++ b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts @@ -8,8 +8,9 @@ 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 }}`, + standalone: true }) class TestComponent { day: DayViewModel = { date: new Date(), label: '' }; @@ -32,9 +33,9 @@ describe('datepicker: [bsDatepickerDayDecorator]', () => { beforeEach(waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent, BsDatepickerDayDecoratorComponent], - providers: [BsDatepickerConfig] - }).compileComponents() + imports: [TestComponent, BsDatepickerDayDecoratorComponent], + providers: [BsDatepickerConfig] +}).compileComponents() )); beforeEach(() => { diff --git a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts index c7319bb339..6d77c864b0 100644 --- a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts +++ b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts @@ -5,12 +5,13 @@ import { BsDatepickerNavigationViewComponent } from '../themes/bs/bs-datepicker- @Component({ - selector: 'test-cmp', - template: ` + selector: 'test-cmp', + template: ` ` + >`, + standalone: true }) class TestComponent { month!: DaysCalendarViewModel; @@ -54,8 +55,8 @@ describe('datepicker: bs-datepicker-navigation-view', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - declarations: [TestComponent, BsDatepickerNavigationViewComponent] - }).compileComponents() + imports: [TestComponent, 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..cede529aa5 100644 --- a/src/datepicker/testing/bs-datepicker.spec.ts +++ b/src/datepicker/testing/bs-datepicker.spec.ts @@ -11,10 +11,11 @@ import { BsDatepickerViewMode, CalendarCellViewModel, WeekViewModel } from '../m import { BsDatepickerContainerComponent } from '../themes/bs/bs-datepicker-container.component'; @Component({ - selector: 'test-cmp', - template: `` + [bsConfig]='bsConfig'>`, + standalone: true }) class TestComponent { @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective; @@ -55,12 +56,12 @@ describe('datepicker:', () => { 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-daterangepicker.spec.ts b/src/datepicker/testing/bs-daterangepicker.spec.ts index 617235f365..9e4cf4d49e 100644 --- a/src/datepicker/testing/bs-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-daterangepicker.spec.ts @@ -13,7 +13,8 @@ import { firstValueFrom } from 'rxjs'; selector: 'test-cmp', template: `` + [bsConfig]="bsConfig">`, + standalone: true }) class TestComponent { @ViewChild(BsDaterangepickerDirective, { static: false }) daterangepicker: BsDaterangepickerDirective; @@ -54,12 +55,12 @@ describe('daterangepicker:', () => { 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-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..de08e215ed 100644 --- a/src/datepicker/testing/bs-inline-datepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-datepicker.spec.ts @@ -12,8 +12,9 @@ import { take } from 'rxjs/operators'; 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; @@ -39,12 +40,12 @@ describe('datepicker inline:', () => { 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-daterangepicker.spec.ts b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts index 4f4d4df06a..a6c6e0cc20 100644 --- a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts @@ -11,9 +11,10 @@ import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; import { initialYearShift } from '../engine/format-years-calendar'; @Component({ - selector: 'test-cmp', - template: ` - ` + selector: 'test-cmp', + template: ` + `, + standalone: true }) class TestComponent { @ViewChild(BsDaterangepickerInlineDirective, { static: false }) datepicker: BsDaterangepickerInlineDirective; @@ -40,12 +41,12 @@ describe('daterangepicker inline:', () => { 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/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..e31b28d54d 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 '../../../timepicker/timepicker.module'; +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..f576f03a22 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 '../../../tooltip/tooltip.module'; +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; From b21af228b0dd00ee1e8e0060015e2f9a1f9bb6f3 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:07:38 +0300 Subject: [PATCH 08/29] fix(accordion): fixed tests --- src/accordion/testing/accordion.component.spec.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/accordion/testing/accordion.component.spec.ts b/src/accordion/testing/accordion.component.spec.ts index f10d4e17ab..f2b097925f 100644 --- a/src/accordion/testing/accordion.component.spec.ts +++ b/src/accordion/testing/accordion.component.spec.ts @@ -5,8 +5,7 @@ import { AccordionConfig, AccordionModule } from '../index'; @Component({ selector: 'accordion-test', - template: '', - standalone: true + template: '' }) class TestAccordionComponent { oneAtATime = true; @@ -76,11 +75,11 @@ describe('Component: Accordion', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ + declarations: [TestAccordionComponent], + imports: [ AccordionModule, - BrowserAnimationsModule, - TestAccordionComponent - ] + BrowserAnimationsModule + ] }); TestBed.overrideComponent(TestAccordionComponent, { set: { template: html } From 23290de172e8f7998ea41c92579084112b07d31f Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:09:11 +0300 Subject: [PATCH 09/29] fix(accordion): fixed tests --- .../themes/bs/bs-datepicker-inline-container.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e31b28d54d..53c1e3e487 100644 --- a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts +++ b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts @@ -11,7 +11,7 @@ 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 '../../../timepicker/timepicker.module'; +import { DemoTimepickerModule } from '@ngx-bootstrap-doc/timepicker'; import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; From 33c2415a5e74466d852f146bf8679e97f1048640 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:09:45 +0300 Subject: [PATCH 10/29] fix(accordion): fixed tests --- .../themes/bs/bs-datepicker-inline-container.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 53c1e3e487..184a8eec67 100644 --- a/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts +++ b/src/datepicker/themes/bs/bs-datepicker-inline-container.component.ts @@ -11,7 +11,7 @@ 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 { DemoTimepickerModule } from '@ngx-bootstrap-doc/timepicker'; +import { TimepickerModule } from 'ngx-bootstrap/timepicker'; import { BsDaysCalendarViewComponent } from './bs-days-calendar-view.component'; import { NgIf, NgClass, NgSwitch, NgSwitchCase, NgFor, AsyncPipe } from '@angular/common'; From 95c5c7884215c9cf5b4ff4a643edc9614ef4bb94 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:10:41 +0300 Subject: [PATCH 11/29] fix(accordion): fixed tests --- src/datepicker/themes/bs/bs-days-calendar-view.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 f576f03a22..72b9332514 100644 --- a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts @@ -17,8 +17,8 @@ import { DayViewModel, WeekViewModel } from '../../models'; -import { BsDatepickerConfig } from '../../bs-datepicker.config'; -import { TooltipModule } from '../../../tooltip/tooltip.module'; +import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker'; +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'; From ca191ebae1edb0d00c03f68f9a79b63d89569be2 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:11:57 +0300 Subject: [PATCH 12/29] fix(accordion): fixed tests --- src/datepicker/themes/bs/bs-days-calendar-view.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 72b9332514..5d17b3096f 100644 --- a/src/datepicker/themes/bs/bs-days-calendar-view.component.ts +++ b/src/datepicker/themes/bs/bs-days-calendar-view.component.ts @@ -17,7 +17,7 @@ import { DayViewModel, WeekViewModel } from '../../models'; -import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker'; +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'; From aeaa4e74e068115ab747580d31e5e0490fc981bc Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 14:14:54 +0300 Subject: [PATCH 13/29] fix(carousel): fixed tests --- src/carousel/testing/carousel.component.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/carousel/testing/carousel.component.spec.ts b/src/carousel/testing/carousel.component.spec.ts index 25cffef976..332d6857e0 100644 --- a/src/carousel/testing/carousel.component.spec.ts +++ b/src/carousel/testing/carousel.component.spec.ts @@ -4,11 +4,12 @@ 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: '', standalone: true, - imports: [CarouselModule] + imports: [CommonModule, CarouselModule] }) class TestCarouselComponent { myInterval = 5000; From 68c3016f413af32401cf710578be6e2bc500840a Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Wed, 17 Jul 2024 18:15:07 +0300 Subject: [PATCH 14/29] feat(dropdown): added moduleless support --- apps/ngx-bootstrap-docs/src/app/app.module.ts | 2 +- libs/common-docs/src/lib/docs.module.ts | 2 +- libs/doc-pages/dropdown/src/lib/docs/usage.md | 2 +- .../dropdown/src/lib/dropdown.module.ts | 2 +- .../bs-datepicker-day-decorator.spec.ts | 10 +++---- .../bs-datepicker-navigation-view.spec.ts | 8 +++--- src/datepicker/testing/bs-datepicker.spec.ts | 7 +++-- .../testing/bs-daterangepicker.spec.ts | 15 +++++------ .../testing/bs-inline-datepicker.spec.ts | 14 +++++----- .../testing/bs-inline-daterangepicker.spec.ts | 15 +++++------ .../bs-dropdown-container.component.ts | 6 ++++- src/dropdown/bs-dropdown-menu.directive.ts | 3 ++- src/dropdown/bs-dropdown-toggle.directive.ts | 3 ++- src/dropdown/bs-dropdown.directive.ts | 3 ++- src/dropdown/bs-dropdown.module.ts | 27 +++++-------------- .../bs-dropdown-container.component.spec.ts | 2 +- .../testing/bs-dropdown.directive.spec.ts | 2 +- 17 files changed, 55 insertions(+), 68 deletions(-) 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/libs/common-docs/src/lib/docs.module.ts b/libs/common-docs/src/lib/docs.module.ts index c5ebec82ef..4f5ac4fc62 100644 --- a/libs/common-docs/src/lib/docs.module.ts +++ b/libs/common-docs/src/lib/docs.module.ts @@ -80,7 +80,7 @@ export { ThemesComponent } from './common/themes/themes.component'; ExamplesComponentModule, ApiSectionsComponentModule, TabsModule.forRoot(), - BsDropdownModule.forRoot(), + BsDropdownModule, RouterModule ], exports: [ diff --git a/libs/doc-pages/dropdown/src/lib/docs/usage.md b/libs/doc-pages/dropdown/src/lib/docs/usage.md index da282ecc1b..87ce181728 100644 --- a/libs/doc-pages/dropdown/src/lib/docs/usage.md +++ b/libs/doc-pages/dropdown/src/lib/docs/usage.md @@ -5,7 +5,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/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts index 964b0563b8..d18f46b7cb 100644 --- a/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts +++ b/src/datepicker/testing/bs-datepicker-day-decorator.spec.ts @@ -10,7 +10,6 @@ import '../../../scripts/jest/toHaveCssClass'; @Component({ selector: 'test-cmp', template: `{{ day.label }}`, - standalone: true }) class TestComponent { day: DayViewModel = { date: new Date(), label: '' }; @@ -33,10 +32,11 @@ describe('datepicker: [bsDatepickerDayDecorator]', () => { beforeEach(waitForAsync(() => TestBed.configureTestingModule({ - imports: [TestComponent, BsDatepickerDayDecoratorComponent], - providers: [BsDatepickerConfig] -}).compileComponents() - )); + declarations: [TestComponent], + imports: [BsDatepickerDayDecoratorComponent], + providers: [BsDatepickerConfig] + }).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 6d77c864b0..20cf6f7b5c 100644 --- a/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts +++ b/src/datepicker/testing/bs-datepicker-navigation-view.spec.ts @@ -11,7 +11,6 @@ import { BsDatepickerNavigationViewComponent } from '../themes/bs/bs-datepicker- [calendar]="month" (onNavigate)="navTo($event)" >`, - standalone: true }) class TestComponent { month!: DaysCalendarViewModel; @@ -55,9 +54,10 @@ describe('datepicker: bs-datepicker-navigation-view', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - imports: [TestComponent, BsDatepickerNavigationViewComponent] -}).compileComponents() - )); + declarations: [TestComponent], + imports: [BsDatepickerNavigationViewComponent] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); }); diff --git a/src/datepicker/testing/bs-datepicker.spec.ts b/src/datepicker/testing/bs-datepicker.spec.ts index cede529aa5..b9bb957a2e 100644 --- a/src/datepicker/testing/bs-datepicker.spec.ts +++ b/src/datepicker/testing/bs-datepicker.spec.ts @@ -15,7 +15,6 @@ import { BsDatepickerContainerComponent } from '../themes/bs/bs-datepicker-conta template: ``, - standalone: true }) class TestComponent { @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective; @@ -56,10 +55,10 @@ describe('datepicker:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - imports: [ + declarations: [TestComponent], + imports: [ BsDatepickerModule, - BrowserAnimationsModule, - TestComponent + BrowserAnimationsModule ] }).compileComponents() )); diff --git a/src/datepicker/testing/bs-daterangepicker.spec.ts b/src/datepicker/testing/bs-daterangepicker.spec.ts index 9e4cf4d49e..9fa64bcb8f 100644 --- a/src/datepicker/testing/bs-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-daterangepicker.spec.ts @@ -14,7 +14,6 @@ import { firstValueFrom } from 'rxjs'; template: ``, - standalone: true }) class TestComponent { @ViewChild(BsDaterangepickerDirective, { static: false }) daterangepicker: BsDaterangepickerDirective; @@ -55,13 +54,13 @@ describe('daterangepicker:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - imports: [ - BsDatepickerModule, - BrowserAnimationsModule, - TestComponent - ] -}).compileComponents() - )); + declarations: [TestComponent], + imports: [ + BsDatepickerModule, + BrowserAnimationsModule + ] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); diff --git a/src/datepicker/testing/bs-inline-datepicker.spec.ts b/src/datepicker/testing/bs-inline-datepicker.spec.ts index de08e215ed..87909cd339 100644 --- a/src/datepicker/testing/bs-inline-datepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-datepicker.spec.ts @@ -13,8 +13,7 @@ import { getYearsCalendarInitialDate } from '../utils/bs-calendar-utils'; @Component({ selector: 'test-cmp', - template: `>`, - standalone: true + template: `>` }) class TestComponent { @ViewChild(BsDatepickerInlineDirective, { static: false }) datepicker: BsDatepickerInlineDirective; @@ -40,13 +39,12 @@ describe('datepicker inline:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - imports: [ + declarations: [TestComponent], + imports: [ BsDatepickerModule, - BrowserAnimationsModule, - TestComponent - ] -}).compileComponents() - )); + 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 a6c6e0cc20..1a9651a946 100644 --- a/src/datepicker/testing/bs-inline-daterangepicker.spec.ts +++ b/src/datepicker/testing/bs-inline-daterangepicker.spec.ts @@ -13,8 +13,7 @@ import { initialYearShift } from '../engine/format-years-calendar'; @Component({ selector: 'test-cmp', template: ` - `, - standalone: true + ` }) class TestComponent { @ViewChild(BsDaterangepickerInlineDirective, { static: false }) datepicker: BsDaterangepickerInlineDirective; @@ -41,13 +40,13 @@ describe('daterangepicker inline:', () => { let fixture: TestFixture; beforeEach( waitForAsync(() => TestBed.configureTestingModule({ - imports: [ + declarations: [TestComponent], + imports: [ BsDatepickerModule, - BrowserAnimationsModule, - TestComponent - ] -}).compileComponents() - )); + BrowserAnimationsModule + ] + }).compileComponents()) + ); beforeEach(() => { fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); 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..843054ecf7 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,4 @@ import { BsDropdownState } from './bs-dropdown.state'; ] }) export class BsDropdownModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: BsDropdownModule, - providers: [ - ComponentLoaderFactory, - PositioningService, - BsDropdownState - ] - }; - } } 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 ] }); From 17978bd2e604a5aceccdeeb010829442f4cc92ac Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 15:04:57 +0300 Subject: [PATCH 15/29] feat(focustrap): added moduleless support --- src/focus-trap/focus-trap.module.ts | 20 +++----------------- src/focus-trap/focus-trap.ts | 12 ++++++++++-- src/modal/modal.module.ts | 2 -- 3 files changed, 13 insertions(+), 21 deletions(-) diff --git a/src/focus-trap/focus-trap.module.ts b/src/focus-trap/focus-trap.module.ts index 4fec94fc00..cba6ff34ff 100644 --- a/src/focus-trap/focus-trap.module.ts +++ b/src/focus-trap/focus-trap.module.ts @@ -1,25 +1,11 @@ -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 - ] - }; - } } 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/modal/modal.module.ts b/src/modal/modal.module.ts index 85f0a91b6d..445ba8a3c6 100644 --- a/src/modal/modal.module.ts +++ b/src/modal/modal.module.ts @@ -9,8 +9,6 @@ import { ModalDirective } from './modal.directive'; import { ModalContainerComponent } from './modal-container.component'; import { BsModalService } from './bs-modal.service'; -export const focusTrapModule = FocusTrapModule.forRoot(); - @NgModule({ imports: [FocusTrapModule], declarations: [ From abbead975e1a32bfda675c3d27c821d152fb198a Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 15:35:29 +0300 Subject: [PATCH 16/29] feat(modal): added moduleless support --- libs/doc-pages/modal/src/lib/docs/usage.md | 2 +- libs/doc-pages/modal/src/lib/modal.module.ts | 7 ++--- src/modal/modal-backdrop.component.ts | 9 ++++--- src/modal/modal-container.component.ts | 26 ++++++++++-------- src/modal/modal.directive.ts | 5 ++-- src/modal/modal.module.ts | 27 +++++-------------- .../testing/modal-backdrop.component.spec.ts | 4 +-- .../testing/modal.default-setting.spec.ts | 2 +- src/modal/testing/modal.service.spec.ts | 2 +- 9 files changed, 38 insertions(+), 46 deletions(-) diff --git a/libs/doc-pages/modal/src/lib/docs/usage.md b/libs/doc-pages/modal/src/lib/docs/usage.md index 179a43940c..1870a6a991 100644 --- a/libs/doc-pages/modal/src/lib/docs/usage.md +++ b/libs/doc-pages/modal/src/lib/docs/usage.md @@ -1,6 +1,6 @@ import { ModalModule } from 'ngx-bootstrap/modal'; @NgModule({ - imports: [ModalModule.forRoot(),...] + imports: [ModalModule,...] }) 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..bee409ba45 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,7 +24,7 @@ export { ModalSectionComponent } from './modal-section.component'; ...DEMO_COMPONENTS ], imports: [ - ModalModule.forRoot(), + ModalModule, PopoverModule.forRoot(), TooltipModule.forRoot(), CommonModule, @@ -32,6 +32,7 @@ export { ModalSectionComponent } from './modal-section.component'; DocsModule, RouterModule.forChild(routes) ], - exports: [ModalSectionComponent] + exports: [ModalSectionComponent], + providers: [BsModalService] }) export class DemoModalModule {} 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 445ba8a3c6..558ab5a5e4 100644 --- a/src/modal/modal.module.ts +++ b/src/modal/modal.module.ts @@ -1,34 +1,19 @@ -import { NgModule, ModuleWithProviders } from '@angular/core'; +import { 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'; @NgModule({ - imports: [FocusTrapModule], - declarations: [ - ModalBackdropComponent, - ModalDirective, - ModalContainerComponent + imports: [ + FocusTrapModule, + ModalBackdropComponent, + ModalDirective, + ModalContainerComponent ], exports: [ModalBackdropComponent, ModalDirective] }) export class ModalModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: ModalModule, - providers: [BsModalService, ComponentLoaderFactory, PositioningService] - }; - } - static forChild(): ModuleWithProviders { - return { - ngModule: ModalModule, - providers: [BsModalService, ComponentLoaderFactory, PositioningService] - }; - } } 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); From c5dcf6ca6601e3bad890d55ac3392ccbed78d803 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 15:42:33 +0300 Subject: [PATCH 17/29] feat(pagination): added moduleless support --- libs/doc-pages/pagination/src/lib/docs/usage.md | 2 +- .../pagination/src/lib/pagination.module.ts | 2 +- src/pagination/pager.component.ts | 9 ++++++--- src/pagination/pagination.component.ts | 9 ++++++--- src/pagination/pagination.module.ts | 13 ++++--------- src/pagination/testing/pager.component.spec.ts | 2 +- src/pagination/testing/pagination.component.spec.ts | 2 +- 7 files changed, 20 insertions(+), 19 deletions(-) diff --git a/libs/doc-pages/pagination/src/lib/docs/usage.md b/libs/doc-pages/pagination/src/lib/docs/usage.md index 07f1cbb7ee..ec257b0ae2 100644 --- a/libs/doc-pages/pagination/src/lib/docs/usage.md +++ b/libs/doc-pages/pagination/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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..fbaeea3e3b 100644 --- a/src/pagination/pagination.module.ts +++ b/src/pagination/pagination.module.ts @@ -1,16 +1,11 @@ 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: [] }; - } -} +export class 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; From 76a1b15364ee919793c6ef72de34aa48c55c22f1 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 16:28:04 +0300 Subject: [PATCH 18/29] feat(popover): added moduleless support --- .../stackblitz/app.module.ts | 2 +- libs/doc-pages/modal/src/lib/modal.module.ts | 2 +- libs/doc-pages/popover/src/lib/docs/usage.md | 2 +- .../popover/src/lib/popover.module.ts | 2 +- src/popover/popover-container.component.ts | 34 ++++++++++--------- src/popover/popover.directive.ts | 7 +++- src/popover/popover.module.ts | 19 +++++------ 7 files changed, 36 insertions(+), 32 deletions(-) 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..861a050e80 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 @@ -26,7 +26,7 @@ import { ${className === 'DemoModalServiceFromComponent' ? `${className}, ModalC imports: [ ${moduleData.moduleName}.forRoot(), ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule.forRoot(), - PopoverModule.forRoot(),` : ''} + PopoverModule,` : ''} BrowserAnimationsModule, CommonModule, FormsModule, diff --git a/libs/doc-pages/modal/src/lib/modal.module.ts b/libs/doc-pages/modal/src/lib/modal.module.ts index bee409ba45..bf8662afcc 100644 --- a/libs/doc-pages/modal/src/lib/modal.module.ts +++ b/libs/doc-pages/modal/src/lib/modal.module.ts @@ -25,7 +25,7 @@ export { ModalSectionComponent } from './modal-section.component'; ], imports: [ ModalModule, - PopoverModule.forRoot(), + PopoverModule, TooltipModule.forRoot(), CommonModule, FormsModule, diff --git a/libs/doc-pages/popover/src/lib/docs/usage.md b/libs/doc-pages/popover/src/lib/docs/usage.md index 249cf11056..cde9303e87 100644 --- a/libs/doc-pages/popover/src/lib/docs/usage.md +++ b/libs/doc-pages/popover/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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..943c12ad1a 100644 --- a/src/popover/popover.module.ts +++ b/src/popover/popover.module.ts @@ -1,21 +1,18 @@ -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] - }; - } + // static forRoot(): ModuleWithProviders { + // return { + // ngModule: PopoverModule, + // providers: [ComponentLoaderFactory, PositioningService] + // }; + // } } From 6b58679bf09f8786134609a3af0f1b3b6a3588b9 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 16:36:57 +0300 Subject: [PATCH 19/29] feat(progressbar): added moduleless support --- .../progressbar/src/lib/docs/usage.md | 2 +- .../progressbar/src/lib/progressbar.module.ts | 2 +- src/progressbar/bar.component.ts | 33 +++++++-------- src/progressbar/progressbar.component.ts | 24 ++++++----- src/progressbar/progressbar.module.ts | 14 ++----- .../testing/progressbar.component.spec.ts | 40 ++++++++----------- 6 files changed, 54 insertions(+), 61 deletions(-) diff --git a/libs/doc-pages/progressbar/src/lib/docs/usage.md b/libs/doc-pages/progressbar/src/lib/docs/usage.md index 4e07857dcf..07b1903169 100644 --- a/libs/doc-pages/progressbar/src/lib/docs/usage.md +++ b/libs/doc-pages/progressbar/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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/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..64c31168cb 100644 --- a/src/progressbar/progressbar.module.ts +++ b/src/progressbar/progressbar.module.ts @@ -1,16 +1,10 @@ -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: [] }; - } -} +export class ProgressbarModule {} diff --git a/src/progressbar/testing/progressbar.component.spec.ts b/src/progressbar/testing/progressbar.component.spec.ts index 273545d29b..86a0a25d9d 100644 --- a/src/progressbar/testing/progressbar.component.spec.ts +++ b/src/progressbar/testing/progressbar.component.spec.ts @@ -3,8 +3,9 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { ProgressbarComponent, ProgressbarModule } from '../index'; @Component({ - selector: 'progressbar-test', - template: '' + selector: 'progressbar-test', + template: '', + standalone: true }) class TestProgressbarComponent extends ProgressbarComponent {} @@ -19,9 +20,8 @@ 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, TestProgressbarComponent] +}); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; component.animate = false; @@ -32,9 +32,8 @@ 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, TestProgressbarComponent] +}); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; component.striped = false; @@ -46,9 +45,8 @@ describe('Component: Progress Bar', () => { it('should work correctly with default values', () => { const tpl = ``; TestBed.configureTestingModule({ - declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] - }); + imports: [ProgressbarModule, TestProgressbarComponent] +}); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -64,9 +62,8 @@ describe('Component: Progress Bar', () => { it('checking appropriate styles after setting up of type', () => { const tpl = ``; TestBed.configureTestingModule({ - declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] - }); + imports: [ProgressbarModule, TestProgressbarComponent] +}); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -84,9 +81,8 @@ describe('Component: Progress Bar', () => { it('checking of correct calculation of percent value(bar length)', () => { const tpl = ``; TestBed.configureTestingModule({ - declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] - }); + imports: [ProgressbarModule, TestProgressbarComponent] +}); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -112,9 +108,8 @@ describe('Component: Progress Bar', () => { }; const tpl = ``; TestBed.configureTestingModule({ - declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] - }); + imports: [ProgressbarModule, TestProgressbarComponent] +}); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -146,9 +141,8 @@ describe('progress bar', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [TestProgressbarComponent], - imports: [ProgressbarModule.forRoot()] - }); + imports: [ProgressbarModule, TestProgressbarComponent] +}); fixture = TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }) From 326a2b76c27a2a591b9798cc4e894992e4303e9c Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 16:42:47 +0300 Subject: [PATCH 20/29] feat(rating): added moduleless support --- libs/doc-pages/rating/src/lib/docs/usage.md | 2 +- .../doc-pages/rating/src/lib/rating.module.ts | 2 +- src/rating/rating.component.ts | 11 ++++++---- src/rating/rating.module.ts | 17 ++++---------- src/rating/testing/rating.component.spec.ts | 22 +++++++++---------- 5 files changed, 24 insertions(+), 30 deletions(-) diff --git a/libs/doc-pages/rating/src/lib/docs/usage.md b/libs/doc-pages/rating/src/lib/docs/usage.md index 5d87d36b73..2362c854c8 100644 --- a/libs/doc-pages/rating/src/lib/docs/usage.md +++ b/libs/doc-pages/rating/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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..828847587a 100644 --- a/src/rating/rating.module.ts +++ b/src/rating/rating.module.ts @@ -1,18 +1,9 @@ -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: [] - }; - } -} +export class RatingModule {} diff --git a/src/rating/testing/rating.component.spec.ts b/src/rating/testing/rating.component.spec.ts index b22cedca8d..cb886f5141 100644 --- a/src/rating/testing/rating.component.spec.ts +++ b/src/rating/testing/rating.component.spec.ts @@ -5,8 +5,10 @@ import { FormsModule } from '@angular/forms'; import { RatingComponent, RatingConfig, RatingModule } from '../index'; @Component({ - selector: 'rating-test', - template: '' + selector: 'rating-test', + template: '', + standalone: true, + imports: [FormsModule] }) class TestRatingComponent { max = 5; @@ -26,9 +28,9 @@ describe('Component: Rating. Init:', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [RatingComponent], - providers: [RatingConfig] - }); + imports: [RatingComponent], + providers: [RatingConfig] +}); fixture = TestBed.createComponent(RatingComponent); context = fixture.debugElement.componentInstance; @@ -89,9 +91,8 @@ describe('Component: Rating. Custom template:', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - declarations: [TestRatingComponent], - imports: [RatingModule.forRoot(), FormsModule] - }); + imports: [RatingModule, FormsModule, TestRatingComponent] +}); TestBed.overrideComponent(TestRatingComponent, { set: { template: ` @@ -125,9 +126,8 @@ describe('Component: Rating. Clicks:', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - declarations: [TestRatingComponent], - imports: [RatingModule.forRoot(), FormsModule] - }); + imports: [RatingModule, FormsModule, TestRatingComponent] +}); TestBed.overrideComponent(TestRatingComponent, { set: {template: tpl} }); From a0d102121f3ea415d1d468cc0df0fbcce4f1847a Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 17:04:38 +0300 Subject: [PATCH 21/29] feat(sortable): added moduleless support --- libs/doc-pages/sortable/src/lib/docs/usage.md | 2 +- .../sortable/src/lib/sortable.module.ts | 2 +- src/sortable/sortable.component.ts | 24 +++++++++++-------- src/sortable/sortable.module.ts | 15 ++++-------- .../testing/draggable-item.service.spec.ts | 9 +++---- .../testing/sortable.component.spec.ts | 13 +++++----- 6 files changed, 32 insertions(+), 33 deletions(-) diff --git a/libs/doc-pages/sortable/src/lib/docs/usage.md b/libs/doc-pages/sortable/src/lib/docs/usage.md index 9e361d631d..aa41959f3d 100644 --- a/libs/doc-pages/sortable/src/lib/docs/usage.md +++ b/libs/doc-pages/sortable/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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..052ef463ba 100644 --- a/src/sortable/sortable.module.ts +++ b/src/sortable/sortable.module.ts @@ -1,16 +1,9 @@ -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] }; - } -} +export class 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(); From 2a822c727b1580d8813d2ba356e76cca6f40be2a Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Thu, 18 Jul 2024 17:16:58 +0300 Subject: [PATCH 22/29] feat(tabs): added moduleless support --- .../demo-examples-section/index.ts | 2 +- libs/common-docs/src/lib/docs.module.ts | 2 +- .../datepicker/src/lib/datepicker.module.ts | 2 +- .../src/lib/demo-datepicker.module.ts | 2 +- libs/doc-pages/tabs/src/lib/docs/usage.md | 2 +- libs/doc-pages/tabs/src/lib/tabs.module.ts | 2 +- src/tabs/ng-transclude.directive.ts | 3 +- src/tabs/tab-heading.directive.ts | 5 +++- src/tabs/tab.directive.ts | 5 +++- src/tabs/tabs.module.ts | 29 +++++++------------ src/tabs/tabset.component.ts | 10 +++++-- src/tabs/testing/tabset.component.spec.ts | 2 +- 12 files changed, 34 insertions(+), 32 deletions(-) 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/docs.module.ts b/libs/common-docs/src/lib/docs.module.ts index 4f5ac4fc62..63d909c472 100644 --- a/libs/common-docs/src/lib/docs.module.ts +++ b/libs/common-docs/src/lib/docs.module.ts @@ -79,7 +79,7 @@ export { ThemesComponent } from './common/themes/themes.component'; NgApiDocModule, ExamplesComponentModule, ApiSectionsComponentModule, - TabsModule.forRoot(), + TabsModule, BsDropdownModule, RouterModule ], diff --git a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts index 5f95b7b08d..35920e95b0 100644 --- a/libs/doc-pages/datepicker/src/lib/datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/datepicker.module.ts @@ -44,7 +44,7 @@ locales.forEach((locale: LocaleData) => { ], imports: [ BsDatepickerModule, - TabsModule.forRoot(), + 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 d9c3533907..4c6894e684 100644 --- a/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts +++ b/libs/doc-pages/datepicker/src/lib/demo-datepicker.module.ts @@ -42,7 +42,7 @@ locales.forEach((locale: LocaleData) => { ], imports: [ BsDatepickerModule, - TabsModule.forRoot(), + TabsModule, CommonModule, FormsModule, ReactiveFormsModule, diff --git a/libs/doc-pages/tabs/src/lib/docs/usage.md b/libs/doc-pages/tabs/src/lib/docs/usage.md index 338fa69b36..40842540bb 100644 --- a/libs/doc-pages/tabs/src/lib/docs/usage.md +++ b/libs/doc-pages/tabs/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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/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..65df698468 100644 --- a/src/tabs/tabs.module.ts +++ b/src/tabs/tabs.module.ts @@ -7,25 +7,16 @@ 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: [] - }; - } } 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); From c630f65cafd7dc95a97260caf7aaa0d67c343653 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 10:03:10 +0300 Subject: [PATCH 23/29] feat(timepicker): added moduleless support --- libs/doc-pages/timepicker/src/lib/docs/usage.md | 2 +- .../timepicker/src/lib/timepicker.module.ts | 2 +- .../testing/timepicker.component.spec.ts | 2 +- src/timepicker/timepicker.component.ts | 15 +++++++++------ src/timepicker/timepicker.module.ts | 17 +++-------------- 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/libs/doc-pages/timepicker/src/lib/docs/usage.md b/libs/doc-pages/timepicker/src/lib/docs/usage.md index 1ccef910f7..561e195df0 100644 --- a/libs/doc-pages/timepicker/src/lib/docs/usage.md +++ b/libs/doc-pages/timepicker/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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..1feb16b791 100644 --- a/src/timepicker/timepicker.module.ts +++ b/src/timepicker/timepicker.module.ts @@ -1,21 +1,10 @@ -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] - }; - } } From d04f7bb503d1ce640b9807228b78b72c9345b949 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 10:10:50 +0300 Subject: [PATCH 24/29] feat(timepicker): added moduleless support --- README.md | 2 +- .../stackblitz/app.module.ts | 2 +- libs/doc-pages/modal/src/lib/modal.module.ts | 2 +- libs/doc-pages/tooltip/src/lib/docs/usage.md | 2 +- .../tooltip/src/lib/tooltip.module.ts | 2 +- src/root/README.md | 2 +- src/tooltip/testing/tooltip.directive.spec.ts | 2 +- src/tooltip/tooltip-container.component.ts | 28 +++++++++---------- src/tooltip/tooltip.directive.ts | 8 ++++-- src/tooltip/tooltip.module.ts | 16 ++--------- 10 files changed, 30 insertions(+), 36 deletions(-) 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/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 861a050e80..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,7 +25,7 @@ import { ${className === 'DemoModalServiceFromComponent' ? `${className}, ModalC declarations: [${className === 'DemoModalServiceFromComponent' ? `${className}, ModalContentComponent` : className}], imports: [ ${moduleData.moduleName}.forRoot(), - ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule.forRoot(), + ${className === 'DemoModalWithPopupsComponent' ? `TooltipModule, PopoverModule,` : ''} BrowserAnimationsModule, CommonModule, diff --git a/libs/doc-pages/modal/src/lib/modal.module.ts b/libs/doc-pages/modal/src/lib/modal.module.ts index bf8662afcc..cad8420865 100644 --- a/libs/doc-pages/modal/src/lib/modal.module.ts +++ b/libs/doc-pages/modal/src/lib/modal.module.ts @@ -26,7 +26,7 @@ export { ModalSectionComponent } from './modal-section.component'; imports: [ ModalModule, PopoverModule, - TooltipModule.forRoot(), + TooltipModule, CommonModule, FormsModule, DocsModule, diff --git a/libs/doc-pages/tooltip/src/lib/docs/usage.md b/libs/doc-pages/tooltip/src/lib/docs/usage.md index f35fe98d1d..2d693a6eb4 100644 --- a/libs/doc-pages/tooltip/src/lib/docs/usage.md +++ b/libs/doc-pages/tooltip/src/lib/docs/usage.md @@ -1,6 +1,6 @@ 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/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/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..bd49c39622 100644 --- a/src/tooltip/tooltip.module.ts +++ b/src/tooltip/tooltip.module.ts @@ -1,20 +1,10 @@ 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] - }; - } -} +export class TooltipModule {} From 7d2e69740106a806c4bdfbd6ba132666bb5ac351 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 11:25:23 +0300 Subject: [PATCH 25/29] feat(typeahead): added moduleless support --- .../typeahead-container.component.spec.ts | 3 +- .../testing/typeahead.directive.spec.ts | 7 ++-- .../typeahead-container.component.ts | 34 +++++++++++-------- src/typeahead/typeahead.directive.ts | 21 +++++++----- src/typeahead/typeahead.module.ts | 16 ++------- 5 files changed, 39 insertions(+), 42 deletions(-) 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..cf28372887 100644 --- a/src/typeahead/typeahead.module.ts +++ b/src/typeahead/typeahead.module.ts @@ -1,21 +1,11 @@ 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] - }; - } -} +export class TypeaheadModule {} From 9ac17354e022450d183f2dc352b15eb095e3ab56 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 11:46:08 +0300 Subject: [PATCH 26/29] feat(typeahead): added moduleless support --- libs/doc-pages/typeahead/src/lib/docs/usage.md | 2 +- libs/doc-pages/typeahead/src/lib/typeahead.module.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/doc-pages/typeahead/src/lib/docs/usage.md b/libs/doc-pages/typeahead/src/lib/docs/usage.md index 843de6f716..c8d8c24e2a 100644 --- a/libs/doc-pages/typeahead/src/lib/docs/usage.md +++ b/libs/doc-pages/typeahead/src/lib/docs/usage.md @@ -5,7 +5,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] From 2876b793735ddf14fcd513a8ce61cf9c52abada3 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 15:20:46 +0300 Subject: [PATCH 27/29] fix(rating): tests ajust to moduleless --- src/rating/testing/rating.component.spec.ts | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/rating/testing/rating.component.spec.ts b/src/rating/testing/rating.component.spec.ts index cb886f5141..21cc76245a 100644 --- a/src/rating/testing/rating.component.spec.ts +++ b/src/rating/testing/rating.component.spec.ts @@ -5,10 +5,8 @@ import { FormsModule } from '@angular/forms'; import { RatingComponent, RatingConfig, RatingModule } from '../index'; @Component({ - selector: 'rating-test', - template: '', - standalone: true, - imports: [FormsModule] + selector: 'rating-test', + template: '' }) class TestRatingComponent { max = 5; @@ -28,9 +26,9 @@ describe('Component: Rating. Init:', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [RatingComponent], - providers: [RatingConfig] -}); + imports: [RatingComponent], + providers: [RatingConfig] + }); fixture = TestBed.createComponent(RatingComponent); context = fixture.debugElement.componentInstance; @@ -91,8 +89,9 @@ describe('Component: Rating. Custom template:', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - imports: [RatingModule, FormsModule, TestRatingComponent] -}); + declarations: [TestRatingComponent], + imports: [RatingModule, FormsModule] + }); TestBed.overrideComponent(TestRatingComponent, { set: { template: ` @@ -126,8 +125,9 @@ describe('Component: Rating. Clicks:', () => { beforeEach( fakeAsync(() => { TestBed.configureTestingModule({ - imports: [RatingModule, FormsModule, TestRatingComponent] -}); + declarations: [TestRatingComponent], + imports: [RatingModule, FormsModule] + }); TestBed.overrideComponent(TestRatingComponent, { set: {template: tpl} }); From a532cef0738491c929873b9fae44ba441ae05171 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Fri, 19 Jul 2024 15:30:47 +0300 Subject: [PATCH 28/29] fix(progressbar): tests ajust to moduleless --- .../testing/progressbar.component.spec.ts | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/src/progressbar/testing/progressbar.component.spec.ts b/src/progressbar/testing/progressbar.component.spec.ts index 86a0a25d9d..7028dbe435 100644 --- a/src/progressbar/testing/progressbar.component.spec.ts +++ b/src/progressbar/testing/progressbar.component.spec.ts @@ -3,9 +3,8 @@ import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { ProgressbarComponent, ProgressbarModule } from '../index'; @Component({ - selector: 'progressbar-test', - template: '', - standalone: true + selector: 'progressbar-test', + template: '' }) class TestProgressbarComponent extends ProgressbarComponent {} @@ -20,8 +19,9 @@ describe('Component: Progress Bar', () => { it('check animate setter when _animate is equal to setter\'s argument', () => { TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; component.animate = false; @@ -32,8 +32,9 @@ describe('Component: Progress Bar', () => { it('check striped setter when _striped is equal to setter\'s argument', () => { TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); fixture = TestBed.createComponent(TestProgressbarComponent); component = fixture.componentInstance; component.striped = false; @@ -45,8 +46,9 @@ describe('Component: Progress Bar', () => { it('should work correctly with default values', () => { const tpl = ``; TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -62,8 +64,9 @@ describe('Component: Progress Bar', () => { it('checking appropriate styles after setting up of type', () => { const tpl = ``; TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -81,8 +84,9 @@ describe('Component: Progress Bar', () => { it('checking of correct calculation of percent value(bar length)', () => { const tpl = ``; TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -108,8 +112,9 @@ describe('Component: Progress Bar', () => { }; const tpl = ``; TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }); @@ -141,8 +146,9 @@ describe('progress bar', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [ProgressbarModule, TestProgressbarComponent] -}); + declarations: [TestProgressbarComponent], + imports: [ProgressbarModule] + }); fixture = TestBed.overrideComponent(TestProgressbarComponent, { set: { template: tpl } }) From 7eface6d5a48ea7e48c419360ecb2f8828e3bfb3 Mon Sep 17 00:00:00 2001 From: Umanskiy Aleksey Date: Mon, 22 Jul 2024 11:16:48 +0300 Subject: [PATCH 29/29] chore(docs): added deprecations --- src/accordion/accordion.module.ts | 7 ++++++- src/alert/alert.module.ts | 7 ++++++- src/buttons/buttons.module.ts | 7 ++++++- src/carousel/carousel.module.ts | 4 ++++ src/collapse/collapse.module.ts | 7 ++++++- src/datepicker/bs-datepicker.module.ts | 4 ++++ src/dropdown/bs-dropdown.module.ts | 4 ++++ src/focus-trap/focus-trap.module.ts | 4 ++++ src/modal/modal.module.ts | 4 ++++ src/pagination/pagination.module.ts | 7 ++++++- src/popover/popover.module.ts | 10 ++++------ src/progressbar/progressbar.module.ts | 7 ++++++- src/rating/rating.module.ts | 7 ++++++- src/sortable/sortable.module.ts | 7 ++++++- src/tabs/tabs.module.ts | 4 ++++ src/timepicker/timepicker.module.ts | 4 ++++ src/tooltip/tooltip.module.ts | 7 ++++++- src/typeahead/typeahead.module.ts | 7 ++++++- 18 files changed, 92 insertions(+), 16 deletions(-) diff --git a/src/accordion/accordion.module.ts b/src/accordion/accordion.module.ts index 4dd2978be8..60a8a70db1 100644 --- a/src/accordion/accordion.module.ts +++ b/src/accordion/accordion.module.ts @@ -7,4 +7,9 @@ import { AccordionPanelComponent } from './accordion-group.component'; imports: [AccordionComponent, AccordionPanelComponent], exports: [AccordionComponent, AccordionPanelComponent] }) -export class AccordionModule {} +export class AccordionModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return AccordionModule; + } +} diff --git a/src/alert/alert.module.ts b/src/alert/alert.module.ts index ce839d9ee8..d682d7cbce 100644 --- a/src/alert/alert.module.ts +++ b/src/alert/alert.module.ts @@ -5,4 +5,9 @@ import { AlertComponent } from './alert.component'; imports: [AlertComponent], exports: [AlertComponent] }) -export class AlertModule {} +export class AlertModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return AlertModule; + } +} diff --git a/src/buttons/buttons.module.ts b/src/buttons/buttons.module.ts index a9741b5d13..dd6ad1d660 100644 --- a/src/buttons/buttons.module.ts +++ b/src/buttons/buttons.module.ts @@ -8,4 +8,9 @@ import { ButtonRadioGroupDirective } from './button-radio-group.directive'; imports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective], exports: [ButtonCheckboxDirective, ButtonRadioDirective, ButtonRadioGroupDirective] }) -export class ButtonsModule {} +export class ButtonsModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return ButtonsModule; + } +} diff --git a/src/carousel/carousel.module.ts b/src/carousel/carousel.module.ts index 30ed9d41b4..177452e83c 100644 --- a/src/carousel/carousel.module.ts +++ b/src/carousel/carousel.module.ts @@ -8,4 +8,8 @@ import { SlideComponent } from './slide.component'; exports: [SlideComponent, CarouselComponent] }) export class CarouselModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return CarouselModule; + } } diff --git a/src/collapse/collapse.module.ts b/src/collapse/collapse.module.ts index 3003a55d79..769cddbde2 100644 --- a/src/collapse/collapse.module.ts +++ b/src/collapse/collapse.module.ts @@ -6,4 +6,9 @@ import { CollapseDirective } from './collapse.directive'; imports: [CollapseDirective], exports: [CollapseDirective] }) -export class CollapseModule {} +export class CollapseModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return CollapseModule; + } +} diff --git a/src/datepicker/bs-datepicker.module.ts b/src/datepicker/bs-datepicker.module.ts index bac60376fd..88abae332f 100644 --- a/src/datepicker/bs-datepicker.module.ts +++ b/src/datepicker/bs-datepicker.module.ts @@ -63,4 +63,8 @@ import { BsYearsCalendarViewComponent } from './themes/bs/bs-years-calendar-view ] }) export class BsDatepickerModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return BsDatepickerModule; + } } diff --git a/src/dropdown/bs-dropdown.module.ts b/src/dropdown/bs-dropdown.module.ts index 843054ecf7..5ab54af6fd 100644 --- a/src/dropdown/bs-dropdown.module.ts +++ b/src/dropdown/bs-dropdown.module.ts @@ -20,4 +20,8 @@ import { BsDropdownDirective } from './bs-dropdown.directive'; ] }) export class BsDropdownModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return BsDropdownModule; + } } diff --git a/src/focus-trap/focus-trap.module.ts b/src/focus-trap/focus-trap.module.ts index cba6ff34ff..60ecd48574 100644 --- a/src/focus-trap/focus-trap.module.ts +++ b/src/focus-trap/focus-trap.module.ts @@ -8,4 +8,8 @@ import { FocusTrapDirective } from './focus-trap'; exports: [FocusTrapDirective] }) export class FocusTrapModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return FocusTrapModule; + } } diff --git a/src/modal/modal.module.ts b/src/modal/modal.module.ts index 558ab5a5e4..66c6d32f8f 100644 --- a/src/modal/modal.module.ts +++ b/src/modal/modal.module.ts @@ -16,4 +16,8 @@ import { ModalContainerComponent } from './modal-container.component'; exports: [ModalBackdropComponent, ModalDirective] }) export class ModalModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return ModalModule; + } } diff --git a/src/pagination/pagination.module.ts b/src/pagination/pagination.module.ts index fbaeea3e3b..0dc6fd8334 100644 --- a/src/pagination/pagination.module.ts +++ b/src/pagination/pagination.module.ts @@ -8,4 +8,9 @@ import { PaginationComponent } from './pagination.component'; imports: [CommonModule, PagerComponent, PaginationComponent], exports: [PagerComponent, PaginationComponent] }) -export class PaginationModule {} +export class PaginationModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return PaginationModule; + } +} diff --git a/src/popover/popover.module.ts b/src/popover/popover.module.ts index 943c12ad1a..d992626951 100644 --- a/src/popover/popover.module.ts +++ b/src/popover/popover.module.ts @@ -9,10 +9,8 @@ import { PopoverContainerComponent } from './popover-container.component'; 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/progressbar/progressbar.module.ts b/src/progressbar/progressbar.module.ts index 64c31168cb..feb7ac4f90 100644 --- a/src/progressbar/progressbar.module.ts +++ b/src/progressbar/progressbar.module.ts @@ -7,4 +7,9 @@ import { ProgressbarComponent } from './progressbar.component'; imports: [BarComponent, ProgressbarComponent], exports: [BarComponent, ProgressbarComponent] }) -export class ProgressbarModule {} +export class ProgressbarModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return ProgressbarModule; + } +} diff --git a/src/rating/rating.module.ts b/src/rating/rating.module.ts index 828847587a..2b75fd726d 100644 --- a/src/rating/rating.module.ts +++ b/src/rating/rating.module.ts @@ -6,4 +6,9 @@ import { RatingComponent } from './rating.component'; imports: [RatingComponent], exports: [RatingComponent] }) -export class RatingModule {} +export class RatingModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return RatingModule; + } +} diff --git a/src/sortable/sortable.module.ts b/src/sortable/sortable.module.ts index 052ef463ba..1bddcf40cc 100644 --- a/src/sortable/sortable.module.ts +++ b/src/sortable/sortable.module.ts @@ -6,4 +6,9 @@ import { SortableComponent } from './sortable.component'; imports: [SortableComponent], exports: [SortableComponent] }) -export class SortableModule {} +export class SortableModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return SortableModule; + } +} diff --git a/src/tabs/tabs.module.ts b/src/tabs/tabs.module.ts index 65df698468..359d111fcc 100644 --- a/src/tabs/tabs.module.ts +++ b/src/tabs/tabs.module.ts @@ -19,4 +19,8 @@ import { TabsetComponent } from './tabset.component'; ] }) export class TabsModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TabsModule; + } } diff --git a/src/timepicker/timepicker.module.ts b/src/timepicker/timepicker.module.ts index 1feb16b791..9b10a82df5 100644 --- a/src/timepicker/timepicker.module.ts +++ b/src/timepicker/timepicker.module.ts @@ -7,4 +7,8 @@ import { TimepickerComponent } from './timepicker.component'; exports: [TimepickerComponent], }) export class TimepickerModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TimepickerModule; + } } diff --git a/src/tooltip/tooltip.module.ts b/src/tooltip/tooltip.module.ts index bd49c39622..928ca7a217 100644 --- a/src/tooltip/tooltip.module.ts +++ b/src/tooltip/tooltip.module.ts @@ -7,4 +7,9 @@ import { TooltipDirective } from './tooltip.directive'; imports: [CommonModule, TooltipDirective, TooltipContainerComponent], exports: [TooltipDirective] }) -export class TooltipModule {} +export class TooltipModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TooltipModule; + } +} diff --git a/src/typeahead/typeahead.module.ts b/src/typeahead/typeahead.module.ts index cf28372887..ccdd9d35dd 100644 --- a/src/typeahead/typeahead.module.ts +++ b/src/typeahead/typeahead.module.ts @@ -8,4 +8,9 @@ import { TypeaheadDirective } from './typeahead.directive'; imports: [CommonModule, TypeaheadContainerComponent, TypeaheadDirective], exports: [TypeaheadContainerComponent, TypeaheadDirective] }) -export class TypeaheadModule {} +export class TypeaheadModule { + // @deprecated method not required anymore, will be deleted in v19.0.0 + static forRoot() { + return TypeaheadModule; + } +}