feat: add ViewEncapsulation.None to the rest of components (#3535)

Previously it was added only to components with custom styles Fixes #3479
ng-bootstrap · Jan 9, 2020 · 5a5a8a7 · 5a5a8a7
1 parent 8574673
commit 5a5a8a7
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 20 deletions.
diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -9,7 +9,8 @@ import {
   Optional,
   Output,
   QueryList,
-  TemplateRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 
 import {isString} from '../util/util';
@@ -146,6 +147,7 @@ export interface NgbPanelChangeEvent {
 @Component({
   selector: 'ngb-accordion',
   exportAs: 'ngbAccordion',
+  encapsulation: ViewEncapsulation.None,
   host: {'class': 'accordion', 'role': 'tablist', '[attr.aria-multiselectable]': '!closeOtherPanels'},
   template: `
     <ng-template #t ngbPanelHeader let-panel>

diff --git a/src/carousel/carousel.ts b/src/carousel/carousel.ts
@@ -7,6 +7,7 @@ import {
   ContentChildren,
   Directive,
   EventEmitter,
+  HostListener,
   Inject,
   Input,
   NgZone,
@@ -15,14 +16,14 @@ import {
   PLATFORM_ID,
   QueryList,
   TemplateRef,
-  HostListener
+  ViewEncapsulation
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
 
 import {NgbCarouselConfig} from './carousel-config';
 
-import {Subject, timer, BehaviorSubject, combineLatest, NEVER} from 'rxjs';
-import {startWith, map, switchMap, takeUntil, distinctUntilChanged} from 'rxjs/operators';
+import {BehaviorSubject, combineLatest, NEVER, Subject, timer} from 'rxjs';
+import {distinctUntilChanged, map, startWith, switchMap, takeUntil} from 'rxjs/operators';
 
 let nextId = 0;
 
@@ -49,6 +50,7 @@ export class NgbSlide {
   selector: 'ngb-carousel',
   exportAs: 'ngbCarousel',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
   host: {
     'class': 'carousel slide',
     '[style.display]': '"block"',

diff --git a/src/modal/modal-backdrop.ts b/src/modal/modal-backdrop.ts
@@ -1,7 +1,8 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'ngb-modal-backdrop',
+  encapsulation: ViewEncapsulation.None,
   template: '',
   host:
       {'[class]': '"modal-backdrop fade show" + (backdropClass ? " " + backdropClass : "")', 'style': 'z-index: 1050'}

diff --git a/src/progressbar/progressbar.ts b/src/progressbar/progressbar.ts
@@ -1,4 +1,4 @@
-import {Component, Input, ChangeDetectionStrategy} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@angular/core';
 import {getValueInRange, isNumber} from '../util/util';
 import {NgbProgressbarConfig} from './progressbar-config';
 
@@ -8,6 +8,7 @@ import {NgbProgressbarConfig} from './progressbar-config';
 @Component({
   selector: 'ngb-progressbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
   template: `
     <div class="progress" [style.height]="height">
       <div class="progress-bar{{type ? ' bg-' + type : ''}}{{textType ? ' text-' + textType : ''}}

diff --git a/src/rating/rating.ts b/src/rating/rating.ts
@@ -1,16 +1,17 @@
 import {
-  Component,
   ChangeDetectionStrategy,
-  Input,
-  Output,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
   EventEmitter,
-  OnInit,
-  TemplateRef,
+  forwardRef,
+  Input,
   OnChanges,
+  OnInit,
+  Output,
   SimpleChanges,
-  ContentChild,
-  forwardRef,
-  ChangeDetectorRef
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import {NgbRatingConfig} from './rating-config';
 import {getValueInRange} from '../util/util';
@@ -44,6 +45,7 @@ const NGB_RATING_VALUE_ACCESSOR = {
 @Component({
   selector: 'ngb-rating',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
   host: {
     'class': 'd-inline-flex',
     'tabindex': '0',

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -1,13 +1,14 @@
 import {
+  AfterContentChecked,
   Component,
-  Input,
   ContentChildren,
-  QueryList,
   Directive,
-  TemplateRef,
-  AfterContentChecked,
+  EventEmitter,
+  Input,
   Output,
-  EventEmitter
+  QueryList,
+  TemplateRef,
+  ViewEncapsulation
 } from '@angular/core';
 import {NgbTabsetConfig} from './tabset-config';
 
@@ -97,6 +98,7 @@ export interface NgbTabChangeEvent {
 @Component({
   selector: 'ngb-tabset',
   exportAs: 'ngbTabset',
+  encapsulation: ViewEncapsulation.None,
   template: `
     <ul [class]="'nav nav-' + type + (orientation == 'horizontal'?  ' ' + justifyClass : ' flex-column')" role="tablist">
       <li class="nav-item" *ngFor="let tab of tabs">

diff --git a/src/typeahead/typeahead-window.ts b/src/typeahead/typeahead-window.ts
@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter, TemplateRef, OnInit} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewEncapsulation} from '@angular/core';
 
 import {toString} from '../util/util';
 
@@ -20,6 +20,7 @@ export interface ResultTemplateContext {
 @Component({
   selector: 'ngb-typeahead-window',
   exportAs: 'ngbTypeaheadWindow',
+  encapsulation: ViewEncapsulation.None,
   host: {'(mousedown)': '$event.preventDefault()', 'class': 'dropdown-menu show', 'role': 'listbox', '[id]': 'id'},
   template: `
     <ng-template #rt let-result="result" let-term="term" let-formatter="formatter">