fix(theme): prevent transition to initial status (#2256)

src/framework/theme/components/button/button.component.scss

@@ -29,6 +29,6 @@
   }
 }
 
-:host(.transitions) {
+:host(.nb-transition) {
   @include nb-component-animation(background-color, border-color, box-shadow, color);
 }

src/framework/theme/components/button/button.component.ts

@@ -14,6 +14,7 @@ import {
   HostListener,
   Input,
   Renderer2,
+  NgZone,
 } from '@angular/core';
 
 import { NbComponentStatus } from '../component-status';
@@ -537,8 +538,6 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
 })
 export class NbButtonComponent implements AfterViewInit {
 
-  protected isInitialized: boolean = false;
-
   /**
    * Button size, available sizes:
    * `tiny`, `small`, `medium`, `large`, `giant`
@@ -740,11 +739,6 @@ export class NbButtonComponent implements AfterViewInit {
     return !!(icon && lastChildNotComment(el) === icon);
   }
 
-  @HostBinding('class.transitions')
-  get transitions(): boolean {
-    return this.isInitialized;
-  }
-
   /**
    * @private
    * Keep this handler to partially support anchor disabling.
@@ -767,13 +761,14 @@ export class NbButtonComponent implements AfterViewInit {
     protected renderer: Renderer2,
     protected hostElement: ElementRef<HTMLElement>,
     protected cd: ChangeDetectorRef,
+    protected zone: NgZone,
   ) {}
 
   ngAfterViewInit() {
-    setTimeout(() => {
-      this.isInitialized = true;
-      this.cd.markForCheck();
-    });
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.hostElement.nativeElement, 'nb-transition');
+    }));
   }
 
   protected get iconElement() {

src/framework/theme/components/checkbox/checkbox.component.scss

@@ -11,10 +11,14 @@
 
   .custom-checkbox {
     flex-shrink: 0;
-    @include nb-component-animation(background-color, border, box-shadow);
   }
+}
 
+:host(.nb-transition) {
+  .custom-checkbox {
+    @include nb-component-animation(background-color, border, box-shadow);
+  }
   .text {
-    transition: color 0.15s ease-in;
+    @include nb-component-animation(color);
   }
 }

src/framework/theme/components/checkbox/checkbox.component.ts

@@ -13,6 +13,10 @@ import {
   Output,
   EventEmitter,
   ChangeDetectionStrategy,
+  Renderer2,
+  ElementRef,
+  AfterViewInit,
+  NgZone,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -274,7 +278,7 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
   }],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NbCheckboxComponent implements ControlValueAccessor {
+export class NbCheckboxComponent implements AfterViewInit, ControlValueAccessor {
 
   onChange: any = () => { };
   onTouched: any = () => { };
@@ -405,7 +409,19 @@ export class NbCheckboxComponent implements ControlValueAccessor {
     return this.status === 'control';
   }
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
+  constructor(
+    private changeDetector: ChangeDetectorRef,
+    private renderer: Renderer2,
+    private hostElement: ElementRef<HTMLElement>,
+    private zone: NgZone,
+  ) {}
+
+  ngAfterViewInit() {
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.hostElement.nativeElement, 'nb-transition');
+    }));
+  }
 
   registerOnChange(fn: any) {
     this.onChange = fn;

src/framework/theme/components/form-field/_form-field.component.theme.scss

@@ -10,13 +10,16 @@
     justify-content: center;
     align-items: center;
     z-index: 1;
-    @include nb-component-animation(color);
 
     &-disabled {
       color: nb-theme(form-field-addon-disabled-text-color);
     }
   }
 
+  nb-form-field.nb-transition .nb-form-field-addon {
+    @include nb-component-animation(color);
+  }
+
   @each $status in nb-get-statuses() {
     .nb-form-field-addon-#{$status} {
       color: nb-theme(form-field-addon-#{$status}-text-color);

src/framework/theme/components/form-field/form-field.component.html

@@ -2,7 +2,7 @@
   <ng-content select="[nbPrefix]"></ng-content>
 </div>
 
-<div class="form-control"
+<div class="nb-form-control-container"
      [class.nb-form-field-control-with-prefix]="shouldShowPrefix()"
      [class.nb-form-field-control-with-suffix]="shouldShowSuffix()">
   <ng-content></ng-content>

src/framework/theme/components/form-field/form-field.component.scss

@@ -9,6 +9,6 @@
   align-items: center;
 }
 
-.form-control {
+.nb-form-control-container {
   width: 100%;
 }

src/framework/theme/components/form-field/form-field.component.ts

@@ -14,6 +14,10 @@ import {
   QueryList,
   AfterContentInit,
   OnDestroy,
+  NgZone,
+  ElementRef,
+  Renderer2,
+  AfterViewInit,
 } from '@angular/core';
 import { merge, Subject, Observable, combineLatest, ReplaySubject } from 'rxjs';
 import { takeUntil, distinctUntilChanged, map } from 'rxjs/operators';
@@ -85,7 +89,7 @@ function throwFormControlElementNotFound() {
   templateUrl: './form-field.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NbFormFieldComponent implements AfterContentChecked, AfterContentInit, OnDestroy {
+export class NbFormFieldComponent implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
 
   protected readonly destroy$ = new Subject<void>();
 
@@ -99,7 +103,12 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
   @ContentChild(NbFormFieldControl, { static: false }) formControl: NbFormFieldControl;
   @ContentChild(NbFormFieldControlConfig, { static: false }) formControlConfig: NbFormFieldControlConfig;
 
-  constructor(protected cd: ChangeDetectorRef) {
+  constructor(
+    protected cd: ChangeDetectorRef,
+    protected zone: NgZone,
+    protected elementRef: ElementRef,
+    protected renderer: Renderer2,
+  ) {
   }
 
   ngAfterContentChecked() {
@@ -113,6 +122,13 @@ export class NbFormFieldComponent implements AfterContentChecked, AfterContentIn
     this.subscribeToAddonChange();
   }
 
+  ngAfterViewInit() {
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
+    }));
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
   }

src/framework/theme/components/input/_input.directive.theme.scss

@@ -16,7 +16,9 @@
     font-family: nb-theme(input-text-font-family);
     -webkit-appearance: none; // removes inner shadow on iOS
 
-    @include nb-component-animation(border, background-color, color, box-shadow);
+    &.nb-transition {
+      @include nb-component-animation(border, background-color, color, box-shadow);
+    }
 
     &::placeholder {
       font-family: nb-theme(input-placeholder-text-font-family);

src/framework/theme/components/input/input.directive.ts

@@ -14,6 +14,9 @@ import {
   SimpleChanges,
   OnChanges,
   DoCheck,
+  AfterViewInit,
+  Renderer2,
+  NgZone,
 } from '@angular/core';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { map, finalize, takeUntil } from 'rxjs/operators';
@@ -218,7 +221,7 @@ import { NbFocusMonitor } from '../cdk/a11y/a11y.module';
     { provide: NbFormFieldControl, useExisting: NbInputDirective },
   ],
 })
-export class NbInputDirective implements DoCheck, OnChanges, OnInit, OnDestroy, NbFormFieldControl {
+export class NbInputDirective implements DoCheck, OnChanges, OnInit, AfterViewInit, OnDestroy, NbFormFieldControl {
 
   protected destroy$ = new Subject<void>();
 
@@ -268,6 +271,8 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, OnDestroy,
   constructor(
     protected elementRef: ElementRef<HTMLInputElement | HTMLTextAreaElement>,
     protected focusMonitor: NbFocusMonitor,
+    protected renderer: Renderer2,
+    protected zone: NgZone,
   ) {
   }
 
@@ -297,6 +302,13 @@ export class NbInputDirective implements DoCheck, OnChanges, OnInit, OnDestroy,
       .subscribe(this.focused$);
   }
 
+  ngAfterViewInit() {
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
+    }));
+  }
+
   ngOnDestroy() {
     this.destroy$.next();
   }

src/framework/theme/components/option/option.component.scss

@@ -8,7 +8,6 @@
 
 :host {
   display: flex;
-  @include nb-component-animation(background-color, color);
 
   &:hover {
     cursor: pointer;
@@ -30,3 +29,7 @@
   pointer-events: none;
 }
 
+:host(.nb-transition) {
+  @include nb-component-animation(background-color, color);
+}
+

src/framework/theme/components/option/option.component.ts

@@ -17,6 +17,9 @@ import {
   OnDestroy,
   Optional,
   Output,
+  AfterViewInit,
+  NgZone,
+  Renderer2,
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
@@ -87,7 +90,7 @@ import { NbSelectComponent } from '../select/select.component';
     <ng-content></ng-content>
   `,
 })
-export class NbOptionComponent<T> implements OnDestroy, NbFocusableOption, NbHighlightableOption {
+export class NbOptionComponent<T> implements OnDestroy, AfterViewInit, NbFocusableOption, NbHighlightableOption {
 
   protected disabledByGroup = false;
 
@@ -130,14 +133,23 @@ export class NbOptionComponent<T> implements OnDestroy, NbFocusableOption, NbHig
 
   constructor(@Optional() @Inject(NB_SELECT_INJECTION_TOKEN) parent,
               protected elementRef: ElementRef,
-              protected cd: ChangeDetectorRef) {
+              protected cd: ChangeDetectorRef,
+              protected zone: NgZone,
+              protected renderer: Renderer2) {
     this.parent = parent;
   }
 
   ngOnDestroy() {
     this.alive = false;
   }
 
+  ngAfterViewInit() {
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.elementRef.nativeElement, 'nb-transition');
+    }));
+  }
+
   /**
    * Determines should we render checkbox.
    * */

src/framework/theme/components/select/select.component.scss

@@ -28,15 +28,19 @@
   width: 100%;
 }
 
