feat(progressbar): added moduleless support

valor-software · Jul 18, 2024 · 6b58679 · 6b58679
1 parent 76a1b15
commit 6b58679
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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<ProgressbarModule> {
-    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
@@ -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 = `<progressbar></progressbar>`;
     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 = `<progressbar [type]="typeValue"></progressbar>`;
     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 = `<progressbar [max]="100" [value]="60"></progressbar>`;
     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 = `<progressbar [type]="typeValue" [value]="valueValue" [animate]="true" [max]="maxValue"></progressbar>`;
     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 }
     })