build: add Directive decorators and export all base classes (#1114)

CaerusKaru · web-flow · commit 2d7b49c382b9 · 2019-08-30T06:25:43.000-05:00
Without this change, using the library with the Ivy compiler causes errros
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/lib/extended/class/class.ts b/src/lib/extended/class/class.ts
@@ -9,6 +9,7 @@ import {Directive, DoCheck, ElementRef, Input, Optional, Self} from '@angular/co
 import {NgClass, ɵNgClassImpl, ɵNgClassR2Impl} from '@angular/common';
 import {BaseDirective2, StyleUtils, MediaMarshaller} from '@angular/flex-layout/core';
 
+@Directive({selector: 'class-directive'})
 export class ClassDirective extends BaseDirective2 implements DoCheck {
 
   protected DIRECTIVE_KEY = 'ngClass';
diff --git a/src/lib/extended/img-src/img-src.ts b/src/lib/extended/img-src/img-src.ts
@@ -23,6 +23,7 @@ export class ImgSrcStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'img-src-directive'})
 export class ImgSrcDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'img-src';
   protected defaultSrc = '';
diff --git a/src/lib/extended/module.ts b/src/lib/extended/module.ts
@@ -8,17 +8,21 @@
 import {NgModule} from '@angular/core';
 import {CoreModule} from '@angular/flex-layout/core';
 
-import {DefaultImgSrcDirective} from './img-src/img-src';
-import {DefaultClassDirective} from './class/class';
-import {DefaultShowHideDirective} from './show-hide/show-hide';
-import {DefaultStyleDirective} from './style/style';
+import {DefaultImgSrcDirective, ImgSrcDirective} from './img-src/img-src';
+import {ClassDirective, DefaultClassDirective} from './class/class';
+import {DefaultShowHideDirective, ShowHideDirective} from './show-hide/show-hide';
+import {DefaultStyleDirective, StyleDirective} from './style/style';
 
 
 const ALL_DIRECTIVES = [
   DefaultShowHideDirective,
   DefaultClassDirective,
   DefaultStyleDirective,
-  DefaultImgSrcDirective
+  DefaultImgSrcDirective,
+  ClassDirective,
+  ImgSrcDirective,
+  ShowHideDirective,
+  StyleDirective,
 ];
 
 /**
diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts
@@ -41,6 +41,7 @@ export class ShowHideStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'show-hide-directive'})
 export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {
   protected DIRECTIVE_KEY = 'show-hide';
 
diff --git a/src/lib/extended/style/style.ts b/src/lib/extended/style/style.ts
@@ -37,6 +37,7 @@ import {
   keyValuesToMap,
 } from './style-transforms';
 
+@Directive({selector: 'style-directive'})
 export class StyleDirective extends BaseDirective2 implements DoCheck {
 
   protected DIRECTIVE_KEY = 'ngStyle';
diff --git a/src/lib/flex/flex-align/flex-align.ts b/src/lib/flex/flex-align/flex-align.ts
@@ -55,6 +55,7 @@ const selector = `
  * Allows element-specific overrides for cross-axis alignments in a layout container
  * @see https://css-tricks.com/almanac/properties/a/align-self/
  */
+@Directive({selector: 'flex-align-directive'})
 export class FlexAlignDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'flex-align';
diff --git a/src/lib/flex/flex-offset/flex-offset.ts b/src/lib/flex/flex-offset/flex-offset.ts
@@ -65,6 +65,7 @@ const selector = `
  * 'flex-offset' flexbox styling directive
  * Configures the 'margin-left' of the element in a layout container
  */
+@Directive({selector: 'flex-offset-directive'})
 export class FlexOffsetDirective extends BaseDirective2 implements OnChanges {
   protected DIRECTIVE_KEY = 'flex-offset';
 
diff --git a/src/lib/flex/flex-order/flex-order.ts b/src/lib/flex/flex-order/flex-order.ts
@@ -39,6 +39,7 @@ const selector = `
  * Configures the positional ordering of the element in a sorted layout container
  * @see https://css-tricks.com/almanac/properties/o/order/
  */
