Skip to content

Commit ecc6e51

Browse files
ThomasBurlesonmmalerba
ThomasBurleson
authored and
mmalerba
committed
feat(breakpoints): support custom breakpoints and enhanced selectors (angular#204)
* Modify providers to support global services for MediaMonitor and ObservableMonitor * uses PROVIDER_FACTORY solutions to check for parent/global instance * Add **FlexLayoutModule.provideBreakPoints()** to easily * add custom breakpoints to defaults * add orientation breakpoints to defaults * replace defaults with custom breakpoints * Add extended breakpoints from Material 2: * implementat breakpoints for **handset**, **tablet**, **web** * implementation breakpoints with orientations for *Portrait* and *Landscape* * Deprecated responsive uses of `class.<xx>` and `style.<xx>` selectors * Developers should use **`ngClass.<xx>`** and **`ngStyle.<xxx>`** selectors * Add selectors for **`lt-sm`**, **`lt-md`**, **`lt-lg`**, **`lt-xl`** * update mock-match-media fallback rules * Update **ObservableMedia** and **MediaMonitor** to use orientation breakpoints * also support custom breakpoints (if registered)
1 parent 64b122a commit ecc6e51

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1478
-779
lines changed

‎src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {Component} from '@angular/core';
22
import 'rxjs/add/operator/filter';
33

4-
54
@Component({
65
selector: 'demo-responsive-flex-directive',
76
styleUrls : [

‎src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
33
import 'rxjs/add/operator/filter';
44

55
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
6+
import { ObservableMedia } from "../../../lib/media-query/observable-media";
77

88
@Component({
99
selector: 'demo-responsive-row-column',

‎src/demo-app/app/github-issues/issue.181.demo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
33
import 'rxjs/add/operator/filter';
44

55
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import {ObservableMedia} from "../../../lib/media-query/observable-media-service";
6+
import {ObservableMedia} from "../../../lib/media-query/observable-media";
77

88
@Component({
99
selector: 'demo-issue-181',

‎src/demo-app/app/shared/media-query-status.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Component, OnDestroy} from '@angular/core';
22
import {Subscription} from 'rxjs/Subscription';
33

44
import {MediaChange} from "../../../lib/media-query/media-change";
5-
import { ObservableMedia } from "../../../lib/media-query/observable-media-service";
5+
import { ObservableMedia } from "../../../lib/media-query/observable-media";
66

77
@Component({
88
selector : 'media-query-status',

‎src/lib/flexbox/_module.ts‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,17 @@ import 'rxjs/add/operator/filter';
99
import 'rxjs/add/operator/map';
1010

1111
import {ModuleWithProviders, NgModule} from '@angular/core';
12-
import {MediaMonitor} from '../media-query/media-monitor';
1312
import {MediaQueriesModule} from '../media-query/_module';
1413

14+
import {BreakPoint} from '../media-query/breakpoints/break-point';
15+
import {
16+
BreakPointProviderOptions,
17+
DEFAULT_BREAKPOINTS_PROVIDER,
18+
CUSTOM_BREAKPOINTS_PROVIDER_FACTORY
19+
} from '../media-query/breakpoints/break-points-provider';
20+
import {MEDIA_MONITOR_PROVIDER} from '../media-query/media-monitor-provider';
21+
import {OBSERVABLE_MEDIA_PROVIDER} from '../media-query/observable-media-provider';
22+
1523
import {FlexDirective} from './api/flex';
1624
import {LayoutDirective} from './api/layout';
1725
import {ShowHideDirective} from './api/show-hide';
@@ -55,13 +63,27 @@ const ALL_DIRECTIVES = [
5563
declarations: ALL_DIRECTIVES,
5664
imports: [MediaQueriesModule],
5765
exports: [MediaQueriesModule, ...ALL_DIRECTIVES],
58-
providers: [MediaMonitor]
66+
providers: [
67+
MEDIA_MONITOR_PROVIDER,
68+
DEFAULT_BREAKPOINTS_PROVIDER, // Extend defaults with internal custom breakpoints
69+
OBSERVABLE_MEDIA_PROVIDER
70+
]
5971
})
6072
export class FlexLayoutModule {
61-
/** @deprecated */
62-
static forRoot(): ModuleWithProviders {
73+
/**
74+
* External uses can easily add custom breakpoints AND include internal orientations
75+
* breakpoints; which are not available by default.
76+
*
77+
* !! Selector aliases are not auto-configured. Developers must subclass
78+
* the API directives to support extra selectors for the orientations breakpoints !!
79+
*/
80+
static provideBreakPoints(breakpoints: BreakPoint[],
81+
options ?: BreakPointProviderOptions): ModuleWithProviders {
6382
return {
64-
ngModule: FlexLayoutModule
83+
ngModule: FlexLayoutModule,
84+
providers: [
85+
CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(breakpoints, options || {orientations: false})
86+
]
6587
};
6688
}
6789
}

‎src/lib/flexbox/api/class.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
1313

1414
import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
1515
import {MatchMedia} from '../../media-query/match-media';
16-
import {ObservableMedia} from '../../media-query/observable-media-service';
17-
import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
16+
import {ObservableMedia} from '../../media-query/observable-media';
17+
import {DEFAULT_BREAKPOINTS_PROVIDER} from '../../media-query/breakpoints/break-points-provider';
1818
import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';
1919

2020
import {customMatchers} from '../../utils/testing/custom-matchers';
@@ -40,7 +40,7 @@ describe('class directive', () => {
4040
imports: [CommonModule, MediaQueriesModule],
4141
declarations: [TestClassComponent, ClassDirective],
4242
providers: [
43-
BreakPointRegistry, BreakPointsProvider,
43+
BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
4444
{provide: MatchMedia, useClass: MockMatchMedia}
4545
]
4646
});

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

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,40 +32,51 @@ export type NgClassType = string | string[] | Set<string> | {[klass: string]: an
3232
*/
3333
@Directive({
3434
selector: `
35-
[ngClass.xs], [class.xs],
36-
[ngClass.gt-xs], [class.gt-xs],
37-
[ngClass.sm], [class.sm],
38-
[ngClass.gt-sm], [class.gt-sm],
39-
[ngClass.md], [class.md],
40-
[ngClass.gt-md], [class.gt-md],
41-
[ngClass.lg], [class.lg],
42-
[ngClass.gt-lg], [class.gt-lg]
35+
[class.xs], [class.sm], [class.md], [class.lg], [class.xl],
36+
[class.lt-sm], [class.lt-md], [class.lt-lg], [class.lt-xl],
37+
[class.gt-xs], [class.gt-sm], [class.gt-md], [class.gt-lg],
38+
39+
[ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],
40+
[ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],
41+
[ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]
4342
`
4443
})
4544
export class ClassDirective extends NgClass implements OnInit, OnChanges, OnDestroy {
4645

4746
/* tslint:disable */
4847
@Input('ngClass.xs') set ngClassXs(val: NgClassType) { this._base.cacheInput('classXs', val, true); }
49-
@Input('ngClass.gt-xs') set ngClassGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
5048
@Input('ngClass.sm') set ngClassSm(val: NgClassType) { this._base.cacheInput('classSm', val, true); };
51-
@Input('ngClass.gt-sm') set ngClassGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true);} ;
5249
@Input('ngClass.md') set ngClassMd(val: NgClassType) { this._base.cacheInput('classMd', val, true); };
53-
@Input('ngClass.gt-md') set ngClassGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
5450
@Input('ngClass.lg') set ngClassLg(val: NgClassType) { this._base.cacheInput('classLg', val, true);};
55-
@Input('ngClass.gt-lg') set ngClassGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
5651
@Input('ngClass.xl') set ngClassXl(val: NgClassType) { this._base.cacheInput('classXl', val, true); };
5752

53+
@Input('ngClass.lt-xs') set ngClassLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
54+
@Input('ngClass.lt-sm') set ngClassLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true);} ;
55+
@Input('ngClass.lt-md') set ngClassLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
56+
@Input('ngClass.lt-lg') set ngClassLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };
57+
58+
@Input('ngClass.gt-xs') set ngClassGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
59+
@Input('ngClass.gt-sm') set ngClassGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true);} ;
60+
@Input('ngClass.gt-md') set ngClassGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
61+
@Input('ngClass.gt-lg') set ngClassGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
62+
5863
/** Deprecated selectors */
5964
@Input('class.xs') set classXs(val: NgClassType) { this._base.cacheInput('classXs', val, true); }
60-
@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
6165
@Input('class.sm') set classSm(val: NgClassType) { this._base.cacheInput('classSm', val, true); };
62-
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
6366
@Input('class.md') set classMd(val: NgClassType) { this._base.cacheInput('classMd', val, true);};
64-
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
6567
@Input('class.lg') set classLg(val: NgClassType) { this._base.cacheInput('classLg', val, true); };
66-
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
6768
@Input('class.xl') set classXl(val: NgClassType) { this._base.cacheInput('classXl', val, true); };
6869

70+
@Input('class.lt-xs') set classLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
71+
@Input('class.lt-sm') set classLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true); };
72+
@Input('class.lt-md') set classLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
73+
@Input('class.lt-lg') set classLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };
74+
75+
@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
76+
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
77+
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
78+
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
79+
6980
/* tslint:enable */
7081
constructor(protected monitor: MediaMonitor,
7182
protected _bpRegistry: BreakPointRegistry,

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

Lines changed: 22 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -28,59 +28,32 @@ import {MediaMonitor} from '../../media-query/media-monitor';
2828
@Directive({
2929
selector: `
3030
[fxFlexAlign],
31-
[fxFlexAlign.xs],
32-
[fxFlexAlign.gt-xs],
33-
[fxFlexAlign.sm],
34-
[fxFlexAlign.gt-sm],
35-
[fxFlexAlign.md],
36-
[fxFlexAlign.gt-md],
37-
[fxFlexAlign.lg],
38-
[fxFlexAlign.gt-lg],
39-
[fxFlexAlign.xl]
31+
[fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl],
32+
[fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl],
33+
[fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]
4034
`
4135
})
4236
export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
4337

44-
@Input('fxFlexAlign') set align(val) {
45-
this._cacheInput('align', val);
46-
}
47-
48-
@Input('fxFlexAlign.xs') set alignXs(val) {
49-
this._cacheInput('alignXs', val);
50-
}
51-
52-
@Input('fxFlexAlign.gt-xs') set alignGtXs(val) {
53-
this._cacheInput('alignGtXs', val);
54-
};
55-
56-
@Input('fxFlexAlign.sm') set alignSm(val) {
57-
this._cacheInput('alignSm', val);
58-
};
59-
60-
@Input('fxFlexAlign.gt-sm') set alignGtSm(val) {
61-
this._cacheInput('alignGtSm', val);
62-
};
63-
64-
@Input('fxFlexAlign.md') set alignMd(val) {
65-
this._cacheInput('alignMd', val);
66-
};
67-
68-
@Input('fxFlexAlign.gt-md') set alignGtMd(val) {
69-
this._cacheInput('alignGtMd', val);
70-
};
71-
72-
@Input('fxFlexAlign.lg') set alignLg(val) {
73-
this._cacheInput('alignLg', val);
74-
};
75-
76-
@Input('fxFlexAlign.gt-lg') set alignGtLg(val) {
77-
this._cacheInput('alignGtLg', val);
78-
};
79-
80-
@Input('fxFlexAlign.xl') set alignXl(val) {
81-
this._cacheInput('alignXl', val);
82-
};
83-
38+
/* tslint:disable */
39+
@Input('fxFlexAlign') set align(val) { this._cacheInput('align', val); };
40+
@Input('fxFlexAlign.xs') set alignXs(val) { this._cacheInput('alignXs', val); };
41+
@Input('fxFlexAlign.sm') set alignSm(val) { this._cacheInput('alignSm', val); };
42+
@Input('fxFlexAlign.md') set alignMd(val) { this._cacheInput('alignMd', val); };
43+
@Input('fxFlexAlign.lg') set alignLg(val) { this._cacheInput('alignLg', val); };
44+
@Input('fxFlexAlign.xl') set alignXl(val) { this._cacheInput('alignXl', val); };
45+
46+
@Input('fxFlexAlign.lt-sm') set alignLtSm(val) { this._cacheInput('alignLtSm', val); };
47+
@Input('fxFlexAlign.lt-md') set alignLtMd(val) { this._cacheInput('alignLtMd', val); };
48+
@Input('fxFlexAlign.lt-lg') set alignLtLg(val) { this._cacheInput('alignLtLg', val); };
49+
@Input('fxFlexAlign.lt-xl') set alignLtXl(val) { this._cacheInput('alignLtXl', val); };
50+
51+
@Input('fxFlexAlign.gt-xs') set alignGtXs(val) { this._cacheInput('alignGtXs', val); };
52+
@Input('fxFlexAlign.gt-sm') set alignGtSm(val) { this._cacheInput('alignGtSm', val); };
53+
@Input('fxFlexAlign.gt-md') set alignGtMd(val) { this._cacheInput('alignGtMd', val); };
54+
@Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); };
55+
56+
/* tslint:enable */
8457
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
8558
super(monitor, elRef, renderer);
8659
}

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -28,29 +28,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
2828
*/
2929
@Directive({selector: `
3030
[fxFlexOffset],
31-
[fxFlexOffset.xs],
32-
[fxFlexOffset.gt-xs],
33-
[fxFlexOffset.sm],
34-
[fxFlexOffset.gt-sm],
35-
[fxFlexOffset.md],
36-
[fxFlexOffset.gt-md],
37-
[fxFlexOffset.lg],
38-
[fxFlexOffset.gt-lg],
39-
[fxFlexOffset.xl]
31+
[fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl],
32+
[fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl],
33+
[fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]
4034
`})
4135
export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
4236

