diff --git a/src/lib/core/breakpoints/break-point-registry.ts b/src/lib/core/breakpoints/break-point-registry.ts index 598e32591..f1fc19358 100644 --- a/src/lib/core/breakpoints/break-point-registry.ts +++ b/src/lib/core/breakpoints/break-point-registry.ts @@ -9,7 +9,7 @@ import {Injectable, Inject} from '@angular/core'; import {BreakPoint} from './break-point'; import {BREAKPOINTS} from './break-points-token'; -import {sortAscendingPriority} from './breakpoint-tools'; +import {sortAscendingPriority} from '../utils/sort'; export type OptionalBreakPoint = BreakPoint | null; diff --git a/src/lib/core/breakpoints/breakpoint-tools.ts b/src/lib/core/breakpoints/breakpoint-tools.ts index 3938ab9e5..cda47b7cc 100644 --- a/src/lib/core/breakpoints/breakpoint-tools.ts +++ b/src/lib/core/breakpoints/breakpoint-tools.ts @@ -5,8 +5,6 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ - -import {OptionalBreakPoint} from './break-point-registry'; import {BreakPoint} from './break-point'; import {extendObject} from '../../utils/object-extend'; @@ -64,16 +62,3 @@ export function mergeByAlias(defaults: BreakPoint[], custom: BreakPoint[] = []): return validateSuffixes(Object.keys(dict).map(k => dict[k])); } - -/** HOF to sort the breakpoints by priority */ -export function sortDescendingPriority(a: OptionalBreakPoint, b: OptionalBreakPoint): number { - const priorityA = a ? a.priority || 0 : 0; - const priorityB = b ? b.priority || 0 : 0; - return priorityB - priorityA; -} - -export function sortAscendingPriority(a: BreakPoint, b: BreakPoint): number { - const pA = a.priority || 0; - const pB = b.priority || 0; - return pA - pB; -} diff --git a/src/lib/core/breakpoints/data/break-points.spec.ts b/src/lib/core/breakpoints/data/break-points.spec.ts index 100318fbb..9a67580e4 100644 --- a/src/lib/core/breakpoints/data/break-points.spec.ts +++ b/src/lib/core/breakpoints/data/break-points.spec.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ import {TestBed, inject} from '@angular/core/testing'; -import {sortDescendingPriority} from '../breakpoint-tools'; +import {sortDescendingPriority} from '../../utils/sort'; import {BreakPoint} from '../break-point'; import {BREAKPOINTS} from '../break-points-token'; diff --git a/src/lib/core/breakpoints/index.ts b/src/lib/core/breakpoints/index.ts index 13783762a..18c379038 100644 --- a/src/lib/core/breakpoints/index.ts +++ b/src/lib/core/breakpoints/index.ts @@ -12,8 +12,3 @@ export * from './data/orientation-break-points'; export * from './break-point'; export * from './break-point-registry'; export * from './break-points-token'; - -export { - sortDescendingPriority, - sortAscendingPriority -} from './breakpoint-tools'; diff --git a/src/lib/core/media-change.ts b/src/lib/core/media-change.ts index 3bdc2b033..7117dded5 100644 --- a/src/lib/core/media-change.ts +++ b/src/lib/core/media-change.ts @@ -19,6 +19,7 @@ export class MediaChange { * @param mediaQuery e.g. (min-width: 600px) and (max-width: 959px) * @param mqAlias e.g. gt-sm, md, gt-lg * @param suffix e.g. GtSM, Md, GtLg + * @param priority the priority of activation for the given breakpoint */ constructor(public matches = false, public mediaQuery = 'all', diff --git a/src/lib/core/media-marshaller/media-marshaller.ts b/src/lib/core/media-marshaller/media-marshaller.ts index c0983b65e..b2aaa11de 100644 --- a/src/lib/core/media-marshaller/media-marshaller.ts +++ b/src/lib/core/media-marshaller/media-marshaller.ts @@ -11,7 +11,7 @@ import {merge, Observable, Subject, Subscription} from 'rxjs'; import {filter, tap} from 'rxjs/operators'; import {BreakPoint} from '../breakpoints/break-point'; -import {sortDescendingPriority} from '../breakpoints/breakpoint-tools'; +import {sortDescendingPriority} from '../utils/sort'; import {BreakPointRegistry} from '../breakpoints/break-point-registry'; import {MatchMedia} from '../match-media/match-media'; import {MediaChange} from '../media-change'; diff --git a/src/lib/core/media-marshaller/print-hook.ts b/src/lib/core/media-marshaller/print-hook.ts index d2139a9d8..f4412480c 100644 --- a/src/lib/core/media-marshaller/print-hook.ts +++ b/src/lib/core/media-marshaller/print-hook.ts @@ -12,7 +12,7 @@ import {MediaChange} from '../media-change'; import {BreakPoint} from '../breakpoints/break-point'; import {LAYOUT_CONFIG, LayoutConfigOptions} from '../tokens/library-config'; import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry'; -import {sortDescendingPriority} from '../breakpoints/breakpoint-tools'; +import {sortDescendingPriority} from '../utils/sort'; /** * Interface to apply PrintHook to call anonymous `target.updateStyles()` diff --git a/src/lib/core/media-observer/media-observer.ts b/src/lib/core/media-observer/media-observer.ts index a64bded95..14e3097c6 100644 --- a/src/lib/core/media-observer/media-observer.ts +++ b/src/lib/core/media-observer/media-observer.ts @@ -14,6 +14,7 @@ import {MediaChange} from '../media-change'; import {MatchMedia} from '../match-media/match-media'; import {PrintHook} from '../media-marshaller/print-hook'; import {BreakPointRegistry, OptionalBreakPoint} from '../breakpoints/break-point-registry'; +import {sortDescendingPriority} from '../utils/sort'; /** * MediaObserver enables applications to listen for 1..n mediaQuery activations and to determine @@ -64,12 +65,7 @@ export class MediaObserver { * @breaking-change 7.0.0-beta.24 * @deletion-target v7.0.0-beta.25 */ - get media$(): Observable { - return this._media$.pipe( - filter((changes: MediaChange[]) => changes.length > 0), - map((changes: MediaChange[]) => changes[0]) - ); - } + readonly media$: Observable; /** Filter MediaChange notifications for overlapping breakpoints */ filterOverlaps = false; @@ -78,6 +74,10 @@ export class MediaObserver { protected matchMedia: MatchMedia, protected hook: PrintHook) { this._media$ = this.watchActivations(); + this.media$ = this._media$.pipe( + filter((changes: MediaChange[]) => changes.length > 0), + map((changes: MediaChange[]) => changes[0]) + ); } @@ -176,10 +176,10 @@ export class MediaObserver { .map(query => new MediaChange(true, query)) .map(replaceWithPrintAlias) .map(mergeMQAlias) - .sort(sortChangesByPriority); + .sort(sortDescendingPriority); } - private _media$: Observable; + private readonly _media$: Observable; } /** @@ -190,9 +190,3 @@ function toMediaQuery(query: string, locator: BreakPointRegistry) { return bp ? bp.mediaQuery : query; } -/** HOF to sort the breakpoints by priority */ -export function sortChangesByPriority(a: MediaChange, b: MediaChange): number { - const priorityA = a ? a.priority || 0 : 0; - const priorityB = b ? b.priority || 0 : 0; - return priorityB - priorityA; -} diff --git a/src/lib/core/public-api.ts b/src/lib/core/public-api.ts index 1bbadec2b..9374780aa 100644 --- a/src/lib/core/public-api.ts +++ b/src/lib/core/public-api.ts @@ -17,6 +17,7 @@ export * from './base/index'; export * from './breakpoints/index'; export * from './match-media/index'; export * from './media-observer/index'; +export * from './utils/index'; export * from './style-utils/style-utils'; export * from './style-builder/style-builder'; diff --git a/src/lib/core/utils/index.ts b/src/lib/core/utils/index.ts new file mode 100644 index 000000000..135393a1c --- /dev/null +++ b/src/lib/core/utils/index.ts @@ -0,0 +1,8 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ +export * from './sort'; diff --git a/src/lib/core/utils/sort.ts b/src/lib/core/utils/sort.ts new file mode 100644 index 000000000..2de5ff0a0 --- /dev/null +++ b/src/lib/core/utils/sort.ts @@ -0,0 +1,25 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +interface WithPriority { + priority?: number; +} + +/** HOF to sort the breakpoints by descending priority */ +export function sortDescendingPriority(a: T | null, b: T | null): number { + const priorityA = a ? a.priority || 0 : 0; + const priorityB = b ? b.priority || 0 : 0; + return priorityB - priorityA; +} + +/** HOF to sort the breakpoints by ascending priority */ +export function sortAscendingPriority(a: T, b: T): number { + const pA = a.priority || 0; + const pB = b.priority || 0; + return pA - pB; +}