+:host(.nb-transition) {
+  .select-button {
+    @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color);
+  }
+}
+
 .select-button {
   position: relative;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   text-transform: none;
   white-space: nowrap;
-
-  @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color);
 }
 
 nb-icon {

src/framework/theme/components/select/select.component.ts

@@ -25,6 +25,8 @@ import {
   ViewChild,
   SimpleChanges,
   OnChanges,
+  Renderer2,
+  NgZone,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { merge, Subject, BehaviorSubject } from 'rxjs';
@@ -722,7 +724,9 @@ export class NbSelectComponent<T> implements OnChanges, AfterViewInit, AfterCont
               protected triggerStrategyBuilder: NbTriggerStrategyBuilderService,
               protected cd: ChangeDetectorRef,
               protected focusKeyManagerFactoryService: NbFocusKeyManagerFactoryService<NbOptionComponent<T>>,
-              protected focusMonitor: NbFocusMonitor) {
+              protected focusMonitor: NbFocusMonitor,
+              protected renderer: Renderer2,
+              protected zone: NgZone) {
   }
 
   /**
@@ -802,6 +806,11 @@ export class NbSelectComponent<T> implements OnChanges, AfterViewInit, AfterCont
     this.subscribeOnButtonFocus();
     this.subscribeOnTriggers();
     this.subscribeOnOptionClick();
+
+    // TODO: #2254
+    this.zone.runOutsideAngular(() => setTimeout(() => {
+      this.renderer.addClass(this.hostRef.nativeElement, 'nb-transition');
+    }));
   }
 
   ngOnDestroy() {

src/framework/theme/components/select/select.spec.ts

@@ -602,7 +602,7 @@ describe('Component: NbSelectComponent', () => {
   }));
 
   it(`should not call dispose on uninitialized resources`, () => {
-    const selectFixture = new NbSelectComponent(null, null, null, null, null, null, null, null);
+    const selectFixture = new NbSelectComponent(null, null, null, null, null, null, null, null, null, null);
     expect(() => selectFixture.ngOnDestroy()).not.toThrow();
   });
 
@@ -671,12 +671,12 @@ describe('Component: NbSelectComponent', () => {
     const touchedSpy = jasmine.createSpy('touched spy');
 
     const selectFixture = TestBed.createComponent(NbSelectComponent);
-    const selectComponent: NbSelectComponent<any> = selectFixture.componentInstance;
+    select = selectFixture.componentInstance as NbSelectComponent<any>;
     selectFixture.detectChanges();
     flush();
 
-    selectComponent.registerOnTouched(touchedSpy);
-    selectComponent.show();
+    select.registerOnTouched(touchedSpy);
+    select.show();
     selectFixture.debugElement.query(By.css('.select-button')).triggerEventHandler('blur', {});
     expect(touchedSpy).not.toHaveBeenCalled();
   }));
@@ -842,9 +842,8 @@ describe('NbSelectComponent - Triggers', () => {
       trigger() { return this },
       host() { return this },
       container() { return this },
-      destroy() {},
       build() {
-        return { show$: showTriggerStub, hide$: hideTriggerStub };
+        return { show$: showTriggerStub, hide$: hideTriggerStub, destroy() {} };
       },
     };