Skip to content

Resolve issue with BrowserAnimationsModule import #88

Merged
merged 4 commits into from
Jan 30, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/lib-dev/tabs/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { FormsModule, FormControl } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Observable, Observer } from 'rxjs';

import { McCheckboxModule } from '../../lib/checkbox';
Expand Down Expand Up @@ -83,6 +84,7 @@ export class TabsDemoComponent {
],
imports: [
BrowserModule,
BrowserAnimationsModule,
McFormFieldModule,
McIconModule,
McCheckboxModule,
Expand Down
2 changes: 2 additions & 0 deletions src/lib-dev/toggle/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { McButtonModule } from '../../lib/button/';
import { McToggleModule } from '../../lib/toggle/';
Expand Down Expand Up @@ -31,6 +32,7 @@ export class DemoComponent {
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
McToggleModule,
McButtonModule
Expand Down
90 changes: 45 additions & 45 deletions src/lib/tabs/tab-body.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,51 +47,6 @@ export type McTabBodyPositionState =
*/
export type McTabBodyOriginState = 'left' | 'right';

/**
* The portal host directive for the contents of the tab.
* @docs-private
*/
@Directive({
selector: '[mcTabBodyHost]'
})
export class McTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
/** Subscription to events for when the tab body begins centering. */
private centeringSub = Subscription.EMPTY;
/** Subscription to events for when the tab body finishes leaving from center position. */
private leavingSub = Subscription.EMPTY;

constructor(
componentFactoryResolver: ComponentFactoryResolver,
viewContainerRef: ViewContainerRef,
@Inject(forwardRef(() => McTabBody)) private host: McTabBody) {
super(componentFactoryResolver, viewContainerRef);
}

/** Set initial visibility or set up subscription for changing visibility. */
ngOnInit(): void {
super.ngOnInit();

this.centeringSub = this.host.beforeCentering
.pipe(startWith(this.host.isCenterPosition(this.host.bodyPosition)))
.subscribe((isCentering: boolean) => {
if (isCentering && !this.hasAttached()) {
this.attach(this.host.content);
}
});

this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
this.detach();
});
}

/** Clean up centering subscription. */
ngOnDestroy(): void {
super.ngOnDestroy();
this.centeringSub.unsubscribe();
this.leavingSub.unsubscribe();
}
}

/**
* Wrapper for the contents of a tab.
* @docs-private
Expand Down Expand Up @@ -233,3 +188,48 @@ export class McTabBody implements OnInit, OnDestroy {
return 'right-origin-center';
}
}

/**
* The portal host directive for the contents of the tab.
* @docs-private
*/
@Directive({
selector: '[mcTabBodyHost]'
})
export class McTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
pimenovoleg marked this conversation as resolved.
Show resolved Hide resolved
/** Subscription to events for when the tab body begins centering. */
private centeringSub = Subscription.EMPTY;
/** Subscription to events for when the tab body finishes leaving from center position. */
private leavingSub = Subscription.EMPTY;

constructor(
componentFactoryResolver: ComponentFactoryResolver,
viewContainerRef: ViewContainerRef,
@Inject(forwardRef(() => McTabBody)) private host: McTabBody) {
super(componentFactoryResolver, viewContainerRef);
}

/** Set initial visibility or set up subscription for changing visibility. */
ngOnInit(): void {
super.ngOnInit();

this.centeringSub = this.host.beforeCentering
.pipe(startWith(this.host.isCenterPosition(this.host.bodyPosition)))
.subscribe((isCentering: boolean) => {
if (isCentering && !this.hasAttached()) {
this.attach(this.host.content);
}
});

this.leavingSub = this.host.afterLeavingCenter.subscribe(() => {
this.detach();
});
}

/** Clean up centering subscription. */
ngOnDestroy(): void {
super.ngOnDestroy();
this.centeringSub.unsubscribe();
this.leavingSub.unsubscribe();
}
}
4 changes: 1 addition & 3 deletions src/lib/tabs/tabs.module.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { A11yModule } from '@ptsecurity/cdk/a11y';
import { PortalModule } from '@ptsecurity/cdk/portal';
import { McCommonModule } from '@ptsecurity/mosaic/core';
Expand All @@ -26,8 +25,7 @@ import { McTabLink, McTabNav } from './tab-nav-bar/tab-nav-bar';
CommonModule,
McCommonModule,
PortalModule,
A11yModule,
BrowserAnimationsModule
A11yModule
],
// Don't export all components because some are only to be used internally.
exports: [
Expand Down
3 changes: 2 additions & 1 deletion src/lib/toggle/toggle.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, flush } from '@angular/core/testing';
import { FormControl, FormsModule, NgModel, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { McToggleComponent, McToggleModule } from './index';

Expand All @@ -13,7 +14,7 @@ describe('McToggle', () => {

beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [McToggleModule, FormsModule, ReactiveFormsModule],
imports: [NoopAnimationsModule, McToggleModule, FormsModule, ReactiveFormsModule],
declarations: [
SingleToggle,
ToggleWithFormDirectives,
Expand Down
3 changes: 1 addition & 2 deletions src/lib/toggle/toggle.module.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { A11yModule } from '@ptsecurity/cdk/a11y';
import { McCommonModule } from '@ptsecurity/mosaic/core';

import { McToggleComponent } from './toggle.component';


@NgModule({
imports: [CommonModule, BrowserAnimationsModule, A11yModule, McCommonModule],
imports: [CommonModule, A11yModule, McCommonModule],
exports: [McToggleComponent],
declarations: [McToggleComponent]
})
Expand Down