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

Commit e467aa1

Browse files
ThomasBurlesonThomasBurleson
committed
feat(breakpoints): support custom breakpoints and enhanced selectors
* Add FlexLayoutModule.provideBreakPoints() to easily * add custom breakpoints to defaults * replace defaults with custom breakpoints * Add extended breakpoints from Material2: handset, tablet, web * include orientations for Portrait and Landscape * 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 2340a19 commit e467aa1

Some content is hidden

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

46 files changed

+1314
-737
lines changed

‎src/lib/flexbox/_module.ts

+25-4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ import {ModuleWithProviders, NgModule} from '@angular/core';
1212
import {MediaMonitor} from '../media-query/media-monitor';
1313
import {MediaQueriesModule} from '../media-query/_module';
1414

15+
import {BreakPoint} from '../media-query/breakpoints/break-point';
16+
import {
17+
provideCustomBreakPoints,
18+
BreakPointsProvider
19+
} from '../media-query/breakpoints/break-points-provider';
20+
1521
import {FlexDirective} from './api/flex';
1622
import {LayoutDirective} from './api/layout';
1723
import {ShowHideDirective} from './api/show-hide';
@@ -48,20 +54,35 @@ const ALL_DIRECTIVES = [
4854
StyleDirective,
4955
];
5056

57+
/**
58+
* @deprecated, use FlexLayoutModule.provideLayout instead!
59+
*/
60+
export function provideBreakPoints(_custom: BreakPoint[], excludeDefaults = false): any[] {
61+
return [
62+
MediaMonitor,
63+
provideCustomBreakPoints(_custom, excludeDefaults)
64+
];
65+
}
66+
5167
/**
5268
*
5369
*/
5470
@NgModule({
5571
declarations: ALL_DIRECTIVES,
5672
imports: [MediaQueriesModule],
5773
exports: [MediaQueriesModule, ...ALL_DIRECTIVES],
58-
providers: [MediaMonitor]
74+
providers: [
75+
MediaMonitor,
76+
BreakPointsProvider // Extend defaults with internal custom breakpoints
77+
]
5978
})
6079
export class FlexLayoutModule {
61-
/** @deprecated */
62-
static forRoot(): ModuleWithProviders {
80+
/** External uses can easily add custom breakpoints */
81+
static provideBreakPoints(breakpoints: BreakPoint[],
82+
excludeDefaults = false): ModuleWithProviders {
6383
return {
64-
ngModule: FlexLayoutModule
84+
ngModule: FlexLayoutModule,
85+
providers: provideBreakPoints(breakpoints, excludeDefaults)
6586
};
6687
}
6788
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
1414
import {MockMatchMedia} from '../../media-query/mock/mock-match-media';
1515
import {MatchMedia} from '../../media-query/match-media';
1616
import {ObservableMedia} from '../../media-query/observable-media-service';
17-
import {BreakPointsProvider} from '../../media-query/breakpoints/break-points';
17+
import {BreakPointsProvider} 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';

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

+27-16
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

+22-49
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

+15-13
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

+15-13
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)