feat(api): improve support for responsive alias

Currently Layout syntax is enhanced with parametric responsive markup (selector suffices):

<div fx-layout="row"> ==> <div fx-layout="column" fx-layout.gt-sm="row">

The directive implementations use faux @Input properties to support easy bindings to these optional parametric expressions/values:

@Directive({
  selector: '[fx-layout]'
})
export class LayoutDirective {
 /**
   * Default layout property with default direction value
   */
  @Input('fx-layout')        layout = 'row';

  // *******************************************************
  // Optional input variations to support mediaQuery triggers
  // *******************************************************

  @Input('fx-layout.xs')     layoutXs;
  @Input('fx-layout.gt-xs')  layoutGtXs;
  @Input('fx-layout.sm')     layoutSm;
  @Input('fx-layout.gt-sm')  layoutGtSm;
  @Input('fx-layout.md')     layoutMd;
  @Input('fx-layout.gt-md')  layoutGtMd;
  @Input('fx-layout.lg')     layoutLg;
  @Input('fx-layout.gt-lg')  layoutGtLg;
  @Input('fx-layout.xl')     layoutXl;

}

To support responsive APIs - within Angular (5.x + 6.x) - these suffices must be hard-coded into the directive. This also means that any new/additionally suffices must be defined in a new sub-class. e.g

@Directive({
  selector: '[fx-layout.sm-landscape, fx-layout.sm-portrait]'
})
export class LayoutWithOrientationDirective extends LayoutDirective {

  // *******************************************************
  // Specify new selectors in subsclass
  // *******************************************************

  @Input('fx-layout.sm-landscape')     layoutSmLandscape;
  @Input('fx-layout.sm-portraint')     layoutSmPortrait;
}

Obviously this ^ is not ideal nor dynamic. A better solution is need that would ideally only require a single @Input:

@Directive({
  selector: '[fx-layout]'
})
export class LayoutDirective {

  @Input('fx-layout')        layout = 'row';

}

angular / flex-layout

feat(api): improve support for responsive alias #17