+@Directive({selector: 'flex-order-directive'})
 export class FlexOrderDirective extends BaseDirective2 implements OnChanges {
 
   protected DIRECTIVE_KEY = 'flex-order';
diff --git a/src/lib/flex/flex/flex.ts b/src/lib/flex/flex/flex.ts
@@ -199,6 +199,7 @@ const selector = `
  *
  * @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  */
+@Directive({selector: 'flex-directive'})
 export class FlexDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'flex';
diff --git a/src/lib/flex/layout-align/layout-align.ts b/src/lib/flex/layout-align/layout-align.ts
@@ -119,6 +119,7 @@ const selector = `
  *  @see https://css-tricks.com/almanac/properties/a/align-items/
  *  @see https://css-tricks.com/almanac/properties/a/align-content/
  */
+@Directive({selector: 'layout-align-directive'})
 export class LayoutAlignDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'layout-align';
   protected layout = 'row';  // default flex-direction
diff --git a/src/lib/flex/layout-gap/layout-gap.ts b/src/lib/flex/layout-gap/layout-gap.ts
@@ -96,6 +96,7 @@ const selector = `
  * 'layout-padding' styling directive
  *  Defines padding of child elements in a layout container
  */
+@Directive({selector: 'layout-gap-directive'})
 export class LayoutGapDirective extends BaseDirective2 implements AfterContentInit, OnDestroy {
   protected layout = 'row';  // default flex-direction
   protected DIRECTIVE_KEY = 'layout-gap';
diff --git a/src/lib/flex/layout/layout.ts b/src/lib/flex/layout/layout.ts
@@ -43,6 +43,7 @@ const selector = `
  * @see https://css-tricks.com/almanac/properties/f/flex-direction/
  *
  */
+@Directive({selector: 'layout-directive'})
 export class LayoutDirective extends BaseDirective2 implements OnChanges {
 
   protected DIRECTIVE_KEY = 'layout';
diff --git a/src/lib/flex/module.ts b/src/lib/flex/module.ts
@@ -9,14 +9,14 @@ import {NgModule} from '@angular/core';
 import {BidiModule} from '@angular/cdk/bidi';
 import {CoreModule} from '@angular/flex-layout/core';
 
-import {DefaultLayoutDirective} from './layout/layout';
-import {DefaultLayoutGapDirective} from './layout-gap/layout-gap';
-import {DefaultFlexDirective} from './flex/flex';
-import {DefaultFlexOrderDirective} from './flex-order/flex-order';
-import {DefaultFlexOffsetDirective} from './flex-offset/flex-offset';
-import {DefaultFlexAlignDirective} from './flex-align/flex-align';
+import {DefaultLayoutDirective, LayoutDirective} from './layout/layout';
+import {DefaultLayoutGapDirective, LayoutGapDirective} from './layout-gap/layout-gap';
+import {DefaultFlexDirective, FlexDirective} from './flex/flex';
+import {DefaultFlexOrderDirective, FlexOrderDirective} from './flex-order/flex-order';
+import {DefaultFlexOffsetDirective, FlexOffsetDirective} from './flex-offset/flex-offset';
+import {DefaultFlexAlignDirective, FlexAlignDirective} from './flex-align/flex-align';
 import {FlexFillDirective} from './flex-fill/flex-fill';
-import {DefaultLayoutAlignDirective} from './layout-align/layout-align';
+import {DefaultLayoutAlignDirective, LayoutAlignDirective} from './layout-align/layout-align';
 
 
 const ALL_DIRECTIVES = [
@@ -28,6 +28,13 @@ const ALL_DIRECTIVES = [
   FlexFillDirective,
   DefaultFlexAlignDirective,
   DefaultFlexDirective,
+  FlexDirective,
+  FlexAlignDirective,
+  FlexOffsetDirective,
+  FlexOrderDirective,
+  LayoutDirective,
+  LayoutAlignDirective,
+  LayoutGapDirective,
 ];
 
 /**
diff --git a/src/lib/grid/align-columns/align-columns.ts b/src/lib/grid/align-columns/align-columns.ts
@@ -29,6 +29,7 @@ export class GridAlignColumnsStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-align-columns-directive'})
 export class GridAlignColumnsDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'grid-align-columns';
diff --git a/src/lib/grid/align-rows/align-rows.ts b/src/lib/grid/align-rows/align-rows.ts
@@ -29,6 +29,7 @@ export class GridAlignRowsStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-align-rows-directive'})
 export class GridAlignRowsDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'grid-align-rows';
diff --git a/src/lib/grid/area/area.ts b/src/lib/grid/area/area.ts
@@ -23,6 +23,7 @@ export class GridAreaStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-area-directive'})
 export class GridAreaDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'grid-area';
diff --git a/src/lib/grid/areas/areas.ts b/src/lib/grid/areas/areas.ts
@@ -34,6 +34,7 @@ export class GridAreasStyleBuiler extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-areas-directive'})
 export class GridAreasDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'grid-areas';
diff --git a/src/lib/grid/auto/auto.ts b/src/lib/grid/auto/auto.ts
@@ -38,6 +38,7 @@ export class GridAutoStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: `grid-auto-directive`})
 export class GridAutoDirective extends BaseDirective2 {
   @Input('gdInline')
   get inline(): boolean { return this._inline; }
diff --git a/src/lib/grid/column/column.ts b/src/lib/grid/column/column.ts
@@ -23,6 +23,7 @@ export class GridColumnStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-column-directive'})
 export class GridColumnDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'grid-column';
 
diff --git a/src/lib/grid/columns/columns.ts b/src/lib/grid/columns/columns.ts
@@ -44,6 +44,7 @@ export class GridColumnsStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-columns-directive'})
 export class GridColumnsDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'grid-columns';
 
diff --git a/src/lib/grid/gap/gap.ts b/src/lib/grid/gap/gap.ts
@@ -31,6 +31,7 @@ export class GridGapStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-gap-directive'})
 export class GridGapDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'grid-gap';
 
diff --git a/src/lib/grid/grid-align/grid-align.ts b/src/lib/grid/grid-align/grid-align.ts
@@ -24,6 +24,7 @@ export class GridAlignStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-align-directive'})
 export class GridAlignDirective extends BaseDirective2 {
 
   protected DIRECTIVE_KEY = 'grid-align';
diff --git a/src/lib/grid/module.ts b/src/lib/grid/module.ts
@@ -8,17 +8,20 @@
 import {NgModule} from '@angular/core';
 import {CoreModule} from '@angular/flex-layout/core';
 
-import {DefaultGridAlignDirective} from './grid-align/grid-align';
-import {DefaultGridAlignColumnsDirective} from './align-columns/align-columns';
-import {DefaultGridAlignRowsDirective} from './align-rows/align-rows';
-import {DefaultGridAreaDirective} from './area/area';
-import {DefaultGridAreasDirective} from './areas/areas';
-import {DefaultGridAutoDirective} from './auto/auto';
-import {DefaultGridColumnDirective} from './column/column';
-import {DefaultGridColumnsDirective} from './columns/columns';
-import {DefaultGridGapDirective} from './gap/gap';
-import {DefaultGridRowDirective} from './row/row';
-import {DefaultGridRowsDirective} from './rows/rows';
+import {DefaultGridAlignDirective, GridAlignDirective} from './grid-align/grid-align';
+import {
+  DefaultGridAlignColumnsDirective,
+  GridAlignColumnsDirective,
+} from './align-columns/align-columns';
+import {DefaultGridAlignRowsDirective, GridAlignRowsDirective} from './align-rows/align-rows';
+import {DefaultGridAreaDirective, GridAreaDirective} from './area/area';
+import {DefaultGridAreasDirective, GridAreasDirective} from './areas/areas';
+import {DefaultGridAutoDirective, GridAutoDirective} from './auto/auto';
+import {DefaultGridColumnDirective, GridColumnDirective} from './column/column';
+import {DefaultGridColumnsDirective, GridColumnsDirective} from './columns/columns';
+import {DefaultGridGapDirective, GridGapDirective} from './gap/gap';
+import {DefaultGridRowDirective, GridRowDirective} from './row/row';
+import {DefaultGridRowsDirective, GridRowsDirective} from './rows/rows';
 
 
 const ALL_DIRECTIVES = [
@@ -33,6 +36,17 @@ const ALL_DIRECTIVES = [
   DefaultGridGapDirective,
   DefaultGridRowDirective,
   DefaultGridRowsDirective,
+  GridAlignColumnsDirective,
+  GridAlignRowsDirective,
+  GridAreaDirective,
+  GridAreasDirective,
+  GridAutoDirective,
+  GridColumnDirective,
+  GridColumnsDirective,
+  GridGapDirective,
+  GridAlignDirective,
+  GridRowDirective,
+  GridRowsDirective,
 ];
 
 /**
diff --git a/src/lib/grid/row/row.ts b/src/lib/grid/row/row.ts
@@ -23,6 +23,7 @@ export class GridRowStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-row-directive'})
 export class GridRowDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'grid-row';
 
diff --git a/src/lib/grid/rows/rows.ts b/src/lib/grid/rows/rows.ts
@@ -44,6 +44,7 @@ export class GridRowsStyleBuilder extends StyleBuilder {
   }
 }
 
+@Directive({selector: 'grid-rows-directive'})
 export class GridRowsDirective extends BaseDirective2 {
   protected DIRECTIVE_KEY = 'grid-rows';
 

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export class ImgSrcStyleBuilder extends StyleBuilder {`
`23`	`23`	`}`
`24`	`24`	`}`
`25`	`25`
	`26`	`+@Directive({selector: 'img-src-directive'})`
`26`	`27`	`export class ImgSrcDirective extends BaseDirective2 {`
`27`	`28`	`protected DIRECTIVE_KEY = 'img-src';`
`28`	`29`	`protected defaultSrc = '';`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ export class ShowHideStyleBuilder extends StyleBuilder {`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`
	`44`	`+@Directive({selector: 'show-hide-directive'})`
`44`	`45`	`export class ShowHideDirective extends BaseDirective2 implements AfterViewInit, OnChanges {`
`45`	`46`	`protected DIRECTIVE_KEY = 'show-hide';`
`46`	`47`
Original file line number	Diff line number	Diff line change
@@ -199,6 +199,7 @@ const selector = `
`199`	`199`	`*`
`200`	`200`	`* @see https://css-tricks.com/snippets/css/a-guide-to-flexbox/`
`201`	`201`	`*/`
	`202`	`+@Directive({selector: 'flex-directive'})`
`202`	`203`	`export class FlexDirective extends BaseDirective2 {`
`203`	`204`
`204`	`205`	`protected DIRECTIVE_KEY = 'flex';`