fix(toggle): animation in IE11 (#2062)

src/framework/theme/components/toggle/_toggle.component.theme.scss

@@ -14,6 +14,29 @@
  border-radius: nb-theme(toggle-border-radius);
  cursor: nb-theme(toggle-cursor);
 
+ /*
+ We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value.
+ Setting it in SCSS as we don't have access to theme variables from TS.
+ */
+ @include nb-ltr() {
+ &.checked .toggle-switcher {
+ left: calc(100% - #{nb-theme(toggle-switcher-size)} - #{nb-theme(toggle-border-width)});
+ }
+
+ &:not(.checked) .toggle-switcher {
+ right: 0;
+ }
+ }
+
+ @include nb-rtl() {
+ &.checked .toggle-switcher {
+ right: calc(100% - #{nb-theme(toggle-switcher-size)} - #{nb-theme(toggle-border-width)});
+ }
+
+ &:not(.checked) .toggle-switcher {
+ left: 0;
+ }
+ }
  }
 
  .native-input:enabled:focus + .toggle {

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

@@ -20,7 +20,7 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { NbLayoutDirectionService, NbLayoutDirection } from '../../services/direction.service';
+import { NbLayoutDirectionService } from '../../services/direction.service';
 import { NbComponentStatus } from '../component-status';
 
 import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
@@ -253,11 +253,11 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
 @Component({
  selector: 'nb-toggle',
  animations: [
- trigger('onOff', [
- state('ltrOn', style({ right: 0 })),
- state('rtlOn', style({ left: 0 })),
+ trigger('position', [
+ state('right', style({ right: 0, left: '*' })),
+ state('left', style({ left: 0, right: '*' })),
  transition(':enter', [animate(0)]),
- transition('* <=> *', [animate('0.15s')]),
+ transition('right <=> left', [animate('0.15s')]),
  ]),
  ],
  template: `
@@ -272,7 +272,7 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
  (blur)="onTouched()"
  (click)="onInputClick($event)">
  <div class="toggle" [class.checked]="checked">
- <span [@onOff]="checkState()" class="toggle-switcher">
+ <span [@position]="checkState()" class="toggle-switcher">
  <nb-icon *ngIf="checked" icon="checkmark-bold-outline" pack="nebular-essentials"></nb-icon>
  </span>
  </div>
@@ -423,12 +423,10 @@ export class NbToggleComponent implements OnInit, OnDestroy, ControlValueAccesso
 
  checkState(): string {
  if (this.checked) {
- if (this.layoutDirection.getDirection() === NbLayoutDirection.LTR) {
- return 'ltrOn';
- } else {
- return 'rtlOn';
- }
+ return this.layoutDirection.isLtr() ? 'right' : 'left';
  }
+
+ return this.layoutDirection.isLtr() ? 'left' : 'right';
  }
 
  registerOnChange(fn: any) {

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

@@ -5,7 +5,7 @@ import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NbLayoutDirectionService } from '../../services/direction.service';
+import { NbLayoutDirectionService, NbLayoutDirection } from '../../services/direction.service';
 
 
 describe('Component: NbToggle', () => {
@@ -80,6 +80,39 @@ describe('Component: NbToggle', () => {
  fixture.detectChanges();
  expect(testContainerEl.classList.contains('status-info')).toBeTruthy();
  });
+
+ describe('state animation', () => {
+
+ beforeEach(() => {
+ TestBed.get(NbLayoutDirectionService).setDirection(NbLayoutDirection.LTR);
+ });
+
+ afterAll(() => {
+ TestBed.get(NbLayoutDirectionService).setDirection(NbLayoutDirection.LTR);
+ });
+
+ it(`should has 'left' position when unchecked in LTR`, () => {
+ expect(toggle.checkState()).toEqual('left');
+ });
+
+ it(`should has 'right' position when checked in LTR`, () => {
+ toggle.checked = true;
+ expect(toggle.checkState()).toEqual('right');
+ });
+
+ it(`should has 'right' position when unchecked in RTL`, () => {
+ const directionService: NbLayoutDirectionService = TestBed.get(NbLayoutDirectionService);
+ directionService.setDirection(NbLayoutDirection.RTL);
+ expect(toggle.checkState()).toEqual('right');
+ });
+
+ it(`should has 'left' position when checked in RTL`, () => {
+ const directionService: NbLayoutDirectionService = TestBed.get(NbLayoutDirectionService);
+ directionService.setDirection(NbLayoutDirection.RTL);
+ toggle.checked = true;
+ expect(toggle.checkState()).toEqual('left');
+ });
+ });
 });
 
 // Test component with reactive forms