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

Commit

Permalink
feat(breakpoints): support custom breakpoints and enhanced selectors
Browse files Browse the repository at this point in the history 
* 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)
  • Loading branch information
@ThomasBurleson
ThomasBurleson committed Mar 11, 2017
1 parent 044632e commit 71a6f36
Show file tree
Hide file tree
Showing 59 changed files with 1,473 additions and 782 deletions.
2 changes: 1 addition & 1 deletion src/demo-app/app/docs-layout-responsive/responsiveFlexDirective.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-flex-directive',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/docs-layout-responsive/responsiveFlexOrder.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-flex-order',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-row-column',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Subscription } from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-responsive-style',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/github-issues/issue.135.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-issue-135',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/github-issues/issue.181.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

@Component({
selector: 'demo-issue-181',
Expand Down
2 changes: 1 addition & 1 deletion src/demo-app/app/github-issues/issue.197.demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {Subscription} from "rxjs/Subscription";
import 'rxjs/add/operator/filter';

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

// [ngStyle="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"
// style="font-size:10px; color:black; text-align:left;"
Expand Down
32 changes: 27 additions & 5 deletions src/lib/flexbox/_module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,17 @@ import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';

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

import {BreakPoint} from '../media-query/breakpoints/break-point';
import {
IncludeOptions,
DEFAULT_BREAKPOINTS_PROVIDER,
CUSTOM_BREAKPOINTS_PROVIDER_FACTORY
} from '../media-query/breakpoints/break-points-provider';
import {MEDIA_MONITOR_PROVIDER} from '../media-query/media-monitor-provider';
import {OBSERVABLE_MEDIA_PROVIDER} from '../media-query/observable-media-provider';

import {FlexDirective} from './api/flex';
import {LayoutDirective} from './api/layout';
import {ShowHideDirective} from './api/show-hide';
Expand Down Expand Up @@ -55,13 +63,27 @@ const ALL_DIRECTIVES = [
declarations: ALL_DIRECTIVES,
imports: [MediaQueriesModule],
exports: [MediaQueriesModule, ...ALL_DIRECTIVES],
providers: [MediaMonitor]
providers: [
MEDIA_MONITOR_PROVIDER,
DEFAULT_BREAKPOINTS_PROVIDER, // Extend defaults with internal custom breakpoints
OBSERVABLE_MEDIA_PROVIDER
]
})
export class FlexLayoutModule {
/** @deprecated */
static forRoot(): ModuleWithProviders {
/**
* External uses can easily add custom breakpoints AND include internal orientations
* breakpoints; which are not available by default.
*
* !! Selector aliases are not auto-configured. Developers must subclass
* the API directives to support extra selectors for the orientations breakpoints !!
*/
static provideBreakPoints(breakpoints: BreakPoint[],
includes ?: IncludeOptions): ModuleWithProviders {
return {
ngModule: FlexLayoutModule
ngModule: FlexLayoutModule,
providers: [
CUSTOM_BREAKPOINTS_PROVIDER_FACTORY(breakpoints, includes || {orientations: false})
]
};
}
}
6 changes: 3 additions & 3 deletions src/lib/flexbox/api/class.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';

import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
import {MatchMedia} from '../../media-query/match-media';
import {ObservableMedia} from '../../media-query/observable-media-service';
import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
import {ObservableMedia} from '../../media-query/observable-media';
import {DEFAULT_BREAKPOINTS_PROVIDER} from '../../media-query/breakpoints/break-points-provider';
import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-registry';

import {customMatchers} from '../../utils/testing/custom-matchers';
Expand All @@ -40,7 +40,7 @@ describe('class directive', () => {
imports: [CommonModule, MediaQueriesModule],
declarations: [TestClassComponent, ClassDirective],
providers: [
BreakPointRegistry, BreakPointsProvider,
BreakPointRegistry, DEFAULT_BREAKPOINTS_PROVIDER,
{provide: MatchMedia, useClass: MockMatchMedia}
]
});
Expand Down
43 changes: 27 additions & 16 deletions src/lib/flexbox/api/class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,40 +32,51 @@ export type NgClassType = string | string[] | Set<string> | {[klass: string]: an
*/
@Directive({
selector: `
[ngClass.xs], [class.xs],
[ngClass.gt-xs], [class.gt-xs],
[ngClass.sm], [class.sm],
[ngClass.gt-sm], [class.gt-sm],
[ngClass.md], [class.md],
[ngClass.gt-md], [class.gt-md],
[ngClass.lg], [class.lg],
[ngClass.gt-lg], [class.gt-lg]
[class.xs], [class.sm], [class.md], [class.lg], [class.xl],
[class.lt-sm], [class.lt-md], [class.lt-lg], [class.lt-xl],
[class.gt-xs], [class.gt-sm], [class.gt-md], [class.gt-lg],
[ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],
[ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],
[ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]
`
})
export class ClassDirective extends NgClass implements OnInit, OnChanges, OnDestroy {

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

@Input('ngClass.lt-xs') set ngClassLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
@Input('ngClass.lt-sm') set ngClassLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true);} ;
@Input('ngClass.lt-md') set ngClassLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
@Input('ngClass.lt-lg') set ngClassLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };

@Input('ngClass.gt-xs') set ngClassGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('ngClass.gt-sm') set ngClassGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true);} ;
@Input('ngClass.gt-md') set ngClassGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('ngClass.gt-lg') set ngClassGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };

