reafactor(progressbar): remove intermediate div element (#3841)

Co-authored-by: zVolodymyr <volodymyr.baydalka@gmail.com> BREAKING CHANGE: markup generated by `<ngb-progressbar>` was simplified, there is no more intermediate `<div>` element Before: ``` <ngb-progressbar type="success"> <div class="progress"> <div role="progressbar"></div> </div> </ngb-progressbar> ``` After: ``` <ngb-progressbar type="success" class="progress"> <div role="progressbar"></div> </ngb-progressbar> ```
ng-bootstrap · Nov 3, 2020 · 89ec4fe · 89ec4fe
1 parent 8706692
commit 89ec4fe
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 33 deletions.
diff --git a/demo/src/app/components/progressbar/demos/basic/progressbar-basic.ts b/demo/src/app/components/progressbar/demos/basic/progressbar-basic.ts
@@ -2,12 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngbd-progressbar-basic',
-  templateUrl: './progressbar-basic.html',
-  styles: [`
-    ngb-progressbar {
-      margin-top: 5rem;
-    }
-  `]
+  templateUrl: './progressbar-basic.html'
 })
 export class NgbdProgressbarBasic {
 }
diff --git a/demo/src/app/components/progressbar/demos/height/progressbar-height.ts b/demo/src/app/components/progressbar/demos/height/progressbar-height.ts
@@ -2,12 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngbd-progressbar-height',
-  templateUrl: './progressbar-height.html',
-  styles: [`
-    ngb-progressbar {
-      margin-top: 5rem;
-    }
-  `]
+  templateUrl: './progressbar-height.html'
 })
 export class NgbdProgressbarHeight {
   height = '20px';

diff --git a/demo/src/app/components/progressbar/demos/labels/progressbar-labels.ts b/demo/src/app/components/progressbar/demos/labels/progressbar-labels.ts
@@ -2,12 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngbd-progressbar-labels',
-  templateUrl: './progressbar-labels.html',
-  styles: [`
-    ngb-progressbar {
-      margin-top: 5rem;
-    }
-  `]
+  templateUrl: './progressbar-labels.html'
 })
 export class NgbdProgressbarLabels {
 }
diff --git a/demo/src/app/components/progressbar/demos/showvalue/progressbar-showvalue.ts b/demo/src/app/components/progressbar/demos/showvalue/progressbar-showvalue.ts
@@ -2,12 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngbd-progressbar-showvalue',
-  templateUrl: './progressbar-showvalue.html',
-  styles: [`
-    ngb-progressbar {
-      margin-top: 5rem;
-    }
-  `]
+  templateUrl: './progressbar-showvalue.html'
 })
 export class NgbdProgressbarShowvalue {
 }
diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation, HostBinding} from '@angular/core';
 import {getValueInRange, isNumber} from '../util/util';
 import {NgbProgressbarConfig} from './progressbar-config';
 
@@ -9,14 +9,13 @@ import {NgbProgressbarConfig} from './progressbar-config';
   selector: 'ngb-progressbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  host: {class: 'progress'},
   template: `
-    <div class="progress" [style.height]="height">
-      <div class="progress-bar{{type ? ' bg-' + type : ''}}{{textType ? ' text-' + textType : ''}}
-      {{animated ? ' progress-bar-animated' : ''}}{{striped ? ' progress-bar-striped' : ''}}"
-      role="progressbar" [style.width.%]="getPercentValue()"
-      [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
-        <span *ngIf="showValue" i18n="@@ngb.progressbar.value">{{getValue() / max | percent}}</span><ng-content></ng-content>
-      </div>
+    <div class="progress-bar{{type ? ' bg-' + type : ''}}{{textType ? ' text-' + textType : ''}}
+    {{animated ? ' progress-bar-animated' : ''}}{{striped ? ' progress-bar-striped' : ''}}"
+    role="progressbar" [style.width.%]="getPercentValue()"
+    [attr.aria-valuenow]="getValue()" aria-valuemin="0" [attr.aria-valuemax]="max">
+      <span *ngIf="showValue" i18n="@@ngb.progressbar.value">{{getValue() / max | percent}}</span><ng-content></ng-content>
     </div>
   `
 })
@@ -82,7 +81,7 @@ export class NgbProgressbar {
    *
    * Accepts any valid CSS height values, ex. `"2rem"`
    */
-  @Input() height: string;
+  @Input() @HostBinding('style.height') height: string;
 
   constructor(config: NgbProgressbarConfig) {
     this.max = config.max;