feat(core): add centralized media marshal service

Author: CaerusKaru

src/lib/core/add-alias.ts

@@ -13,7 +13,7 @@ import {extendObject} from '../utils/object-extend';
  * For the specified MediaChange, make sure it contains the breakpoint alias
  * and suffix (if available).
  */
-export function mergeAlias(dest: MediaChange, source: BreakPoint | null) {
+export function mergeAlias(dest: MediaChange, source: BreakPoint | null): MediaChange {
   return extendObject(dest, source ? {
         mqAlias: source.alias,
         suffix: source.suffix

src/lib/core/base/base-adapter.ts

@@ -17,6 +17,8 @@ import {StyleUtils} from '../style-utils/style-utils';
 /**
  * Adapter to the BaseDirective abstract class so it can be used via composition.
  * @see BaseDirective
+ * @deprecated
+ * @deletion-target v7.0.0-beta.21
  */
 export class BaseDirectiveAdapter extends BaseDirective {
 

src/lib/core/base/base.ts

@@ -23,7 +23,11 @@ import {MediaMonitor} from '../media-monitor/media-monitor';
 import {MediaQuerySubscriber} from '../media-change';
 import {StyleBuilder} from '../style-builder/style-builder';
 
-/** Abstract base class for the Layout API styling directives. */
+/**
+ * Abstract base class for the Layout API styling directives.
+ * @deprecated
+ * @deletion-target v7.0.0-beta.21
+ */
 export abstract class BaseDirective implements OnDestroy, OnChanges {
 
   /**

src/lib/core/base/index.ts

@@ -8,3 +8,4 @@
 
 export * from './base';
 export * from './base-adapter';
+export * from './new-base';

src/lib/core/base/new-base.ts

@@ -0,0 +1,87 @@
+/**
+ * @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
+ */
+import {ElementRef} from '@angular/core';
+
+import {StyleDefinition, StyleUtils} from '../style-utils/style-utils';
+import {StyleBuilder} from '../style-builder/style-builder';
+import {MediaMarshaller} from '../media-marshaller/media-marshaller';
+import {buildLayoutCSS} from '../../utils/layout-validator';
+
+export abstract class NewBaseDirective {
+
+  protected DIRECTIVE_KEY = '';
+
+  /** Access to host element's parent DOM node */
+  protected get parentElement(): any {
+    return this.elementRef.nativeElement.parentNode;
+  }
+
+  protected get nativeElement(): HTMLElement {
+    return this.elementRef.nativeElement;
+  }
+
+  /** Cache map for style computation */
+  protected styleCache: Map<string, StyleDefinition> = new Map();
+
+  protected constructor(protected elementRef: ElementRef,
+                        protected styleBuilder: StyleBuilder,
+                        protected styler: StyleUtils,
+                        protected marshal: MediaMarshaller) {
+  }
+
+  /** Add styles to the element using predefined style builder */
+  protected addStyles(input: string, parent?: Object) {
+    const builder = this.styleBuilder;
+    const useCache = builder.shouldCache;
+
+    let genStyles: StyleDefinition | undefined = this.styleCache.get(input);
+
+    if (!genStyles || !useCache) {
+      genStyles = builder.buildStyles(input, parent);
+      if (useCache) {
+        this.styleCache.set(input, genStyles);
+      }
+    }
+
+    this.applyStyleToElement(genStyles);
+    builder.sideEffect(input, genStyles, parent);
+  }
+
+  /**
+   * Determine the DOM element's Flexbox flow (flex-direction).
+   *
+   * Check inline style first then check computed (stylesheet) style.
+   * And optionally add the flow value to element's inline style.
+   */
+  protected getFlexFlowDirection(target: HTMLElement, addIfMissing = false): string {
+    if (target) {
+      let [value, hasInlineValue] = this.styler.getFlowDirection(target);
+
+      if (!hasInlineValue && addIfMissing) {
+        const style = buildLayoutCSS(value);
+        const elements = [target];
+        this.styler.applyStyleToElements(style, elements);
+      }
+
+      return value.trim();
+    }
+
+    return 'row';
+  }
+
+  /** Applies styles given via string pair or object map to the directive element */
+  protected applyStyleToElement(style: StyleDefinition,
+                                value?: string | number,
+                                element: HTMLElement = this.nativeElement) {
+    this.styler.applyStyleToElement(element, style, value);
+  }
+
+  protected setValue(val: any, bp: string): void {
+    this.marshal.setValue(this.nativeElement, bp, this.DIRECTIVE_KEY, val);
+  }
+}

src/lib/core/breakpoints/break-point.ts

@@ -10,4 +10,6 @@ export interface BreakPoint {
   alias: string;
   suffix?: string;
   overlapping?: boolean;
+  priority?: number;
+  includes?: string[];
 }

src/lib/core/breakpoints/data/break-points.ts

@@ -14,63 +14,76 @@ export const RESPONSIVE_ALIASES = [
 export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
   {
     alias: 'xs',
-    mediaQuery: '(min-width: 0px) and (max-width: 599px)'
+    mediaQuery: '(min-width: 0px) and (max-width: 599px)',
+    priority: 100,
   },
   {
     alias: 'gt-xs',
     overlapping: true,
-    mediaQuery: '(min-width: 600px)'
+    mediaQuery: '(min-width: 600px)',
+    priority: 7,
   },
   {
     alias: 'lt-sm',
     overlapping: true,
-    mediaQuery: '(max-width: 599px)'
+    mediaQuery: '(max-width: 599px)',
+    priority: 10,
   },
   {
     alias: 'sm',
-    mediaQuery: '(min-width: 600px) and (max-width: 959px)'
+    mediaQuery: '(min-width: 600px) and (max-width: 959px)',
+    priority: 100,
   },
   {
     alias: 'gt-sm',
     overlapping: true,
-    mediaQuery: '(min-width: 960px)'
+    mediaQuery: '(min-width: 960px)',
+    priority: 8,
   },
   {
     alias: 'lt-md',
     overlapping: true,
-    mediaQuery: '(max-width: 959px)'
+    mediaQuery: '(max-width: 959px)',
+    priority: 9,
   },
   {
     alias: 'md',
-    mediaQuery: '(min-width: 960px) and (max-width: 1279px)'
+    mediaQuery: '(min-width: 960px) and (max-width: 1279px)',
+    priority: 100,
   },
   {
     alias: 'gt-md',
     overlapping: true,
-    mediaQuery: '(min-width: 1280px)'
+    mediaQuery: '(min-width: 1280px)',
+    priority: 9,
   },
   {
     alias: 'lt-lg',
     overlapping: true,
-    mediaQuery: '(max-width: 1279px)'
+    mediaQuery: '(max-width: 1279px)',
+    priority: 8,
   },
   {
     alias: 'lg',
-    mediaQuery: '(min-width: 1280px) and (max-width: 1919px)'
+    mediaQuery: '(min-width: 1280px) and (max-width: 1919px)',
+    priority: 100,
   },
   {
     alias: 'gt-lg',
     overlapping: true,
-    mediaQuery: '(min-width: 1920px)'
+    mediaQuery: '(min-width: 1920px)',
+    priority: 10,
   },
   {
     alias: 'lt-xl',
     overlapping: true,
-    mediaQuery: '(max-width: 1919px)'
+    mediaQuery: '(max-width: 1919px)',
+    priority: 7,
   },
   {
     alias: 'xl',
-    mediaQuery: '(min-width: 1920px) and (max-width: 5000px)'
+    mediaQuery: '(min-width: 1920px) and (max-width: 5000px)',
+    priority: 100,
   }
 ];
 

src/lib/core/match-media/mock/mock-match-media.ts

@@ -79,57 +79,60 @@ export class MockMatchMedia extends MatchMedia {
       // Simulate activation of overlapping lt-<XXX> ranges
       switch (alias) {
         case 'lg'   :
-          this._activateByAlias('lt-xl');
+          this._activateByAlias('lt-xl', true);
           break;
         case 'md'   :
-          this._activateByAlias('lt-xl, lt-lg');
+          this._activateByAlias('lt-xl, lt-lg', true);
           break;
         case 'sm'   :
-          this._activateByAlias('lt-xl, lt-lg, lt-md');
+          this._activateByAlias('lt-xl, lt-lg, lt-md', true);
           break;
         case 'xs'   :
-          this._activateByAlias('lt-xl, lt-lg, lt-md, lt-sm');
+          this._activateByAlias('lt-xl, lt-lg, lt-md, lt-sm', true);
           break;
       }
 
       // Simulate activate of overlapping gt-<xxxx> mediaQuery ranges
       switch (alias) {
         case 'xl'   :
-          this._activateByAlias('gt-lg, gt-md, gt-sm, gt-xs');
+          this._activateByAlias('gt-lg, gt-md, gt-sm, gt-xs', true);
           break;
         case 'lg'   :
-          this._activateByAlias('gt-md, gt-sm, gt-xs');
+          this._activateByAlias('gt-md, gt-sm, gt-xs', true);
           break;
         case 'md'   :
-          this._activateByAlias('gt-sm, gt-xs');
+          this._activateByAlias('gt-sm, gt-xs', true);
           break;
         case 'sm'   :
-          this._activateByAlias('gt-xs');
+          this._activateByAlias('gt-xs', true);
           break;
       }
     }
     // Activate last since the responsiveActivation is watching *this* mediaQuery
-    return this._activateByQuery(mediaQuery);
+    return this._activateByQuery(mediaQuery, true);
   }
 
   /**
    *
    */
-  private _activateByAlias(aliases: string) {
+  private _activateByAlias(aliases: string, useOverlaps = false) {
     const activate = (alias: string) => {
       const bp = this._breakpoints.findByAlias(alias);
-      this._activateByQuery(bp ? bp.mediaQuery : alias);
+      this._activateByQuery(bp ? bp.mediaQuery : alias, useOverlaps);
     };
     aliases.split(',').forEach(alias => activate(alias.trim()));
   }
 
   /**
    *
    */
-  private _activateByQuery(mediaQuery: string) {
-    const mql = this._registry.get(mediaQuery)!;
+  private _activateByQuery(mediaQuery: string, useOverlaps = false) {
+    if (useOverlaps) {
+      this._registerMediaQuery(mediaQuery);
+    }
+    const mql = this._registry.get(mediaQuery);
     const alreadyAdded = this._actives
-      .reduce((found, it) => (found || (mql && (it.media === mql.media))), false);
+      .reduce((found, it) => (found || (mql ? (it.media === mql.media) : false)), false);
 
     if (mql && !alreadyAdded) {
       this._actives.push(mql.activate());