Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 9ddcd0d

Browse files
CaerusKaruThomasBurleson
CaerusKaru
authored and
ThomasBurleson
committed
refactor(lib): remove private Angular 'getDom()' APIs
* Remove private API references to getDom() * Add PLATFORM_ID to all components * Fix Demo-App runtime - add router to system-config Closes #553. Fixes #402, Fixes #547.
1 parent b9745c6 commit 9ddcd0d

22 files changed

+204
-116
lines changed

‎src/demo-app/system-config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ System.config({
3636
'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
3737
'@angular/platform-browser-dynamic/testing':
3838
'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
39+
'@angular/router': 'node:@angular/router/bundles/router.umd.js',
3940

4041
'@angular/material': 'node:@angular/material/bundles/material.umd.js',
4142
'@angular/cdk': 'node:@angular/cdk/bundles/cdk.umd.js',

‎src/lib/api/core/base-adapter.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class MockElementRef extends ElementRef {
2121
describe('BaseFxDirectiveAdapter class', () => {
2222
let component;
2323
beforeEach(() => {
24-
component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2); // tslint:disable-line:max-line-length
24+
component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2, {}); // tslint:disable-line:max-line-length
2525
});
2626
describe('cacheInput', () => {
2727
it('should call _cacheInputArray when source is an array', () => {

‎src/lib/api/core/base-adapter.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {ElementRef, Renderer2} from '@angular/core';
8+
import {ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
99

1010
import {BaseFxDirective} from './base';
1111
import {ResponsiveActivation} from './responsive-activation';
@@ -48,8 +48,9 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
4848
constructor(protected _baseKey: string, // non-responsive @Input property name
4949
protected _mediaMonitor: MediaMonitor,
5050
protected _elementRef: ElementRef,
51-
protected _renderer: Renderer2) {
52-
super(_mediaMonitor, _elementRef, _renderer);
51+
protected _renderer: Renderer2,
52+
@Inject(PLATFORM_ID) protected _platformId: Object) {
53+
super(_mediaMonitor, _elementRef, _renderer, _platformId);
5354
}
5455

5556
/**

‎src/lib/api/core/base.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,14 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {
9-
ElementRef, OnDestroy, SimpleChanges, OnChanges,
10-
SimpleChange, Renderer2
9+
ElementRef,
10+
OnDestroy,
11+
SimpleChanges,
12+
OnChanges,
13+
SimpleChange,
14+
Renderer2,
15+
Inject,
16+
PLATFORM_ID,
1117
} from '@angular/core';
1218

1319
import {buildLayoutCSS} from '../../utils/layout-validator';
@@ -16,7 +22,8 @@ import {
1622
lookupStyle,
1723
lookupInlineStyle,
1824
applyStyleToElement,
19-
applyStyleToElements, lookupAttributeValue
25+
applyStyleToElements,
26+
lookupAttributeValue,
2027
} from '../../utils/style-utils';
2128

2229
import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
@@ -63,7 +70,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
6370
*/
6471
constructor(protected _mediaMonitor: MediaMonitor,
6572
protected _elementRef: ElementRef,
66-
protected _renderer: Renderer2) {
73+
protected _renderer: Renderer2,
74+
@Inject(PLATFORM_ID) protected _platformId: Object) {
6775
}
6876

6977
// *********************************************
@@ -133,7 +141,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
133141
* and optional restore it when the mediaQueries deactivate
134142
*/
135143
protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string {
136-
return lookupStyle(source || this.nativeElement, 'display');
144+
return lookupStyle(this._platformId, source || this.nativeElement, 'display');
137145
}
138146

139147
/**
@@ -154,7 +162,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
154162
let value = 'row';
155163

156164
if (target) {
157-
value = lookupStyle(target, 'flex-direction') || 'row';
165+
value = lookupStyle(this._platformId, target, 'flex-direction') || 'row';
158166
let hasInlineValue = lookupInlineStyle(target, 'flex-direction');
159167

160168
if (!hasInlineValue && addIfMissing) {

‎src/lib/api/ext/class.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import {
1717
Optional,
1818
Renderer2,
1919
SimpleChanges,
20-
Self, OnInit
20+
Self,
21+
OnInit,
22+
Inject,
23+
PLATFORM_ID,
2124
} from '@angular/core';
2225
import {NgClass} from '@angular/common';
2326

@@ -91,8 +94,9 @@ export class ClassDirective extends BaseFxDirective
9194
protected _keyValueDiffers: KeyValueDiffers,
9295
protected _ngEl: ElementRef,
9396
protected _renderer: Renderer2,
94-
@Optional() @Self() private _ngClassInstance: NgClass ) {
95-
super(monitor, _ngEl, _renderer);
97+
@Optional() @Self() private _ngClassInstance: NgClass,
98+
@Inject(PLATFORM_ID) protected _platformId: Object) {
99+
super(monitor, _ngEl, _renderer, _platformId);
96100
this._configureAdapters();
97101
}
98102

@@ -135,7 +139,7 @@ export class ClassDirective extends BaseFxDirective
135139
*/
136140
protected _configureAdapters() {
137141
this._base = new BaseFxDirectiveAdapter(
138-
'ngClass', this.monitor, this._ngEl, this._renderer
142+
'ngClass', this.monitor, this._ngEl, this._renderer, this._platformId
139143
);
140144
if (!this._ngClassInstance) {
141145
// Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on

‎src/lib/api/ext/img-src.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ import {
1111
Input,
1212
OnInit,
1313
OnChanges,
14-
Renderer2
14+
Renderer2,
15+
Inject,
16+
PLATFORM_ID,
1517
} from '@angular/core';
1618

1719
import {BaseFxDirective} from '../core/base';
@@ -55,8 +57,11 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
5557
@Input('src.gt-lg') set srcGtLg(val) { this._cacheInput('srcGtLg', val); }
5658
/* tslint:enable */
5759

58-
constructor(elRef: ElementRef, renderer: Renderer2, monitor: MediaMonitor) {
59-
super(monitor, elRef, renderer);
60+
constructor(elRef: ElementRef,
61+
renderer: Renderer2,
62+
monitor: MediaMonitor,
63+
@Inject(PLATFORM_ID) platformId: Object) {
64+
super(monitor, elRef, renderer, platformId);
6065
this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
6166
}
6267

‎src/lib/api/ext/show-hide.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ import {
1515
Renderer2,
1616
SimpleChanges,
1717
Self,
18-
Optional
18+
Optional,
19+
Inject,
20+
PLATFORM_ID,
1921
} from '@angular/core';
2022

2123
import {Subscription} from 'rxjs/Subscription';
@@ -104,9 +106,10 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan
104106
constructor(monitor: MediaMonitor,
105107
@Optional() @Self() protected _layout: LayoutDirective,
106108
protected elRef: ElementRef,
107-
protected renderer: Renderer2) {
109+
protected renderer: Renderer2,
110+
@Inject(PLATFORM_ID) protected platformId: Object) {
108111

109-
super(monitor, elRef, renderer);
112+
super(monitor, elRef, renderer, platformId);
110113

111114
if (_layout) {
112115
/**

‎src/lib/api/ext/style.ts

+8-4
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import {
1717
Renderer2,
1818
SecurityContext,
1919
Self,
20-
SimpleChanges, OnInit,
20+
SimpleChanges,
21+
OnInit,
22+
Inject,
23+
PLATFORM_ID,
2124
} from '@angular/core';
2225
import {NgStyle} from '@angular/common';
2326

@@ -89,9 +92,10 @@ export class StyleDirective extends BaseFxDirective
8992
protected _ngEl: ElementRef,
9093
protected _renderer: Renderer2,
9194
protected _differs: KeyValueDiffers,
92-
@Optional() @Self() private _ngStyleInstance: NgStyle) {
95+
@Optional() @Self() private _ngStyleInstance: NgStyle,
96+
@Inject(PLATFORM_ID) protected _platformId: Object) {
9397

94-
super(monitor, _ngEl, _renderer);
98+
super(monitor, _ngEl, _renderer, _platformId);
9599
this._configureAdapters();
96100
}
97101

@@ -134,7 +138,7 @@ export class StyleDirective extends BaseFxDirective
134138
*/
135139
protected _configureAdapters() {
136140
this._base = new BaseFxDirectiveAdapter(
137-
'ngStyle', this.monitor, this._ngEl, this._renderer
141+
'ngStyle', this.monitor, this._ngEl, this._renderer, this._platformId
138142
);
139143
if ( !this._ngStyleInstance ) {
140144
// Create an instance NgClass Directive instance only if `ngClass=""` has NOT been

‎src/lib/api/flexbox/flex-align.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
OnDestroy,
1515
Renderer2,
1616
SimpleChanges,
17+
Inject,
18+
PLATFORM_ID,
1719
} from '@angular/core';
1820

1921
import {BaseFxDirective} from '../core/base';
@@ -54,8 +56,11 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
5456
@Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); };
5557

5658
/* tslint:enable */
57-
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
58-
super(monitor, elRef, renderer);
59+
constructor(monitor: MediaMonitor,
60+
elRef: ElementRef,
61+
renderer: Renderer2,
62+
@Inject(PLATFORM_ID) platformId: Object) {
63+
super(monitor, elRef, renderer, platformId);
5964
}
6065

6166

‎src/lib/api/flexbox/flex-fill.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {Directive, ElementRef, Renderer2} from '@angular/core';
8+
import {Directive, ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
99

1010
import {MediaMonitor} from '../../media-query/media-monitor';
1111
import {BaseFxDirective} from '../core/base';
@@ -29,8 +29,11 @@ const FLEX_FILL_CSS = {
2929
[fxFlexFill]
3030
`})
3131
export class FlexFillDirective extends BaseFxDirective {
32-
constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) {
33-
super(monitor, elRef, renderer);
32+
constructor(monitor: MediaMonitor,
33+
public elRef: ElementRef,
34+
public renderer: Renderer2,
35+
@Inject(PLATFORM_ID) platformId: Object) {
36+
super(monitor, elRef, renderer, platformId);
3437
this._applyStyleToElement(FLEX_FILL_CSS);
3538
}
3639
}

‎src/lib/api/flexbox/flex-offset.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ import {
1515
Optional,
1616
Renderer2,
1717
SimpleChanges,
18-
SkipSelf
18+
SkipSelf,
19+
Inject,
20+
PLATFORM_ID,
1921
} from '@angular/core';
2022

2123
import {Subscription} from 'rxjs/Subscription';
@@ -60,8 +62,9 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
6062
constructor(monitor: MediaMonitor,
6163
elRef: ElementRef,
6264
renderer: Renderer2,
63-
@Optional() @SkipSelf() protected _container: LayoutDirective ) {
64-
super(monitor, elRef, renderer);
65+
@Optional() @SkipSelf() protected _container: LayoutDirective,
66+
@Inject(PLATFORM_ID) platformId: Object) {
67+
super(monitor, elRef, renderer, platformId);
6568

6669

6770
this.watchParentFlow();

‎src/lib/api/flexbox/flex-order.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import {
1414
OnDestroy,
1515
Renderer2,
1616
SimpleChanges,
17+
Inject,
18+
PLATFORM_ID,
1719
} from '@angular/core';
1820

1921
import {BaseFxDirective} from '../core/base';
@@ -52,8 +54,11 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
5254
@Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };
5355

5456
/* tslint:enable */
55-
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
56-
super(monitor, elRef, renderer);
57+
constructor(monitor: MediaMonitor,
58+
elRef: ElementRef,
59+
renderer: Renderer2,
60+
@Inject(PLATFORM_ID) platformId: Object) {
61+
super(monitor, elRef, renderer, platformId);
5762
}
5863

5964
// *********************************************

‎src/lib/api/flexbox/flex.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,16 @@
55
* Use of this source code is governed by an MIT-style license that can be
66
* found in the LICENSE file at https://angular.io/license
77
*/
8-
import {
8+
import {
99
Directive,
1010
ElementRef,
11+
Inject,
1112
Input,
1213
OnChanges,
1314
OnDestroy,
1415
OnInit,
1516
Optional,
17+
PLATFORM_ID,
1618
Renderer2,
1719
SimpleChanges,
1820
SkipSelf,
@@ -86,9 +88,10 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
8688
elRef: ElementRef,
8789
renderer: Renderer2,
8890
@Optional() @SkipSelf() protected _container: LayoutDirective,
89-
@Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) {
91+
@Optional() @SkipSelf() protected _wrap: LayoutWrapDirective,
92+
@Inject(PLATFORM_ID) platformId: Object) {
9093

91-
super(monitor, elRef, renderer);
94+
super(monitor, elRef, renderer, platformId);
9295

9396
this._cacheInput('flex', '');
9497
this._cacheInput('shrink', 1);

‎src/lib/api/flexbox/layout-align.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ import {
1414
OnInit,
1515
Optional,
1616
Renderer2,
17-
SimpleChanges, Self,
17+
SimpleChanges,
18+
Self,
19+
Inject,
20+
PLATFORM_ID,
1821
} from '@angular/core';
1922
import {Subscription} from 'rxjs/Subscription';
2023
import {extendObject} from '../../utils/object-extend';
@@ -68,8 +71,9 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
6871
constructor(
6972
monitor: MediaMonitor,
7073
elRef: ElementRef, renderer: Renderer2,
71-
@Optional() @Self() container: LayoutDirective) {
72-
super(monitor, elRef, renderer);
74+
@Optional() @Self() container: LayoutDirective,
75+
@Inject(PLATFORM_ID) platformId: Object) {
76+
super(monitor, elRef, renderer, platformId);
7377

7478
if (container) { // Subscribe to layout direction changes
7579
this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this));

‎src/lib/api/flexbox/layout-gap.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
Optional,
1818
OnDestroy,
1919
NgZone,
20+
Inject,
21+
PLATFORM_ID,
2022
} from '@angular/core';
2123
import {Subscription} from 'rxjs/Subscription';
2224

@@ -67,8 +69,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
6769
elRef: ElementRef,
6870
renderer: Renderer2,
6971
@Optional() @Self() container: LayoutDirective,
70-
private _zone: NgZone) {
71-
super(monitor, elRef, renderer);
72+
private _zone: NgZone,
73+
@Inject(PLATFORM_ID) platformId: Object) {
74+
super(monitor, elRef, renderer, platformId);
7275

7376
if (container) { // Subscribe to layout direction changes
7477
this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this));

0 commit comments

Comments
 (0)