37+
/* tslint:disable */
4338
@Input('fxFlexOffset') set offset(val) { this._cacheInput('offset', val); }
4439
@Input('fxFlexOffset.xs') set offsetXs(val) { this._cacheInput('offsetXs', val); }
45-
@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
4640
@Input('fxFlexOffset.sm') set offsetSm(val) { this._cacheInput('offsetSm', val); };
47-
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
4841
@Input('fxFlexOffset.md') set offsetMd(val) { this._cacheInput('offsetMd', val); };
49-
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
5042
@Input('fxFlexOffset.lg') set offsetLg(val) { this._cacheInput('offsetLg', val); };
51-
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };
5243
@Input('fxFlexOffset.xl') set offsetXl(val) { this._cacheInput('offsetXl', val); };
5344

45+
@Input('fxFlexOffset.lt-sm') set offsetLtSm(val) { this._cacheInput('offsetLtSm', val); };
46+
@Input('fxFlexOffset.lt-md') set offsetLtMd(val) { this._cacheInput('offsetLtMd', val); };
47+
@Input('fxFlexOffset.lt-lg') set offsetLtLg(val) { this._cacheInput('offsetLtLg', val); };
48+
@Input('fxFlexOffset.lt-xl') set offsetLtXl(val) { this._cacheInput('offsetLtXl', val); };
49+
50+
@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
51+
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
52+
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
53+
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };
54+
55+
/* tslint:enable */
5456
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
5557
super(monitor, elRef, renderer);
5658
}

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

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,29 +27,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
2727
*/
2828
@Directive({selector: `
2929
[fxFlexOrder],
30-
[fxFlexOrder.xs],
31-
[fxFlexOrder.gt-xs],
32-
[fxFlexOrder.sm],
33-
[fxFlexOrder.gt-sm],
34-
[fxFlexOrder.md],
35-
[fxFlexOrder.gt-md],
36-
[fxFlexOrder.lg],
37-
[fxFlexOrder.gt-lg],
38-
[fxFlexOrder.xl]
30+
[fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md], [fxFlexOrder.lg], [fxFlexOrder.xl],
31+
[fxFlexOrder.lt-sm], [fxFlexOrder.lt-md], [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl],
32+
[fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm], [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]
3933
`})
4034
export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
4135

