feat(flexbox): use protected access to allow API directives to be easily extended (#163)

* change internal methods to `protected` to enable subclass access
> Useful when extending directives with custom breakpoints.

Author: ThomasBurleson

src/lib/flexbox/api/base.ts

@@ -42,9 +42,9 @@ export abstract class BaseFxDirective implements OnDestroy {
   /**
    *
    */
-  constructor(private _mediaMonitor: MediaMonitor,
+  constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              private _renderer: Renderer) {
+              protected _renderer: Renderer) {
     this._display = this._getDisplayStyle();
   }
 

src/lib/flexbox/api/flex-align.ts

@@ -114,7 +114,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
   // Protected methods
   // *********************************************
 
-  private _updateWithValue(value?: string|number) {
+  protected _updateWithValue(value?: string|number) {
     value = value || this._queryInput("align") || 'stretch';
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -123,7 +123,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
     this._applyStyleToElement(this._buildCSS(value));
   }
 
-  private _buildCSS(align) {
+  protected _buildCSS(align) {
     let css = {};
 
     // Cross-axis

src/lib/flexbox/api/flex-offset.ts

@@ -83,7 +83,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
   // *********************************************
 
 
-  private _updateWithValue(value?: string|number) {
+  protected _updateWithValue(value?: string|number) {
     value = value || this._queryInput("offset") || 0;
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -92,7 +92,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
     this._applyStyleToElement(this._buildCSS(value));
   }
 
-  private _buildCSS(offset) {
+  protected _buildCSS(offset) {
     let isPercent = String(offset).indexOf('%') > -1;
     let isPx = String(offset).indexOf('px') > -1;
     if (!isPx && !isPercent && !isNaN(offset)) {

src/lib/flexbox/api/flex-order.ts

@@ -82,7 +82,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
   // Protected methods
   // *********************************************
 
-  private _updateWithValue(value?: string) {
+  protected _updateWithValue(value?: string) {
     value = value || this._queryInput("order") || '0';
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -92,7 +92,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
   }
 
 
-  private _buildCSS(value) {
+  protected _buildCSS(value) {
     value = parseInt(value, 10);
     return {order: isNaN(value) ? 0 : value};
   }

src/lib/flexbox/api/flex.ts

@@ -38,8 +38,7 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
  *
  * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  */
-@Directive({
-  selector: `
+@Directive({selector: `
   [fxFlex],
   [fxFlex.xs],
   [fxFlex.gt-xs],
@@ -55,13 +54,13 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
 export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
 
   /** The flex-direction of this element's flex container. Defaults to 'row'. */
-  private _layout = 'row';
+  protected _layout = 'row';
 
   /**
    * Subscription to the parent flex container's layout changes.
    * Stored so we can unsubscribe when this directive is destroyed.
    */
-  private _layoutWatcher: Subscription;
+  protected _layoutWatcher: Subscription;
 
   @Input('fxFlex')       set flex(val) {
     this._cacheInput("flex", val);
@@ -117,8 +116,8 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               renderer: Renderer,
-              @Optional() @SkipSelf() private _container: LayoutDirective,
-              @Optional() @SkipSelf() private _wrap: LayoutWrapDirective) {
+              @Optional() @SkipSelf() protected _container: LayoutDirective,
+              @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) {
 
     super(monitor, elRef, renderer);
 
@@ -168,12 +167,12 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
    * Caches the parent container's 'flex-direction' and updates the element's style.
    * Used as a handler for layout change events from the parent flex container.
    */
-  private _onLayoutChange(direction?: string) {
+  protected _onLayoutChange(direction?: string) {
     this._layout = direction || this._layout || "row";
     this._updateStyle();
   }
 
-  private _updateStyle(value?: string|number) {
+  protected _updateStyle(value?: string|number) {
     let flexBasis = value || this._queryInput("flex") || '';
     if (this._mqActivation) {
       flexBasis = this._mqActivation.activatedInput;
@@ -186,7 +185,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   /**
    * If the used the short-form `fxFlex="1 0 37%"`, then parse the parts
    */
-  private _parseFlexParts(basis: string) {
+  protected _parseFlexParts(basis: string) {
     basis = basis.replace(";", "");
 
     let hasCalc = basis && basis.indexOf("calc") > -1;
@@ -200,7 +199,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
    * e.g.
    * fxFlex="3 3 calc(15em + 20px)"
    */
-  private _getPartsWithCalc(value: string) {
+  protected _getPartsWithCalc(value: string) {
     let parts = [this._queryInput("grow"), this._queryInput("shrink"), value];
     let j = value.indexOf('calc');
 
@@ -219,7 +218,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
    * Validate the value to be one of the acceptable value options
    * Use default fallback of "row"
    */
-  private _validateValue(grow: number|string,
+  protected _validateValue(grow: number|string,
                          shrink: number|string,
                          basis: string|number|FlexBasisAlias) {
     let css, isValue;

src/lib/flexbox/api/hide.ts

@@ -50,7 +50,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges,
    * Subscription to the parent flex container's layout changes.
    * Stored so we can unsubscribe when this directive is destroyed.
    */
-  private _layoutWatcher: Subscription;
+  protected _layoutWatcher: Subscription;
 
   @Input('fxHide')       set hide(val) {
     this._cacheInput("hide", val);
@@ -96,7 +96,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges,
    *
    */
   constructor(monitor: MediaMonitor,
-              @Optional() @Self() private _layout: LayoutDirective,
+              @Optional() @Self() protected _layout: LayoutDirective,
               protected elRef: ElementRef,
               protected renderer: Renderer) {
     super(monitor, elRef, renderer);
@@ -169,7 +169,7 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges,
   /**
    * Validate the visibility value and then update the host's inline display style
    */
-  private _updateWithValue(value?: string|number|boolean) {
+  protected _updateWithValue(value?: string|number|boolean) {
     value = value || this._getDefaultVal("hide", false);
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -183,14 +183,14 @@ export class HideDirective extends BaseFxDirective implements OnInit, OnChanges,
   /**
    * Build the CSS that should be assigned to the element instance
    */
-  private _buildCSS(value) {
+  protected _buildCSS(value) {
     return {'display': value ? 'none' : this._display};
   }
 
   /**
    * Validate the value to NOT be FALSY
    */
-  private _validateTruthy(value) {
+  protected _validateTruthy(value) {
     return FALSY.indexOf(value) === -1;
   }
 }

src/lib/flexbox/api/layout-align.ts

@@ -49,8 +49,8 @@ import {LAYOUT_VALUES, LayoutDirective} from './layout';
 `})
 export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
 
-  private _layout = 'row';  // default flex-direction
-  private _layoutWatcher: Subscription;
+  protected _layout = 'row';  // default flex-direction
+  protected _layoutWatcher: Subscription;
 
   @Input('fxLayoutAlign')       set align(val)     { this._cacheInput('align', val); }
   @Input('fxLayoutAlign.xs')    set alignXs(val)   { this._cacheInput('alignXs', val); }
@@ -110,7 +110,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   /**
    *
    */
-  private _updateWithValue(value?: string) {
+  protected _updateWithValue(value?: string) {
     value = value || this._queryInput("align") || 'start stretch';
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -123,7 +123,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   /**
    * Cache the parent container 'flex-direction' and update the 'flex' styles
    */
-  private _onLayoutChange(direction) {
+  protected _onLayoutChange(direction) {
     this._layout = (direction || '').toLowerCase();
     if (!LAYOUT_VALUES.find(x => x === this._layout)) {
       this._layout = 'row';
@@ -136,7 +136,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
     this._allowStretching(value, this._layout || "row");
   }
 
-  private _buildCSS(align) {
+  protected _buildCSS(align) {
     let css = {}, [main_axis, cross_axis] = align.split(' '); // tslint:disable-line:variable-name
 
     css['justify-content'] = 'flex-start';  // default main axis
@@ -188,7 +188,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
    * Update container element to 'stretch' as needed...
    * NOTE: this is only done if the crossAxis is explicitly set to 'stretch'
    */
-  private _allowStretching(align, layout) {
+  protected _allowStretching(align, layout) {
     let [, cross_axis] = align.split(' '); // tslint:disable-line:variable-name
 
     if (cross_axis == 'stretch') {

src/lib/flexbox/api/layout-gap.ts

@@ -28,8 +28,7 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout';
  * 'layout-padding' styling directive
  *  Defines padding of child elements in a layout container
  */
-@Directive({
-  selector: `
+@Directive({selector: `
   [fxLayoutGap],
   [fxLayoutGap.xs],
   [fxLayoutGap.gt-xs],
@@ -44,9 +43,9 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout';
 })
 export class LayoutGapDirective extends BaseFxDirective implements AfterContentInit, OnChanges,
     OnDestroy {
-  private _layout = 'row';  // default flex-direction
-  private _layoutWatcher: Subscription;
-  private _observer: MutationObserver;
+  protected _layout = 'row';  // default flex-direction
+  protected _layoutWatcher: Subscription;
+  protected _observer: MutationObserver;
 
   @Input('fxLayoutGap')       set gap(val) {
     this._cacheInput('gap', val);
@@ -139,7 +138,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
    * Watch for child nodes to be added... and apply the layout gap styles to each.
    * NOTE: this does NOT! differentiate between viewChildren and contentChildren
    */
-  private _watchContentChanges() {
+  protected _watchContentChanges() {
     let onMutationCallback = (mutations) => {
       let validatedChanges = (it: MutationRecord) => {
         return (it.addedNodes && it.addedNodes.length) ||
@@ -159,7 +158,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
   /**
    * Cache the parent container 'flex-direction' and update the 'margin' styles
    */
-  private _onLayoutChange(direction) {
+  protected _onLayoutChange(direction) {
     this._layout = (direction || '').toLowerCase();
     if (!LAYOUT_VALUES.find(x => x === this._layout)) {
       this._layout = 'row';
@@ -170,7 +169,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
   /**
    *
    */
-  private _updateWithValue(value?: string) {
+  protected _updateWithValue(value?: string) {
     value = value || this._queryInput("gap") || '0';
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;

src/lib/flexbox/api/layout-wrap.ts

@@ -42,8 +42,8 @@ import {LayoutDirective, LAYOUT_VALUES} from './layout';
   [fxLayoutWrap.xl]
 `})
 export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy {
-  private _layout = 'row';  // default flex-direction
-  private _layoutWatcher: Subscription;
+  protected _layout = 'row';  // default flex-direction
+  protected _layoutWatcher: Subscription;
 
   @Input('fxLayoutWrap')       set wrap(val)     { this._cacheInput("wrap", val); }
   @Input('fxLayoutWrap.xs')    set wrapXs(val)   { this._cacheInput('wrapXs', val); }
@@ -98,7 +98,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh
   /**
    * Cache the parent container 'flex-direction' and update the 'flex' styles
    */
-  private _onLayoutChange(direction) {
+  protected _onLayoutChange(direction) {
     this._layout = (direction || '').toLowerCase().replace('-reverse', '');
     if (!LAYOUT_VALUES.find(x => x === this._layout)) {
       this._layout = 'row';
@@ -107,7 +107,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh
     this._updateWithValue();
   }
 
-  private _updateWithValue(value?: string) {
+  protected _updateWithValue(value?: string) {
     value = value || this._queryInput("wrap") || 'wrap';
     if (this._mqActivation) {
       value = this._mqActivation.activatedInput;
@@ -121,7 +121,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh
   /**
    * Build the CSS that should be assigned to the element instance
    */
-  private _buildCSS(value) {
+  protected _buildCSS(value) {
     return extendObject({ 'flex-wrap': value }, {
       'display' : 'flex',
       'flex-direction' : this._layout || 'row'
@@ -131,7 +131,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh
   /**
    * Convert layout-wrap="<value>" to expected flex-wrap style
    */
-  private _validateValue(value) {
+  protected _validateValue(value) {
     switch (value.toLowerCase()) {
       case 'reverse':
       case 'wrap-reverse':

src/lib/flexbox/api/layout.ts

@@ -49,17 +49,16 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange
    * Create Observable for nested/child 'flex' directives. This allows
    * child flex directives to subscribe/listen for flexbox direction changes.
    */
-  private _announcer: BehaviorSubject<string>;
+  protected _announcer: BehaviorSubject<string>;
 
   /**
    * Publish observer to enabled nested, dependent directives to listen
    * to parent "layout" direction changes
    */
   public layout$: Observable<string>;
 
-
-  @Input('fxLayout') set layout(val) { this._cacheInput("layout", val); }
-  @Input('fxLayout.xs')    set layoutXs(val)   { this._cacheInput('layoutXs', val); }
+  @Input('fxLayout')       set layout(val)     { this._cacheInput("layout", val); };
+  @Input('fxLayout.xs')    set layoutXs(val)   { this._cacheInput('layoutXs', val); };
   @Input('fxLayout.gt-xs') set layoutGtXs(val) { this._cacheInput('layoutGtXs', val); };
   @Input('fxLayout.sm')    set layoutSm(val)   { this._cacheInput('layoutSm', val); };
   @Input('fxLayout.gt-sm') set layoutGtSm(val) { this._cacheInput('layoutGtSm', val); };
@@ -111,7 +110,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange
   /**
    * Validate the direction value and then update the host's inline flexbox styles
    */
-  private _updateWithDirection(direction?: string) {
+  protected _updateWithDirection(direction?: string) {
     direction = direction || this._queryInput("layout") || 'row';
     if (this._mqActivation) {
       direction = this._mqActivation.activatedInput;
@@ -136,15 +135,15 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange
    *         laid out and drawn inside that element's specified width and height.
    *
    */
-  private _buildCSS(value) {
+  protected _buildCSS(value) {
     return {'display': 'flex', 'box-sizing': 'border-box', 'flex-direction': value};
   }
 
   /**
    * Validate the value to be one of the acceptable value options
    * Use default fallback of "row"
    */
-  private _validateValue(value) {
+  protected _validateValue(value) {
     value = value ? value.toLowerCase() : '';
     return LAYOUT_VALUES.find(x => x === value) ? value : LAYOUT_VALUES[0];  // "row"
   }