Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(): value types for directives expecting simple string or string combinations #902

Closed
wants to merge 4 commits into from
Closed

refactor(): value types for directives expecting simple string or string combinations #902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c04866
feat(fxLayout): value types
vmasek Dec 3, 2018
a7a665a
feat(fxFlexAlign): value types
vmasek Dec 3, 2018
ed964fb
feat(fxShowHide): value types
vmasek Dec 3, 2018
defc3df
feat(fxLayoutAlign): value types
vmasek Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 40 additions & 33 deletions src/lib/extended/show-hide/show-hide.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,13 @@ import {Subscription} from 'rxjs';

const FALSY = ['false', false, 0];

type ShowHideValuesType
= ''
| 'true'
| 'false'
| number
;

/**
* For fxHide selectors, we invert the 'value'
* and assign to the equivalent fxShow selector cache
Expand Down Expand Up @@ -75,39 +82,39 @@ export class ShowHideDirective extends BaseDirective
protected _display: string = '';

/* tslint:disable */
@Input('fxShow') set show(val: string) { this._cacheInput('show', val); }
@Input('fxShow.xs') set showXs(val: string) {this._cacheInput('showXs', val);}
@Input('fxShow.sm') set showSm(val: string) {this._cacheInput('showSm', val); };
@Input('fxShow.md') set showMd(val: string) {this._cacheInput('showMd', val); };
@Input('fxShow.lg') set showLg(val: string) {this._cacheInput('showLg', val); };
@Input('fxShow.xl') set showXl(val: string) {this._cacheInput('showXl', val); };

@Input('fxShow.lt-sm') set showLtSm(val: string) { this._cacheInput('showLtSm', val); };
@Input('fxShow.lt-md') set showLtMd(val: string) { this._cacheInput('showLtMd', val); };
@Input('fxShow.lt-lg') set showLtLg(val: string) { this._cacheInput('showLtLg', val); };
@Input('fxShow.lt-xl') set showLtXl(val: string) { this._cacheInput('showLtXl', val); };

@Input('fxShow.gt-xs') set showGtXs(val: string) {this._cacheInput('showGtXs', val); };
@Input('fxShow.gt-sm') set showGtSm(val: string) {this._cacheInput('showGtSm', val); };
@Input('fxShow.gt-md') set showGtMd(val: string) {this._cacheInput('showGtMd', val); };
@Input('fxShow.gt-lg') set showGtLg(val: string) {this._cacheInput('showGtLg', val); };

@Input('fxHide') set hide(val: string) {this._cacheInput('show', negativeOf(val));}
@Input('fxHide.xs') set hideXs(val: string) {this._cacheInput('showXs', negativeOf(val));}
@Input('fxHide.sm') set hideSm(val: string) {this._cacheInput('showSm', negativeOf(val)); };
@Input('fxHide.md') set hideMd(val: string) {this._cacheInput('showMd', negativeOf(val)); };
@Input('fxHide.lg') set hideLg(val: string) {this._cacheInput('showLg', negativeOf(val)); };
@Input('fxHide.xl') set hideXl(val: string) {this._cacheInput('showXl', negativeOf(val)); };

@Input('fxHide.lt-sm') set hideLtSm(val: string) { this._cacheInput('showLtSm', negativeOf(val)); };
@Input('fxHide.lt-md') set hideLtMd(val: string) { this._cacheInput('showLtMd', negativeOf(val)); };
@Input('fxHide.lt-lg') set hideLtLg(val: string) { this._cacheInput('showLtLg', negativeOf(val)); };
@Input('fxHide.lt-xl') set hideLtXl(val: string) { this._cacheInput('showLtXl', negativeOf(val)); };

