feat(progressbar): add stacked progressbar (#4621)

demo/src/app/components/progressbar/demos/stacked/progressbar-stacked.html

@@ -0,0 +1,5 @@
+<ngb-progressbar-stacked>
+	<ngb-progressbar type="danger" [value]="20"></ngb-progressbar>
+	<ngb-progressbar type="warning" [value]="50"></ngb-progressbar>
+	<ngb-progressbar type="success" [value]="30"></ngb-progressbar>
+</ngb-progressbar-stacked>

demo/src/app/components/progressbar/demos/stacked/progressbar-stacked.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NgbProgressbarModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+	selector: 'ngbd-progressbar-stacked',
+	standalone: true,
+	imports: [NgbProgressbarModule],
+	templateUrl: './progressbar-stacked.html',
+})
+export class NgbdProgressbarStacked {}

demo/src/app/components/progressbar/progressbar.routes.ts

@@ -6,6 +6,7 @@ import { NgbdProgressbarConfig } from './demos/config/progressbar-config';
 import { NgbdProgressbarHeight } from './demos/height/progressbar-height';
 import { NgbdProgressbarLabels } from './demos/labels/progressbar-labels';
 import { NgbdProgressbarShowvalue } from './demos/showvalue/progressbar-showvalue';
+import { NgbdProgressbarStacked } from './demos/stacked/progressbar-stacked';
 import { NgbdProgressbarStriped } from './demos/striped/progressbar-striped';
 import { NgbdProgressbarTextTypes } from './demos/texttypes/progressbar-texttypes';
 import { Routes } from '@angular/router';
@@ -53,6 +54,13 @@ const DEMOS = [
 		code: 'progressbar/demos/height/progressbar-height.ts',
 		markup: 'progressbar/demos/height/progressbar-height.html',
 	},
+	{
+		fragment: 'stacked',
+		title: 'Progress bars stacked',
+		type: NgbdProgressbarStacked,
+		code: 'progressbar/demos/stacked/progressbar-stacked.ts',
+		markup: 'progressbar/demos/stacked/progressbar-stacked.html',
+	},
 	{
 		fragment: 'config',
 		title: 'Global configuration of progress bars',

src/index.ts

@@ -131,7 +131,12 @@ export {
 	NgbPaginationPages,
 } from './pagination/pagination.module';
 export { NgbPopover, NgbPopoverConfig, NgbPopoverModule } from './popover/popover.module';
-export { NgbProgressbar, NgbProgressbarConfig, NgbProgressbarModule } from './progressbar/progressbar.module';
+export {
+	NgbProgressbar,
+	NgbProgressbarConfig,
+	NgbProgressbarModule,
+	NgbProgressbarStacked,
+} from './progressbar/progressbar.module';
 export { NgbRating, NgbRatingConfig, NgbRatingModule } from './rating/rating.module';
 export {
 	NgbScrollSpy,

src/progressbar/progressbar.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 
-import { NgbProgressbar } from './progressbar';
+import { NgbProgressbar, NgbProgressbarStacked } from './progressbar';
 
-export { NgbProgressbar } from './progressbar';
+export { NgbProgressbar, NgbProgressbarStacked } from './progressbar';
 export { NgbProgressbarConfig } from './progressbar-config';
 
 @NgModule({
-	imports: [NgbProgressbar],
-	exports: [NgbProgressbar],
+	imports: [NgbProgressbar, NgbProgressbarStacked],
+	exports: [NgbProgressbar, NgbProgressbarStacked],
 })
 export class NgbProgressbarModule {}

src/progressbar/progressbar.spec.ts

@@ -3,7 +3,7 @@ import { createGenericTestComponent } from '../test/common';
 
 import { Component } from '@angular/core';
 
-import { NgbProgressbar } from './progressbar';
+import { NgbProgressbar, NgbProgressbarStacked } from './progressbar';
 import { NgbProgressbarConfig } from './progressbar-config';
 
 const createTestComponent = (html: string) =>
@@ -301,6 +301,15 @@ describe('ngb-progressbar', () => {
 
 			expect(getAriaLabel(fixture.nativeElement)).toBe('flupke');
 		});
+
+		it('should set width on progress when inside <ngb-progressbar-stacked>', () => {
+			const html =
+				'<ngb-progressbar-stacked><ngb-progressbar [value]="50"></ngb-progressbar></ngb-progressbar-stacked>';
+			const fixture = createTestComponent(html);
+
+			expect(getBarWidth(fixture.nativeElement)).toBe('');
+			expect(getProgress(fixture.nativeElement).style.width).toBe('50%');
+		});
 	});
 
 	describe('Custom config', () => {
@@ -356,7 +365,7 @@ describe('ngb-progressbar', () => {
 	});
 });
 
-@Component({ selector: 'test-cmp', standalone: true, imports: [NgbProgressbar], template: '' })
+@Component({ selector: 'test-cmp', standalone: true, imports: [NgbProgressbar, NgbProgressbarStacked], template: '' })
 class TestComponent {
 	value = 10;
 	max = 50;

src/progressbar/progressbar.ts

@@ -19,6 +19,7 @@ import { PercentPipe } from '@angular/common';
 		'aria-valuemin': '0',
 		'[attr.aria-valuemax]': 'max',
 		'[attr.aria-label]': 'ariaLabel',
+		'[style.width.%]': 'stacked ? getPercentValue() : null',
 	},
 	template: `
 		<div
@@ -27,7 +28,7 @@ import { PercentPipe } from '@angular/common';
 			}}"
 			[class.progress-bar-animated]="animated"
 			[class.progress-bar-striped]="striped"
-			[style.width.%]="getPercentValue()"
+			[style.width.%]="!stacked ? getPercentValue() : null"
 		>
 			@if (showValue) {
 				<span i18n="@@ngb.progressbar.value">{{ getValue() / max | percent }}</span>
@@ -38,6 +39,7 @@ import { PercentPipe } from '@angular/common';
 })
 export class NgbProgressbar {
 	private _config = inject(NgbProgressbarConfig);
+	public stacked = inject(NgbProgressbarStacked, { optional: true });
 	private _max: number;
 
 	/**
@@ -122,3 +124,20 @@ export class NgbProgressbar {
 		return (100 * this.getValue()) / this.max;
 	}
 }
+
+/**
+ * A directive that allow to stack progress bars.
+ *
+ * @since 16.0.0
+ */
+@Component({
+	selector: 'ngb-progressbar-stacked',
+	standalone: true,
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	encapsulation: ViewEncapsulation.None,
+	host: {
+		class: 'progress-stacked',
+	},
+	template: `<ng-content></ng-content>`,
+})
+export class NgbProgressbarStacked {}