diff --git a/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts index df3dd7ac6..e0b5a663f 100644 --- a/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts +++ b/src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts @@ -49,13 +49,14 @@ import {Component} from '@angular/core';
-
-
+
Sample Text #2
diff --git a/src/lib/flexbox/api/base-adapter.ts b/src/lib/flexbox/api/base-adapter.ts index b1c1c71c9..ee48afc8b 100644 --- a/src/lib/flexbox/api/base-adapter.ts +++ b/src/lib/flexbox/api/base-adapter.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {ElementRef, Renderer} from '@angular/core'; +import {ElementRef, Renderer2} from '@angular/core'; import {BaseFxDirective} from './base'; import {ResponsiveActivation} from './../responsive/responsive-activation'; @@ -48,7 +48,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective { constructor(protected _baseKey: string, // non-responsive @Input property name protected _mediaMonitor: MediaMonitor, protected _elementRef: ElementRef, - protected _renderer: Renderer) { + protected _renderer: Renderer2) { super(_mediaMonitor, _elementRef, _renderer); } diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts index 89e081ce8..520d6bdc9 100644 --- a/src/lib/flexbox/api/base.ts +++ b/src/lib/flexbox/api/base.ts @@ -7,7 +7,7 @@ */ import { ElementRef, OnDestroy, SimpleChanges, OnChanges, - SimpleChange, Renderer + SimpleChange, Renderer2 } from '@angular/core'; import {ɵgetDOM as getDom} from '@angular/platform-browser'; @@ -65,7 +65,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { */ constructor(protected _mediaMonitor: MediaMonitor, protected _elementRef: ElementRef, - protected _renderer: Renderer) { + protected _renderer: Renderer2) { this._display = this._getDisplayStyle(); } @@ -126,8 +126,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { let element: HTMLElement = source || this._elementRef.nativeElement; let value = this._lookupStyle(element, 'display'); - return value ? value.trim() : - ((element.nodeType === 1) ? 'block' : 'inline-block'); + // Note: 'inline' is the default of all elements, unless UA stylesheet overrides + return value ? value.trim() : 'inline'; } /** @@ -175,7 +175,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges { Object.keys(styles).forEach(key => { const values = Array.isArray(styles[key]) ? styles[key] : [styles[key]]; for (let value of values) { - this._renderer.setElementStyle(element, key, value); + this._renderer.setStyle(element, key, value); } }); } diff --git a/src/lib/flexbox/api/class.ts b/src/lib/flexbox/api/class.ts index 52f056012..20e4201e5 100644 --- a/src/lib/flexbox/api/class.ts +++ b/src/lib/flexbox/api/class.ts @@ -7,16 +7,22 @@ */ import { Directive, + DoCheck, ElementRef, Input, - DoCheck, + IterableDiffers, + KeyValueDiffers, + OnChanges, OnDestroy, + Optional, Renderer, - IterableDiffers, - KeyValueDiffers, SimpleChanges, OnChanges + Renderer2, + SimpleChanges, + Self } from '@angular/core'; import {NgClass} from '@angular/common'; +import {BaseFxDirective} from './base'; import {BaseFxDirectiveAdapter} from './base-adapter'; import {MediaChange} from '../../media-query/media-change'; import {MediaMonitor} from '../../media-query/media-monitor'; @@ -24,12 +30,6 @@ import {MediaMonitor} from '../../media-query/media-monitor'; /** NgClass allowed inputs **/ export type NgClassType = string | string[] | Set | {[klass: string]: any}; -/** - * Explicitly export the NgStyle super class type for ngc/AOT compiles - * Workaround for https://github.com/angular/angular/issues/17849 - */ -export const _ClassDirectiveBaseClass = NgClass; - /** * Directive to add responsive support for ngClass. */ @@ -44,7 +44,7 @@ export const _ClassDirectiveBaseClass = NgClass; [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg] ` }) -export class ClassDirective extends _ClassDirectiveBaseClass +export class ClassDirective extends BaseFxDirective implements DoCheck, OnChanges, OnDestroy { /** @@ -55,7 +55,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass @Input('ngClass') set ngClassBase(val: NgClassType) { this._ngClassAdapter.cacheInput('ngClass', val, true); - this.ngClass = val; + this._ngClassInstance.ngClass = val; } /* tslint:disable */ @@ -86,7 +86,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass @Input('class') set classBase(val: string) { this._classAdapter.cacheInput('_rawClass', val, true); - this.klass = val; + this._ngClassInstance.klass = val; } @Input('class.xs') set classXs(val: NgClassType) { this._classAdapter.cacheInput('classXs', val, true); } @@ -115,13 +115,20 @@ export class ClassDirective extends _ClassDirectiveBaseClass /* tslint:enable */ constructor(protected monitor: MediaMonitor, + _ngEl: ElementRef, _renderer: Renderer2, _oldRenderer: Renderer, _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, - _ngEl: ElementRef, _renderer: Renderer) { + @Optional() @Self() private _ngClassInstance: NgClass) { - super(_iterableDiffers, _keyValueDiffers, _ngEl, _renderer); + super(monitor, _ngEl, _renderer); this._classAdapter = new BaseFxDirectiveAdapter('class', monitor, _ngEl, _renderer); this._ngClassAdapter = new BaseFxDirectiveAdapter('ngClass', monitor, _ngEl, _renderer); + + // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on + // the same host element; since the responsive variations may be defined... + if ( !this._ngClassInstance ) { + this._ngClassInstance = new NgClass(_iterableDiffers, _keyValueDiffers, _ngEl, _oldRenderer); + } } // ****************************************************************** @@ -147,12 +154,13 @@ export class ClassDirective extends _ClassDirectiveBaseClass if (!this._classAdapter.hasMediaQueryListener) { this._configureMQListener(); } - super.ngDoCheck(); + this._ngClassInstance.ngDoCheck(); } ngOnDestroy() { this._classAdapter.ngOnDestroy(); this._ngClassAdapter.ngOnDestroy(); + this._ngClassInstance = null; } // ****************************************************************** @@ -170,7 +178,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass this._ngClassAdapter.listenForMediaQueryChanges('ngClass', '', (changes: MediaChange) => { this._updateNgClass(changes.value); - super.ngDoCheck(); // trigger NgClass::_applyIterableChanges() + this._ngClassInstance.ngDoCheck(); // trigger NgClass::_applyIterableChanges() }); } @@ -183,7 +191,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass if (this._classAdapter.mqActivation) { klass = this._classAdapter.mqActivation.activatedInput; } - this.klass = klass || this.initialClasses; + this._ngClassInstance.klass = klass || this.initialClasses; } /** @@ -194,14 +202,16 @@ export class ClassDirective extends _ClassDirectiveBaseClass if (this._ngClassAdapter.mqActivation) { value = this._ngClassAdapter.mqActivation.activatedInput; } - this.ngClass = value || ''; // Delegate subsequent activity to the NgClass logic + + // Delegate subsequent activity to the NgClass logic + this._ngClassInstance.ngClass = value || ''; } /** * Special adapter to cross-cut responsive behaviors - * into the ClassDirective + * into the ClassDirective instance */ - protected _classAdapter: BaseFxDirectiveAdapter; // used for `class.xxx` selectores + protected _classAdapter: BaseFxDirectiveAdapter; // used for `class.xxx` selectors protected _ngClassAdapter: BaseFxDirectiveAdapter; // used for `ngClass.xxx` selectors } diff --git a/src/lib/flexbox/api/flex-align.ts b/src/lib/flexbox/api/flex-align.ts index 1b39d76dc..ee69347df 100644 --- a/src/lib/flexbox/api/flex-align.ts +++ b/src/lib/flexbox/api/flex-align.ts @@ -12,7 +12,7 @@ import { OnInit, OnChanges, OnDestroy, - Renderer, + Renderer2, SimpleChanges, } from '@angular/core'; @@ -54,7 +54,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha @Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); }; /* tslint:enable */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) { + constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { super(monitor, elRef, renderer); } diff --git a/src/lib/flexbox/api/flex-fill.ts b/src/lib/flexbox/api/flex-fill.ts index 2425726a1..22a42cf2b 100644 --- a/src/lib/flexbox/api/flex-fill.ts +++ b/src/lib/flexbox/api/flex-fill.ts @@ -5,7 +5,7 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {Directive, ElementRef, Renderer} from '@angular/core'; +import {Directive, ElementRef, Renderer2} from '@angular/core'; import {MediaMonitor} from '../../media-query/media-monitor'; import {BaseFxDirective} from './base'; @@ -29,7 +29,7 @@ const FLEX_FILL_CSS = { [fxFlexFill] `}) export class FlexFillDirective extends BaseFxDirective { - constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer) { + constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) { super(monitor, elRef, renderer); this._applyStyleToElement(FLEX_FILL_CSS); } diff --git a/src/lib/flexbox/api/flex-offset.ts b/src/lib/flexbox/api/flex-offset.ts index 2626c3481..2a936b621 100644 --- a/src/lib/flexbox/api/flex-offset.ts +++ b/src/lib/flexbox/api/flex-offset.ts @@ -13,7 +13,7 @@ import { OnChanges, OnDestroy, Optional, - Renderer, + Renderer2, SimpleChanges, SkipSelf } from '@angular/core'; @@ -59,7 +59,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh /* tslint:enable */ constructor(monitor: MediaMonitor, elRef: ElementRef, - renderer: Renderer, + renderer: Renderer2, @Optional() @SkipSelf() protected _container: LayoutDirective ) { super(monitor, elRef, renderer); diff --git a/src/lib/flexbox/api/flex-order.ts b/src/lib/flexbox/api/flex-order.ts index 19d2e2b61..531c959c7 100644 --- a/src/lib/flexbox/api/flex-order.ts +++ b/src/lib/flexbox/api/flex-order.ts @@ -12,7 +12,7 @@ import { OnInit, OnChanges, OnDestroy, - Renderer, + Renderer2, SimpleChanges, } from '@angular/core'; @@ -52,7 +52,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha @Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); }; /* tslint:enable */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) { + constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { super(monitor, elRef, renderer); } diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts index 9a768db69..250636fbb 100644 --- a/src/lib/flexbox/api/flex.ts +++ b/src/lib/flexbox/api/flex.ts @@ -13,7 +13,7 @@ OnDestroy, OnInit, Optional, - Renderer, + Renderer2, SimpleChanges, SkipSelf, } from '@angular/core'; @@ -84,7 +84,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, // for the parent flex container for this flex item. constructor(monitor: MediaMonitor, elRef: ElementRef, - renderer: Renderer, + renderer: Renderer2, @Optional() @SkipSelf() protected _container: LayoutDirective, @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) { diff --git a/src/lib/flexbox/api/layout-align.ts b/src/lib/flexbox/api/layout-align.ts index b9d131932..f58c133fc 100644 --- a/src/lib/flexbox/api/layout-align.ts +++ b/src/lib/flexbox/api/layout-align.ts @@ -13,7 +13,7 @@ import { OnDestroy, OnInit, Optional, - Renderer, + Renderer2, SimpleChanges, Self, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -67,7 +67,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC /* tslint:enable */ constructor( monitor: MediaMonitor, - elRef: ElementRef, renderer: Renderer, + elRef: ElementRef, renderer: Renderer2, @Optional() @Self() container: LayoutDirective) { super(monitor, elRef, renderer); diff --git a/src/lib/flexbox/api/layout-gap.ts b/src/lib/flexbox/api/layout-gap.ts index 0009a566d..191f61082 100644 --- a/src/lib/flexbox/api/layout-gap.ts +++ b/src/lib/flexbox/api/layout-gap.ts @@ -10,7 +10,7 @@ import { ElementRef, Input, OnChanges, - Renderer, + Renderer2, SimpleChanges, Self, AfterContentInit, @@ -65,7 +65,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI /* tslint:enable */ constructor(monitor: MediaMonitor, elRef: ElementRef, - renderer: Renderer, + renderer: Renderer2, @Optional() @Self() container: LayoutDirective, private _zone: NgZone) { super(monitor, elRef, renderer); diff --git a/src/lib/flexbox/api/layout-wrap.ts b/src/lib/flexbox/api/layout-wrap.ts index 6f860e65d..bcb75073e 100644 --- a/src/lib/flexbox/api/layout-wrap.ts +++ b/src/lib/flexbox/api/layout-wrap.ts @@ -12,7 +12,7 @@ import { OnChanges, OnDestroy, OnInit, - Renderer, + Renderer2, SimpleChanges, Self, Optional, } from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; @@ -64,7 +64,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh constructor( monitor: MediaMonitor, elRef: ElementRef, - renderer: Renderer, + renderer: Renderer2, @Optional() @Self() container: LayoutDirective) { super(monitor, elRef, renderer); diff --git a/src/lib/flexbox/api/layout.ts b/src/lib/flexbox/api/layout.ts index 204121db6..70117046c 100644 --- a/src/lib/flexbox/api/layout.ts +++ b/src/lib/flexbox/api/layout.ts @@ -12,7 +12,7 @@ import { OnInit, OnChanges, OnDestroy, - Renderer, + Renderer2, SimpleChanges, } from '@angular/core'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; @@ -71,7 +71,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange /** * */ - constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) { + constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) { super(monitor, elRef, renderer); this._announcer = new BehaviorSubject('row'); this.layout$ = this._announcer.asObservable(); diff --git a/src/lib/flexbox/api/show-hide.ts b/src/lib/flexbox/api/show-hide.ts index 330cdda5c..1dbe95fe2 100644 --- a/src/lib/flexbox/api/show-hide.ts +++ b/src/lib/flexbox/api/show-hide.ts @@ -12,7 +12,7 @@ import { OnInit, OnChanges, OnDestroy, - Renderer, + Renderer2, SimpleChanges, Self, Optional @@ -104,7 +104,7 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan constructor(monitor: MediaMonitor, @Optional() @Self() protected _layout: LayoutDirective, protected elRef: ElementRef, - protected renderer: Renderer) { + protected renderer: Renderer2) { super(monitor, elRef, renderer); @@ -125,7 +125,7 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan /** * Override accessor to the current HTMLElement's `display` style * Note: Show/Hide will not change the display to 'flex' but will set it to 'block' - * unless it was already explicitly defined. + * unless it was already explicitly specified inline or in a CSS stylesheet. */ protected _getDisplayStyle(): string { return this._layout ? 'flex' : super._getDisplayStyle(); diff --git a/src/lib/flexbox/api/style.ts b/src/lib/flexbox/api/style.ts index c86f18364..4e2a4ede3 100644 --- a/src/lib/flexbox/api/style.ts +++ b/src/lib/flexbox/api/style.ts @@ -7,17 +7,22 @@ */ import { Directive, + DoCheck, ElementRef, Input, + KeyValueDiffers, OnDestroy, - DoCheck, + OnChanges, + Optional, Renderer, - KeyValueDiffers, - SimpleChanges, OnChanges, - SecurityContext + Renderer2, + SecurityContext, + Self, + SimpleChanges, } from '@angular/core'; import {NgStyle} from '@angular/common'; +import {BaseFxDirective} from './base'; import {BaseFxDirectiveAdapter} from './base-adapter'; import {MediaChange} from '../../media-query/media-change'; import {MediaMonitor} from '../../media-query/media-monitor'; @@ -31,12 +36,6 @@ import { ngStyleUtils as _ } from '../../utils/style-transforms'; -/** - * Explicitly export the NgStyle super class type for ngc/AOT compiles - * Workaround for https://github.com/angular/angular/issues/17849 - */ -export const _StyleDirectiveBaseClass = NgStyle; - /** * Directive to add responsive support for ngStyle. * @@ -52,7 +51,7 @@ export const _StyleDirectiveBaseClass = NgStyle; [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg] ` }) -export class StyleDirective extends _StyleDirectiveBaseClass +export class StyleDirective extends BaseFxDirective implements DoCheck, OnChanges, OnDestroy { /** @@ -62,7 +61,7 @@ export class StyleDirective extends _StyleDirectiveBaseClass @Input('ngStyle') set styleBase(val: NgStyleType) { this._base.cacheInput('style', val, true); - this.ngStyle = this._base.inputMap['style']; + this._ngStyleInstance.ngStyle = this._base.inputMap['style']; } /* tslint:disable */ @@ -106,16 +105,21 @@ export class StyleDirective extends _StyleDirectiveBaseClass */ constructor(private monitor: MediaMonitor, protected _sanitizer: DomSanitizer, - _differs: KeyValueDiffers, - _ngEl: ElementRef, - _renderer: Renderer) { + _ngEl: ElementRef, _renderer: Renderer2, + _differs: KeyValueDiffers, _oldRenderer: Renderer, + @Optional() @Self() private _ngStyleInstance: NgStyle) { - // TODO: this should use Renderer when the NgStyle signature is switched over to it. - super(_differs, _ngEl, _renderer); + super(monitor, _ngEl, _renderer); // Build adapter, `cacheInput()` interceptor, and get current inline style if any this._buildAdapter(this.monitor, _ngEl, _renderer); this._base.cacheInput('style', _ngEl.nativeElement.getAttribute('style'), true); + + // Create an instance NgStyle Directive instance only if `ngStyle=""` has NOT been defined on + // the same host element; since the responsive versions may be defined... + if ( !this._ngStyleInstance ) { + this._ngStyleInstance = new NgStyle(_differs, _ngEl, _oldRenderer); + } } // ****************************************************************** @@ -138,11 +142,12 @@ export class StyleDirective extends _StyleDirectiveBaseClass if (!this._base.hasMediaQueryListener) { this._configureMQListener(); } - super.ngDoCheck(); + this._ngStyleInstance.ngDoCheck(); } ngOnDestroy() { this._base.ngOnDestroy(); + this._ngStyleInstance = null; } // ****************************************************************** @@ -158,7 +163,7 @@ export class StyleDirective extends _StyleDirectiveBaseClass this._updateStyle(changes.value); // trigger NgClass::_applyIterableChanges() - super.ngDoCheck(); + this._ngStyleInstance.ngDoCheck(); }); } @@ -177,7 +182,7 @@ export class StyleDirective extends _StyleDirectiveBaseClass } // Delegate subsequent activity to the NgStyle logic - this.ngStyle = style; + this._ngStyleInstance.ngStyle = style; } @@ -186,7 +191,7 @@ export class StyleDirective extends _StyleDirectiveBaseClass * This adapter manages listening to mediaQuery change events and identifying * which property value should be used for the style update */ - protected _buildAdapter(monitor: MediaMonitor, _ngEl: ElementRef, _renderer: Renderer) { + protected _buildAdapter(monitor: MediaMonitor, _ngEl: ElementRef, _renderer: Renderer2) { this._base = new BaseFxDirectiveAdapter('style', monitor, _ngEl, _renderer); this._buildCacheInterceptor(); }