@Input('fxHide.gt-xs') set hideGtXs(val: string) {this._cacheInput('showGtXs', negativeOf(val)); };
@Input('fxHide.gt-sm') set hideGtSm(val: string) {this._cacheInput('showGtSm', negativeOf(val)); };
@Input('fxHide.gt-md') set hideGtMd(val: string) {this._cacheInput('showGtMd', negativeOf(val)); };
@Input('fxHide.gt-lg') set hideGtLg(val: string) {this._cacheInput('showGtLg', negativeOf(val)); };
@Input('fxShow') set show(val: ShowHideValuesType) { this._cacheInput('show', val); }
@Input('fxShow.xs') set showXs(val: ShowHideValuesType) {this._cacheInput('showXs', val);}
@Input('fxShow.sm') set showSm(val: ShowHideValuesType) {this._cacheInput('showSm', val); };
@Input('fxShow.md') set showMd(val: ShowHideValuesType) {this._cacheInput('showMd', val); };
@Input('fxShow.lg') set showLg(val: ShowHideValuesType) {this._cacheInput('showLg', val); };
@Input('fxShow.xl') set showXl(val: ShowHideValuesType) {this._cacheInput('showXl', val); };

@Input('fxShow.lt-sm') set showLtSm(val: ShowHideValuesType) { this._cacheInput('showLtSm', val); };
@Input('fxShow.lt-md') set showLtMd(val: ShowHideValuesType) { this._cacheInput('showLtMd', val); };
@Input('fxShow.lt-lg') set showLtLg(val: ShowHideValuesType) { this._cacheInput('showLtLg', val); };
@Input('fxShow.lt-xl') set showLtXl(val: ShowHideValuesType) { this._cacheInput('showLtXl', val); };

@Input('fxShow.gt-xs') set showGtXs(val: ShowHideValuesType) {this._cacheInput('showGtXs', val); };
@Input('fxShow.gt-sm') set showGtSm(val: ShowHideValuesType) {this._cacheInput('showGtSm', val); };
@Input('fxShow.gt-md') set showGtMd(val: ShowHideValuesType) {this._cacheInput('showGtMd', val); };
@Input('fxShow.gt-lg') set showGtLg(val: ShowHideValuesType) {this._cacheInput('showGtLg', val); };

@Input('fxHide') set hide(val: ShowHideValuesType) {this._cacheInput('show', negativeOf(val));}
@Input('fxHide.xs') set hideXs(val: ShowHideValuesType) {this._cacheInput('showXs', negativeOf(val));}
@Input('fxHide.sm') set hideSm(val: ShowHideValuesType) {this._cacheInput('showSm', negativeOf(val)); };
@Input('fxHide.md') set hideMd(val: ShowHideValuesType) {this._cacheInput('showMd', negativeOf(val)); };
@Input('fxHide.lg') set hideLg(val: ShowHideValuesType) {this._cacheInput('showLg', negativeOf(val)); };
@Input('fxHide.xl') set hideXl(val: ShowHideValuesType) {this._cacheInput('showXl', negativeOf(val)); };

@Input('fxHide.lt-sm') set hideLtSm(val: ShowHideValuesType) { this._cacheInput('showLtSm', negativeOf(val)); };
@Input('fxHide.lt-md') set hideLtMd(val: ShowHideValuesType) { this._cacheInput('showLtMd', negativeOf(val)); };
@Input('fxHide.lt-lg') set hideLtLg(val: ShowHideValuesType) { this._cacheInput('showLtLg', negativeOf(val)); };
@Input('fxHide.lt-xl') set hideLtXl(val: ShowHideValuesType) { this._cacheInput('showLtXl', negativeOf(val)); };

@Input('fxHide.gt-xs') set hideGtXs(val: ShowHideValuesType) {this._cacheInput('showGtXs', negativeOf(val)); };
@Input('fxHide.gt-sm') set hideGtSm(val: ShowHideValuesType) {this._cacheInput('showGtSm', negativeOf(val)); };
@Input('fxHide.gt-md') set hideGtMd(val: ShowHideValuesType) {this._cacheInput('showGtMd', negativeOf(val)); };
@Input('fxHide.gt-lg') set hideGtLg(val: ShowHideValuesType) {this._cacheInput('showGtLg', negativeOf(val)); };
/* tslint:enable */