/** Deprecated selectors */
@Input('class.xs') set classXs(val: NgClassType) { this._base.cacheInput('classXs', val, true); }
@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('class.sm') set classSm(val: NgClassType) { this._base.cacheInput('classSm', val, true); };
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
@Input('class.md') set classMd(val: NgClassType) { this._base.cacheInput('classMd', val, true);};
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('class.lg') set classLg(val: NgClassType) { this._base.cacheInput('classLg', val, true); };
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };
@Input('class.xl') set classXl(val: NgClassType) { this._base.cacheInput('classXl', val, true); };

@Input('class.lt-xs') set classLtXs(val: NgClassType) { this._base.cacheInput('classLtXs', val, true); };
@Input('class.lt-sm') set classLtSm(val: NgClassType) { this._base.cacheInput('classLtSm', val, true); };
@Input('class.lt-md') set classLtMd(val: NgClassType) { this._base.cacheInput('classLtMd', val, true);};
@Input('class.lt-lg') set classLtLg(val: NgClassType) { this._base.cacheInput('classLtLg', val, true); };

@Input('class.gt-xs') set classGtXs(val: NgClassType) { this._base.cacheInput('classGtXs', val, true); };
@Input('class.gt-sm') set classGtSm(val: NgClassType) { this._base.cacheInput('classGtSm', val, true); };
@Input('class.gt-md') set classGtMd(val: NgClassType) { this._base.cacheInput('classGtMd', val, true);};
@Input('class.gt-lg') set classGtLg(val: NgClassType) { this._base.cacheInput('classGtLg', val, true); };

