diff --git a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts index 4c74495..c5142f2 100644 --- a/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts +++ b/libs/fabric/src/lib/components/breadcrumb/breadcrumb.component.ts @@ -2,7 +2,16 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + Input, + OnInit, + Renderer2, + ViewChild, +} from '@angular/core'; import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Breadcrumb'; @Component({ @@ -22,8 +31,7 @@ import { IBreadcrumbItem, IBreadcrumbProps } from 'office-ui-fabric-react/lib/Br [styles]="styles" [theme]="theme" [RenderItem]="renderItem && onRenderItem" - [ReduceData]="onReduceData" - > + [ReduceData]="onReduceData"> `, styles: ['react-renderer'], diff --git a/libs/fabric/src/lib/components/button/action-button.component.ts b/libs/fabric/src/lib/components/button/action-button.component.ts index d55ad5e..ed8802b 100644 --- a/libs/fabric/src/lib/components/button/action-button.component.ts +++ b/libs/fabric/src/lib/components/button/action-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabActionButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/base-button.component.ts b/libs/fabric/src/lib/components/button/base-button.component.ts index e845994..2805f4c 100644 --- a/libs/fabric/src/lib/components/button/base-button.component.ts +++ b/libs/fabric/src/lib/components/button/base-button.component.ts @@ -2,7 +2,7 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core'; +import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core'; import { IButtonProps } from 'office-ui-fabric-react/lib/Button'; export abstract class FabBaseButtonComponent extends ReactWrapperComponent implements OnInit { @@ -90,8 +90,8 @@ export abstract class FabBaseButtonComponent extends ReactWrapperComponent) => JSX.Element; onRenderMenuIcon: (props?: IButtonProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true }); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onMenuClickHandler = this.onMenuClickHandler.bind(this); diff --git a/libs/fabric/src/lib/components/button/command-bar-button.component.ts b/libs/fabric/src/lib/components/button/command-bar-button.component.ts index 98bdfb5..c2fb0d7 100644 --- a/libs/fabric/src/lib/components/button/command-bar-button.component.ts +++ b/libs/fabric/src/lib/components/button/command-bar-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabCommandBarButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/compound-button.component.ts b/libs/fabric/src/lib/components/button/compound-button.component.ts index 0c14018..bf90c9e 100644 --- a/libs/fabric/src/lib/components/button/compound-button.component.ts +++ b/libs/fabric/src/lib/components/button/compound-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabCompoundButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/default-button.component.ts b/libs/fabric/src/lib/components/button/default-button.component.ts index bebf589..40f9194 100644 --- a/libs/fabric/src/lib/components/button/default-button.component.ts +++ b/libs/fabric/src/lib/components/button/default-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabDefaultButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/icon-button.component.ts b/libs/fabric/src/lib/components/button/icon-button.component.ts index 104dfa4..e48c5f6 100644 --- a/libs/fabric/src/lib/components/button/icon-button.component.ts +++ b/libs/fabric/src/lib/components/button/icon-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabIconButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/messagebar-button.component.ts b/libs/fabric/src/lib/components/button/messagebar-button.component.ts index 5ea20d0..6bb2a22 100644 --- a/libs/fabric/src/lib/components/button/messagebar-button.component.ts +++ b/libs/fabric/src/lib/components/button/messagebar-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabMessageBarButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/primary-button.component.ts b/libs/fabric/src/lib/components/button/primary-button.component.ts index b4ef2d2..0db6cd2 100644 --- a/libs/fabric/src/lib/components/button/primary-button.component.ts +++ b/libs/fabric/src/lib/components/button/primary-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabPrimaryButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/button/split-button.component.ts b/libs/fabric/src/lib/components/button/split-button.component.ts index cf22d6b..b65c584 100644 --- a/libs/fabric/src/lib/components/button/split-button.component.ts +++ b/libs/fabric/src/lib/components/button/split-button.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseButtonComponent } from './base-button.component'; @Component({ @@ -57,7 +65,7 @@ export class FabSplitButtonComponent extends FabBaseButtonComponent { @ViewChild('reactNode') reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts index f824fc5..ab19296 100644 --- a/libs/fabric/src/lib/components/checkbox/checkbox.component.ts +++ b/libs/fabric/src/lib/components/checkbox/checkbox.component.ts @@ -2,7 +2,19 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output, + Renderer2, + ViewChild, +} from '@angular/core'; import { ICheckboxProps } from 'office-ui-fabric-react/lib/Checkbox'; import { FormEvent } from 'react'; @@ -88,8 +100,8 @@ export class FabCheckboxComponent extends ReactWrapperComponent onRenderLabel: (props?: ICheckboxProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone }); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onChangeHandler = this.onChangeHandler.bind(this); diff --git a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts index 418f77c..f48c098 100644 --- a/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/base-combo-box.component.ts @@ -2,7 +2,7 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectorRef, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2 } from '@angular/core'; +import { ChangeDetectorRef, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, Renderer2 } from '@angular/core'; import { IComboBox, IComboBoxOption, IComboBoxProps } from 'office-ui-fabric-react/lib/ComboBox'; export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent implements OnInit { @@ -64,8 +64,8 @@ export abstract class FabBaseComboBoxComponent extends ReactWrapperComponent) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone }); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onChangeHandler = this.onChangeHandler.bind(this); diff --git a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts index 401c599..e9ea7d8 100644 --- a/libs/fabric/src/lib/components/combo-box/combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/combo-box.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseComboBoxComponent } from './base-combo-box.component'; @Component({ @@ -43,7 +51,7 @@ export class FabComboBoxComponent extends FabBaseComboBoxComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts index a91ee3d..fe2d444 100644 --- a/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts +++ b/libs/fabric/src/lib/components/combo-box/virtualized-combo-box.component.ts @@ -1,7 +1,15 @@ // Copyright (c) Microsoft Corporation. All rights reserved. // Licensed under the MIT License. -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + NgZone, + Renderer2, + ViewChild, +} from '@angular/core'; import { FabBaseComboBoxComponent } from './base-combo-box.component'; @Component({ @@ -43,7 +51,7 @@ export class FabVirtualizedComboBoxComponent extends FabBaseComboBoxComponent { @ViewChild('reactNode') protected reactNodeRef: ElementRef; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } } diff --git a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts index ec4f364..fd63ea0 100644 --- a/libs/fabric/src/lib/components/command-bar/command-bar.component.ts +++ b/libs/fabric/src/lib/components/command-bar/command-bar.component.ts @@ -11,6 +11,7 @@ import { ElementRef, EventEmitter, Input, + NgZone, OnDestroy, Output, QueryList, @@ -114,8 +115,8 @@ export class FabCommandBarComponent extends ReactWrapperComponent) { diff --git a/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts b/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts index af64b66..d699b62 100644 --- a/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts +++ b/libs/fabric/src/lib/components/command-bar/directives/command-bar-items.directives.ts @@ -2,17 +2,17 @@ // Licensed under the MIT License. import { - Directive, - ContentChildren, - QueryList, - OnDestroy, AfterContentInit, - Output, + ContentChildren, + Directive, EventEmitter, + OnDestroy, + Output, + QueryList, } from '@angular/core'; -import { ICommandBarItemOptions } from '../command-bar.component'; import { Subscription } from 'rxjs'; -import { CommandBarItemDirective, CommandBarItemChangedPayload } from './command-bar-item.directives'; +import { ICommandBarItemOptions } from '../command-bar.component'; +import { CommandBarItemChangedPayload, CommandBarItemDirective } from './command-bar-item.directives'; export abstract class CommandBarItemsDirectiveBase implements AfterContentInit, OnDestroy { private readonly _subscriptions: Subscription[] = []; diff --git a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts index 1ab6caa..ed1f6f0 100644 --- a/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts +++ b/libs/fabric/src/lib/components/grouped-list/grouped-list.component.ts @@ -2,7 +2,19 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output, + Renderer2, + ViewChild, +} from '@angular/core'; import { IGroupedListProps, IGroupRenderProps } from 'office-ui-fabric-react/lib/GroupedList'; import { IListProps } from 'office-ui-fabric-react/lib/List'; @@ -75,8 +87,8 @@ export class FabGroupedListComponent extends ReactWrapperComponent; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone }); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onRenderCell = this.onRenderCell.bind(this); diff --git a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts index b913589..d038124 100644 --- a/libs/fabric/src/lib/components/hover-card/hover-card.component.ts +++ b/libs/fabric/src/lib/components/hover-card/hover-card.component.ts @@ -2,7 +2,18 @@ // Licensed under the MIT License. import { InputRendererOptions, Omit, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + Output, + Renderer2, + ViewChild, +} from '@angular/core'; import { IExpandingCardProps, IHoverCardProps } from 'office-ui-fabric-react/lib/HoverCard'; import { omit } from '../../utils/omit'; @@ -84,8 +95,8 @@ export class FabHoverCardComponent extends ReactWrapperComponent { styles?: IIconProps['styles']; constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer, true); + super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true }); } } diff --git a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts index 34939fd..5c98bc8 100644 --- a/libs/fabric/src/lib/components/message-bar/message-bar.component.ts +++ b/libs/fabric/src/lib/components/message-bar/message-bar.component.ts @@ -2,7 +2,19 @@ // Licensed under the MIT License. import { InputRendererOptions, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output, + Renderer2, + ViewChild, +} from '@angular/core'; import { IMessageBarProps } from 'office-ui-fabric-react/lib/MessageBar'; @Component({ @@ -66,8 +78,8 @@ export class FabMessageBarComponent extends ReactWrapperComponent implem onRenderFooter: (props?: IPanelProps, defaultRender?: JsxRenderFunc) => JSX.Element; onRenderFooterContent: (props?: IPanelProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone }); // coming from React context - we need to bind to this so we can access the Angular Component properties this.onRenderHeader = this.onRenderHeader.bind(this); diff --git a/libs/fabric/src/lib/components/persona/persona.component.ts b/libs/fabric/src/lib/components/persona/persona.component.ts index 4229a81..6db5031 100644 --- a/libs/fabric/src/lib/components/persona/persona.component.ts +++ b/libs/fabric/src/lib/components/persona/persona.component.ts @@ -2,7 +2,19 @@ // Licensed under the MIT License. import { InputRendererOptions, JsxRenderFunc, ReactWrapperComponent } from '@angular-react/core'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild } from '@angular/core'; +import { + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + ElementRef, + EventEmitter, + Input, + NgZone, + OnInit, + Output, + Renderer2, + ViewChild, +} from '@angular/core'; import { ImageLoadState } from 'office-ui-fabric-react/lib/components/Image/Image.types'; import { IPersonaCoinProps, IPersonaProps, IPersonaSharedProps } from 'office-ui-fabric-react/lib/Persona'; @@ -56,6 +68,10 @@ export abstract class FabPersonaBaseComponent) => JSX.Element; onRenderInitials: (props?: IPersonaSharedProps, defaultRender?: JsxRenderFunc) => JSX.Element; + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone }); + } + ngOnInit() { this.onRenderCoin = this.createRenderPropHandler(this.renderCoin); this.onRenderInitials = this.createRenderPropHandler(this.renderInitials); @@ -129,8 +145,8 @@ export class FabPersonaComponent extends FabPersonaBaseComponent onRenderTertiaryText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc) => JSX.Element; onRenderOptionalText: (props?: IPersonaProps, defaultRender?: JsxRenderFunc) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, ngZone); } ngOnInit() { @@ -189,7 +205,7 @@ export class FabPersonaCoinComponent extends FabPersonaBaseComponent> @@ -87,8 +92,8 @@ export abstract class FabBasePickerComponent) => JSX.Element; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true }); } ngOnInit() { @@ -145,7 +159,7 @@ export class FabPivotComponent extends ReactWrapperComponent { readonly onLinkClick = new EventEmitter<{ item?: PivotItem; ev?: MouseEvent }>(); constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer, true); + super(elementRef, changeDetectorRef, renderer, { setHostDisplay: true }); this.onLinkClickHandler = this.onLinkClickHandler.bind(this); } diff --git a/libs/fabric/src/lib/components/search-box/search-box.component.ts b/libs/fabric/src/lib/components/search-box/search-box.component.ts index f50c484..4641d28 100644 --- a/libs/fabric/src/lib/components/search-box/search-box.component.ts +++ b/libs/fabric/src/lib/components/search-box/search-box.component.ts @@ -9,6 +9,7 @@ import { ElementRef, EventEmitter, Input, + NgZone, Output, Renderer2, ViewChild, @@ -94,8 +95,8 @@ export class FabSearchBoxComponent extends ReactWrapperComponent { private _renderCustomElementsGroup?: InputRendererOptions<{}>; - constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) { - super(elementRef, changeDetectorRef, renderer, true); + constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone) { + super(elementRef, changeDetectorRef, renderer, { ngZone, setHostDisplay: true }); } } @@ -109,6 +118,6 @@ export class FabShimmerElementsGroupComponent extends ReactWrapperComponent