@ViewChild(FlexDirective) protected _flexChild: FlexDirective | null = null;
Expand Down
42 changes: 25 additions & 17 deletions src/lib/flex/flex-align/flex-align.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,17 @@ import {
StyleUtils,
} from '@angular/flex-layout/core';

type FlexAlignValuesType
= 'start'
| 'center'
| 'end'
| 'baseline'
| 'stretch'
;

@Injectable({providedIn: 'root'})
export class FlexAlignStyleBuilder extends StyleBuilder {
buildStyles(input: string) {
buildStyles(input: FlexAlignValuesType) {
const styles: StyleDefinition = {};

// Cross-axis
Expand Down Expand Up @@ -62,22 +70,22 @@ export class FlexAlignStyleBuilder extends StyleBuilder {
export class FlexAlignDirective extends BaseDirective implements OnInit, OnChanges, OnDestroy {

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

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

@Input('fxFlexAlign.gt-xs') set alignGtXs(val: string) { this._cacheInput('alignGtXs', val); };
@Input('fxFlexAlign.gt-sm') set alignGtSm(val: string) { this._cacheInput('alignGtSm', val); };
@Input('fxFlexAlign.gt-md') set alignGtMd(val: string) { this._cacheInput('alignGtMd', val); };
@Input('fxFlexAlign.gt-lg') set alignGtLg(val: string) { this._cacheInput('alignGtLg', val); };
@Input('fxFlexAlign') set align(val: FlexAlignValuesType) { this._cacheInput('align', val); };
@Input('fxFlexAlign.xs') set alignXs(val: FlexAlignValuesType) { this._cacheInput('alignXs', val); };
@Input('fxFlexAlign.sm') set alignSm(val: FlexAlignValuesType) { this._cacheInput('alignSm', val); };
@Input('fxFlexAlign.md') set alignMd(val: FlexAlignValuesType) { this._cacheInput('alignMd', val); };
@Input('fxFlexAlign.lg') set alignLg(val: FlexAlignValuesType) { this._cacheInput('alignLg', val); };
@Input('fxFlexAlign.xl') set alignXl(val: FlexAlignValuesType) { this._cacheInput('alignXl', val); };

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

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

/* tslint:enable */
constructor(monitor: MediaMonitor,
Expand Down
117 changes: 100 additions & 17 deletions src/lib/flex/layout-align/layout-align.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,97 @@ import {extendObject} from '../../utils/object-extend';
import {Layout, LayoutDirective} from '../layout/layout';
import {LAYOUT_VALUES, isFlowHorizontal} from '../../utils/layout-validator';

type LayoutAlignMainAxisValuesType
= ''
| 'start' | 'flex-start'
| 'flex-start'
| 'center'
| 'end' | 'flex-end'
| 'space-around'
| 'space-between'
| 'space-evenly'
;

type LayoutAlignCrossAxisValuesType
= LayoutAlignMainAxisValuesType
| 'stretch'
| 'baseline'
;

/**
* Combinations of all flex layout align values
*
* @see https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API
*/
type LayoutAlignValuesType
= LayoutAlignMainAxisValuesType
// Main Axis combinations with Cross Axis - start (flex-start)
| 'start start' | 'start flex-start'
| 'center start' | 'center flex-start'
| 'end start' | 'end flex-start'
| 'space-around start' | 'space-around flex-start'
| 'space-between start' | 'space-between flex-start'
| 'space-evenly start' | 'space-evenly flex-start'
// Main Axis combinations with Cross Axis - center
| 'start center'
| 'center center'
| 'end center'
| 'space-around center'
| 'space-between center'
| 'space-evenly center'
// Main Axis combinations with Cross Axis - end (flex-end)
| 'start end' | 'start flex-end'
| 'center end' | 'center flex-end'
| 'end end' | 'end flex-end'
| 'space-around end' | 'space-around flex-end'
| 'space-between end' | 'space-between flex-end'
| 'space-evenly end' | 'space-evenly flex-end'
// Main Axis combinations with Cross Axis - space-around
| 'start space-around'
| 'center space-around'
| 'end space-around'
| 'space-around space-around'
| 'space-between space-around'
| 'space-evenly space-around'
// Main Axis combinations with Cross Axis - space-between
| 'start space-between'
| 'center space-between'
| 'end space-between'
| 'space-around space-between'
| 'space-between space-between'
| 'space-evenly space-between'
// Main Axis combinations with Cross Axis - space-evenly
| 'start space-evenly'
| 'center space-evenly'
| 'end space-evenly'
| 'space-around space-evenly'
| 'space-between space-evenly'
| 'space-evenly space-evenly'
// Main Axis combinations with Cross Axis - stretch
| 'start stretch'
| 'center stretch'
| 'end stretch'
| 'space-around stretch'
| 'space-between stretch'
| 'space-evenly stretch'
// Main Axis combinations with Cross Axis - baseline
| 'start baseline'
| 'center baseline'
| 'end baseline'
| 'space-around baseline'
| 'space-between baseline'
| 'space-evenly baseline'
;

export interface LayoutAlignParent {
layout: string;
}

@Injectable({providedIn: 'root'})
export class LayoutAlignStyleBuilder extends StyleBuilder {
buildStyles(align: string, parent: LayoutAlignParent) {
const css: StyleDefinition = {}, [mainAxis, crossAxis] = align.split(' ');
const css: StyleDefinition = {}, [mainAxis, crossAxis] =
align.split(' ') as [LayoutAlignMainAxisValuesType, LayoutAlignCrossAxisValuesType];

// Main axis
switch (mainAxis) {
Expand Down Expand Up @@ -129,22 +212,22 @@ export class LayoutAlignDirective extends BaseDirective implements OnInit, OnCha
protected _layoutWatcher?: Subscription;

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

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

@Input('fxLayoutAlign.lt-sm') set alignLtSm(val: string) { this._cacheInput('alignLtSm', val); };
@Input('fxLayoutAlign.lt-md') set alignLtMd(val: string) { this._cacheInput('alignLtMd', val); };
@Input('fxLayoutAlign.lt-lg') set alignLtLg(val: string) { this._cacheInput('alignLtLg', val); };
@Input('fxLayoutAlign.lt-xl') set alignLtXl(val: string) { this._cacheInput('alignLtXl', val); };
@Input('fxLayoutAlign') set align(val: LayoutAlignValuesType) { this._cacheInput('align', val); }
@Input('fxLayoutAlign.xs') set alignXs(val: LayoutAlignValuesType) { this._cacheInput('alignXs', val); }
@Input('fxLayoutAlign.sm') set alignSm(val: LayoutAlignValuesType) { this._cacheInput('alignSm', val); };
@Input('fxLayoutAlign.md') set alignMd(val: LayoutAlignValuesType) { this._cacheInput('alignMd', val); };
@Input('fxLayoutAlign.lg') set alignLg(val: LayoutAlignValuesType) { this._cacheInput('alignLg', val); };
@Input('fxLayoutAlign.xl') set alignXl(val: LayoutAlignValuesType) { this._cacheInput('alignXl', val); };

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

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

/* tslint:enable */
constructor(
Expand Down
44 changes: 26 additions & 18 deletions src/lib/flex/layout/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,22 @@ import {Observable, ReplaySubject} from 'rxjs';
import {buildLayoutCSS} from '../../utils/layout-validator';

export type Layout = {
direction: string;
direction: LayoutValuesType;
wrap: boolean;
};

export interface LayoutParent {
announcer: ReplaySubject<Layout>;
}

type LayoutValuesType
= ''
| 'row'
| 'row-reverse'
| 'column'
| 'column-reverse'
;

@Injectable({providedIn: 'root'})
export class LayoutStyleBuilder extends StyleBuilder {
buildStyles(input: string, _parent: LayoutParent) {
Expand All @@ -44,7 +52,7 @@ export class LayoutStyleBuilder extends StyleBuilder {
}
sideEffect(_input: string, styles: StyleDefinition, parent: LayoutParent) {
parent.announcer.next({
direction: styles['flex-direction'] as string,
direction: styles['flex-direction'] as LayoutValuesType,
wrap: !!styles['flex-wrap'] && styles['flex-wrap'] !== 'nowrap'
});
}
Expand Down Expand Up @@ -78,22 +86,22 @@ export class LayoutDirective extends BaseDirective implements OnInit, OnChanges,
layout$: Observable<Layout>;

/* tslint:disable */
@Input('fxLayout') set layout(val: string) { this._cacheInput('layout', val); };
@Input('fxLayout.xs') set layoutXs(val: string) { this._cacheInput('layoutXs', val); };
@Input('fxLayout.sm') set layoutSm(val: string) { this._cacheInput('layoutSm', val); };
@Input('fxLayout.md') set layoutMd(val: string) { this._cacheInput('layoutMd', val); };
@Input('fxLayout.lg') set layoutLg(val: string) { this._cacheInput('layoutLg', val); };
@Input('fxLayout.xl') set layoutXl(val: string) { this._cacheInput('layoutXl', val); };

@Input('fxLayout.gt-xs') set layoutGtXs(val: string) { this._cacheInput('layoutGtXs', val); };
@Input('fxLayout.gt-sm') set layoutGtSm(val: string) { this._cacheInput('layoutGtSm', val); };
@Input('fxLayout.gt-md') set layoutGtMd(val: string) { this._cacheInput('layoutGtMd', val); };
@Input('fxLayout.gt-lg') set layoutGtLg(val: string) { this._cacheInput('layoutGtLg', val); };

@Input('fxLayout.lt-sm') set layoutLtSm(val: string) { this._cacheInput('layoutLtSm', val); };
@Input('fxLayout.lt-md') set layoutLtMd(val: string) { this._cacheInput('layoutLtMd', val); };
@Input('fxLayout.lt-lg') set layoutLtLg(val: string) { this._cacheInput('layoutLtLg', val); };
@Input('fxLayout.lt-xl') set layoutLtXl(val: string) { this._cacheInput('layoutLtXl', val); };
@Input('fxLayout') set layout(val: LayoutValuesType) { this._cacheInput('layout', val); };
@Input('fxLayout.xs') set layoutXs(val: LayoutValuesType) { this._cacheInput('layoutXs', val); };
@Input('fxLayout.sm') set layoutSm(val: LayoutValuesType) { this._cacheInput('layoutSm', val); };
@Input('fxLayout.md') set layoutMd(val: LayoutValuesType) { this._cacheInput('layoutMd', val); };
@Input('fxLayout.lg') set layoutLg(val: LayoutValuesType) { this._cacheInput('layoutLg', val); };
@Input('fxLayout.xl') set layoutXl(val: LayoutValuesType) { this._cacheInput('layoutXl', val); };

@Input('fxLayout.gt-xs') set layoutGtXs(val: LayoutValuesType) { this._cacheInput('layoutGtXs', val); };
@Input('fxLayout.gt-sm') set layoutGtSm(val: LayoutValuesType) { this._cacheInput('layoutGtSm', val); };
@Input('fxLayout.gt-md') set layoutGtMd(val: LayoutValuesType) { this._cacheInput('layoutGtMd', val); };
@Input('fxLayout.gt-lg') set layoutGtLg(val: LayoutValuesType) { this._cacheInput('layoutGtLg', val); };

@Input('fxLayout.lt-sm') set layoutLtSm(val: LayoutValuesType) { this._cacheInput('layoutLtSm', val); };
@Input('fxLayout.lt-md') set layoutLtMd(val: LayoutValuesType) { this._cacheInput('layoutLtMd', val); };
@Input('fxLayout.lt-lg') set layoutLtLg(val: LayoutValuesType) { this._cacheInput('layoutLtLg', val); };
@Input('fxLayout.lt-xl') set layoutLtXl(val: LayoutValuesType) { this._cacheInput('layoutLtXl', val); };
/* tslint:enable */

constructor(monitor: MediaMonitor,
Expand Down