36+
/* tslint:disable */
4237
@Input('fxFlexOrder') set order(val) { this._cacheInput('order', val); }
4338
@Input('fxFlexOrder.xs') set orderXs(val) { this._cacheInput('orderXs', val); }
44-
@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
4539
@Input('fxFlexOrder.sm') set orderSm(val) { this._cacheInput('orderSm', val); };
46-
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
4740
@Input('fxFlexOrder.md') set orderMd(val) { this._cacheInput('orderMd', val); };
48-
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
4941
@Input('fxFlexOrder.lg') set orderLg(val) { this._cacheInput('orderLg', val); };
50-
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };
5142
@Input('fxFlexOrder.xl') set orderXl(val) { this._cacheInput('orderXl', val); };
5243

44+
@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
45+
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
46+
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
47+
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };
48+
49+
@Input('fxFlexOrder.lt-sm') set orderLtSm(val) { this._cacheInput('orderLtSm', val); };
50+
@Input('fxFlexOrder.lt-md') set orderLtMd(val) { this._cacheInput('orderLtMd', val); };
51+
@Input('fxFlexOrder.lt-lg') set orderLtLg(val) { this._cacheInput('orderLtLg', val); };
52+
@Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };
53+
54+
/* tslint:enable */
5355
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
5456
super(monitor, elRef, renderer);
5557
}

0 commit comments

Comments
 (0)