/* tslint:enable */
constructor(protected monitor: MediaMonitor,
protected _bpRegistry: BreakPointRegistry,
Expand Down
71 changes: 22 additions & 49 deletions src/lib/flexbox/api/flex-align.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,59 +28,32 @@ import {MediaMonitor} from '../../media-query/media-monitor';
@Directive({
selector: `
[fxFlexAlign],
[fxFlexAlign.xs],
[fxFlexAlign.gt-xs],
[fxFlexAlign.sm],
[fxFlexAlign.gt-sm],
[fxFlexAlign.md],
[fxFlexAlign.gt-md],
[fxFlexAlign.lg],
[fxFlexAlign.gt-lg],
[fxFlexAlign.xl]
[fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md], [fxFlexAlign.lg], [fxFlexAlign.xl],
[fxFlexAlign.lt-sm], [fxFlexAlign.lt-md], [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl],
[fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm], [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]
`
})
export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

@Input('fxFlexAlign') set align(val) {
this._cacheInput('align', val);
}

@Input('fxFlexAlign.xs') set alignXs(val) {
this._cacheInput('alignXs', val);
}

@Input('fxFlexAlign.gt-xs') set alignGtXs(val) {
this._cacheInput('alignGtXs', val);
};

@Input('fxFlexAlign.sm') set alignSm(val) {
this._cacheInput('alignSm', val);
};

@Input('fxFlexAlign.gt-sm') set alignGtSm(val) {
this._cacheInput('alignGtSm', val);
};

@Input('fxFlexAlign.md') set alignMd(val) {
this._cacheInput('alignMd', val);
};

@Input('fxFlexAlign.gt-md') set alignGtMd(val) {
this._cacheInput('alignGtMd', val);
};

@Input('fxFlexAlign.lg') set alignLg(val) {
this._cacheInput('alignLg', val);
};

@Input('fxFlexAlign.gt-lg') set alignGtLg(val) {
this._cacheInput('alignGtLg', val);
};

@Input('fxFlexAlign.xl') set alignXl(val) {
this._cacheInput('alignXl', val);
};

/* tslint:disable */
@Input('fxFlexAlign') set align(val) { this._cacheInput('align', val); };
@Input('fxFlexAlign.xs') set alignXs(val) { this._cacheInput('alignXs', val); };
@Input('fxFlexAlign.sm') set alignSm(val) { this._cacheInput('alignSm', val); };
@Input('fxFlexAlign.md') set alignMd(val) { this._cacheInput('alignMd', val); };
@Input('fxFlexAlign.lg') set alignLg(val) { this._cacheInput('alignLg', val); };
@Input('fxFlexAlign.xl') set alignXl(val) { this._cacheInput('alignXl', val); };

@Input('fxFlexAlign.lt-sm') set alignLtSm(val) { this._cacheInput('alignLtSm', val); };
@Input('fxFlexAlign.lt-md') set alignLtMd(val) { this._cacheInput('alignLtMd', val); };
@Input('fxFlexAlign.lt-lg') set alignLtLg(val) { this._cacheInput('alignLtLg', val); };
@Input('fxFlexAlign.lt-xl') set alignLtXl(val) { this._cacheInput('alignLtXl', val); };

@Input('fxFlexAlign.gt-xs') set alignGtXs(val) { this._cacheInput('alignGtXs', val); };
@Input('fxFlexAlign.gt-sm') set alignGtSm(val) { this._cacheInput('alignGtSm', val); };
@Input('fxFlexAlign.gt-md') set alignGtMd(val) { this._cacheInput('alignGtMd', val); };
@Input('fxFlexAlign.gt-lg') set alignGtLg(val) { this._cacheInput('alignGtLg', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
28 changes: 15 additions & 13 deletions src/lib/flexbox/api/flex-offset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
*/
@Directive({selector: `
[fxFlexOffset],
[fxFlexOffset.xs],
[fxFlexOffset.gt-xs],
[fxFlexOffset.sm],
[fxFlexOffset.gt-sm],
[fxFlexOffset.md],
[fxFlexOffset.gt-md],
[fxFlexOffset.lg],
[fxFlexOffset.gt-lg],
[fxFlexOffset.xl]
[fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md], [fxFlexOffset.lg], [fxFlexOffset.xl],
[fxFlexOffset.lt-sm], [fxFlexOffset.lt-md], [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl],
[fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm], [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]
`})
export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

/* tslint:disable */
@Input('fxFlexOffset') set offset(val) { this._cacheInput('offset', val); }
@Input('fxFlexOffset.xs') set offsetXs(val) { this._cacheInput('offsetXs', val); }
@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
@Input('fxFlexOffset.sm') set offsetSm(val) { this._cacheInput('offsetSm', val); };
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
@Input('fxFlexOffset.md') set offsetMd(val) { this._cacheInput('offsetMd', val); };
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
@Input('fxFlexOffset.lg') set offsetLg(val) { this._cacheInput('offsetLg', val); };
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };
@Input('fxFlexOffset.xl') set offsetXl(val) { this._cacheInput('offsetXl', val); };

@Input('fxFlexOffset.lt-sm') set offsetLtSm(val) { this._cacheInput('offsetLtSm', val); };
@Input('fxFlexOffset.lt-md') set offsetLtMd(val) { this._cacheInput('offsetLtMd', val); };
@Input('fxFlexOffset.lt-lg') set offsetLtLg(val) { this._cacheInput('offsetLtLg', val); };
@Input('fxFlexOffset.lt-xl') set offsetLtXl(val) { this._cacheInput('offsetLtXl', val); };

@Input('fxFlexOffset.gt-xs') set offsetGtXs(val) { this._cacheInput('offsetGtXs', val); };
@Input('fxFlexOffset.gt-sm') set offsetGtSm(val) { this._cacheInput('offsetGtSm', val); };
@Input('fxFlexOffset.gt-md') set offsetGtMd(val) { this._cacheInput('offsetGtMd', val); };
@Input('fxFlexOffset.gt-lg') set offsetGtLg(val) { this._cacheInput('offsetGtLg', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
28 changes: 15 additions & 13 deletions src/lib/flexbox/api/flex-order.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,31 @@ import {MediaMonitor} from '../../media-query/media-monitor';
*/
@Directive({selector: `
[fxFlexOrder],
[fxFlexOrder.xs],
[fxFlexOrder.gt-xs],
[fxFlexOrder.sm],
[fxFlexOrder.gt-sm],
[fxFlexOrder.md],
[fxFlexOrder.gt-md],
[fxFlexOrder.lg],
[fxFlexOrder.gt-lg],
[fxFlexOrder.xl]
[fxFlexOrder.xs], [fxFlexOrder.sm], [fxFlexOrder.md], [fxFlexOrder.lg], [fxFlexOrder.xl],
[fxFlexOrder.lt-sm], [fxFlexOrder.lt-md], [fxFlexOrder.lt-lg], [fxFlexOrder.lt-xl],
[fxFlexOrder.gt-xs], [fxFlexOrder.gt-sm], [fxFlexOrder.gt-md], [fxFlexOrder.gt-lg]
`})
export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {

/* tslint:disable */
@Input('fxFlexOrder') set order(val) { this._cacheInput('order', val); }
@Input('fxFlexOrder.xs') set orderXs(val) { this._cacheInput('orderXs', val); }
@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
@Input('fxFlexOrder.sm') set orderSm(val) { this._cacheInput('orderSm', val); };
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
@Input('fxFlexOrder.md') set orderMd(val) { this._cacheInput('orderMd', val); };
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
@Input('fxFlexOrder.lg') set orderLg(val) { this._cacheInput('orderLg', val); };
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };
@Input('fxFlexOrder.xl') set orderXl(val) { this._cacheInput('orderXl', val); };

@Input('fxFlexOrder.gt-xs') set orderGtXs(val) { this._cacheInput('orderGtXs', val); };
@Input('fxFlexOrder.gt-sm') set orderGtSm(val) { this._cacheInput('orderGtSm', val); };
@Input('fxFlexOrder.gt-md') set orderGtMd(val) { this._cacheInput('orderGtMd', val); };
@Input('fxFlexOrder.gt-lg') set orderGtLg(val) { this._cacheInput('orderGtLg', val); };

@Input('fxFlexOrder.lt-sm') set orderLtSm(val) { this._cacheInput('orderLtSm', val); };
@Input('fxFlexOrder.lt-md') set orderLtMd(val) { this._cacheInput('orderLtMd', val); };
@Input('fxFlexOrder.lt-lg') set orderLtLg(val) { this._cacheInput('orderLtLg', val); };
@Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };

/* tslint:enable */
constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
super(monitor, elRef, renderer);
}
Expand Down
Loading

0 comments on commit 71a6f36

Please sign in to comment.