feature(dynamic-forms): introduction to dynamic-forms module. closes(#8)

scripts/inline-resources.js

@@ -45,6 +45,7 @@ function inlineResources(globs) {
         .then(content => inlineTemplate(filePath, content))
         .then(content => inlineStyle(filePath, content))
         .then(content => removeModuleId(filePath, content))
+        .then(content => replaceRelativePath(filePath, content))
         .then(content => writeFile(filePath, content))
         .catch(err => {
           console.error('An error occured: ', err);
@@ -102,6 +103,9 @@ function inlineStyle(filePath, content) {
   });
 }
 
+function replaceRelativePath(_, content) {
+  return content.replace(/((\.\.\/)+core)/gm, '@covalent/core');
+}
 
 /**
  * Remove every mention of `moduleId: module.id`.

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { CovalentHighlightModule } from '../platform/highlight';
 import { CovalentHttpModule } from '../platform/http';
 import { CovalentMarkdownModule } from '../platform/markdown';
 import { CovalentChartsModule } from '../platform/charts';
+import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { CovalentChartsModule } from '../platform/charts';
     CovalentHighlightModule.forRoot(),
     CovalentMarkdownModule.forRoot(),
     CovalentChartsModule.forRoot(),
+    CovalentDynamicFormsModule.forRoot(),
     appRoutes,
   ], // modules needed to run this module
   providers: [

src/app/components/components/components.component.ts

@@ -82,6 +82,11 @@ export class ComponentsComponent {
     icon: 'search',
     route: 'search',
     title: 'Search',
+  }, {
+    description: 'Build forms from a JS object',
+    icon: 'format_align_center',
+    route: 'dynamic-forms',
+    title: 'Dynamic Forms',
   }, {
     description: 'Responsive service & directive',
     icon: 'devices',

src/app/components/components/components.module.ts

@@ -21,12 +21,14 @@ import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
+import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { MaterialComponentsComponent, DialogComponent } from './material-components/material-components.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
 import { CovalentMarkdownModule } from '../../../platform/markdown';
 import { CovalentChartsModule } from '../../../platform/charts';
+import { CovalentDynamicFormsModule } from '../../../platform/dynamic-forms';
 
 @NgModule({
   declarations: [
@@ -49,6 +51,7 @@ import { CovalentChartsModule } from '../../../platform/charts';
     DataTableDemoComponent,
     PagingDemoComponent,
     SearchDemoComponent,
+    DynamicFormsDemoComponent,
     MaterialComponentsComponent,
     DialogComponent,
   ],
@@ -57,6 +60,7 @@ import { CovalentChartsModule } from '../../../platform/charts';
     CovalentHighlightModule.forRoot(),
     CovalentMarkdownModule.forRoot(),
     CovalentChartsModule.forRoot(),
+    CovalentDynamicFormsModule.forRoot(),
     componentsRoutes,
   ],
   entryComponents: [ DialogComponent ],

src/app/components/components/components.routes.ts

@@ -19,6 +19,7 @@ import { ChartsDemoComponent } from './charts/charts.component';
 import { DataTableDemoComponent } from './data-table/data-table.component';
 import { PagingDemoComponent } from './paging/paging.component';
 import { SearchDemoComponent } from './search/search.component';
+import { DynamicFormsDemoComponent } from './dynamic-forms/dynamic-forms.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
 
 const routes: Routes = [{
@@ -79,6 +80,9 @@ const routes: Routes = [{
     }, {
       component: PagingDemoComponent,
       path: 'paging',
+    }, {
+      component: DynamicFormsDemoComponent,
+      path: 'dynamic-forms',
     },
   ],
   component: ComponentsComponent,

src/app/components/components/dynamic-forms/dynamic-forms.component.html

@@ -0,0 +1,193 @@
+<md-card>
+  <md-card-title>Dynamic Forms</md-card-title>
+  <md-card-subtitle>Build forms from a JS object</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h3 class="md-title">Dynamic Text Elements</h3>
+    <md-divider></md-divider>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-dynamic-forms [elements]="textElements">
+        </td-dynamic-forms>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-dynamic-forms [elements]="textElements">
+            </td-dynamic-forms>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          {{textElements | json}}
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Dynamic Number Elements</h3>
+    <md-divider></md-divider>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-dynamic-forms [elements]="numberElements">
+        </td-dynamic-forms>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-dynamic-forms [elements]="numberElements">
+            </td-dynamic-forms>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          {{numberElements | json}}
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Dynamic Boolean Elements</h3>
+    <md-divider></md-divider>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-dynamic-forms [elements]="booleanElements">
+        </td-dynamic-forms>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-dynamic-forms [elements]="booleanElements">
+            </td-dynamic-forms>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          {{booleanElements | json}}
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-content>
+    <h3 class="md-title">Dynamic Array Elements</h3>
+    <md-divider></md-divider>
+    <md-tab-group md-stretch-tabs>
+      <md-tab>
+        <template md-tab-label>Demo</template>
+        <td-dynamic-forms [elements]="arrayElements">
+        </td-dynamic-forms>
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Code</template>
+        <p>HTML:</p>
+        <td-highlight lang="html">
+          <![CDATA[
+            <td-dynamic-forms [elements]="arrayElements">
+            </td-dynamic-forms>
+          ]]>
+        </td-highlight>
+        <p>Typescript:</p>
+        <td-highlight lang="typescript">
+          {{arrayElements | json}}
+        </td-highlight>
+      </md-tab>
+    </md-tab-group>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>TdDynamicFormsComponent</md-card-title>
+  <md-card-subtitle>How to use this component</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h2><code><![CDATA[<td-dynamic-forms>]]></code></h2>
+    <p>Use <code><![CDATA[<td-dynamic-forms>]]></code> element to generate a form dynamically.</p>
+    <p>Pass an array of javascript objects that implement [ITdDynamicElementConfig] with the information to be rendered to the [elements] attribute.</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        export interface ITdDynamicElementConfig {
+          label?: string;
+          name: string;
+          type: TdDynamicType | TdDynamicElement;
+          required?: boolean;
+          min?: any;
+          max?: any;
+          default?: any;
+        }
+      ]]>
+    </td-highlight>    
+    <h3>Properties:</h3>
+    <p>The <code><![CDATA[<td-dynamic-forms>]]></code> component has {{dynamicFormsAttrs.length}} properties:</p>
+    <md-list>
+      <template let-attr let-last="attr" ngFor [ngForOf]="dynamicFormsAttrs">
+        <a md-list-item layout-align="row">
+          <h3 md-line> {{attr.name}}: <span>{{attr.type}}</span></h3>
+          <p md-line> {{attr.description}} </p>
+        </a>
+        <md-divider *ngIf="!last"></md-divider>
+      </template>
+    </md-list>
+    <h3>Example:</h3>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+      <![CDATA[
+        <td-dynamic-forms [elements]="elements">
+        </td-dynamic-forms>
+      ]]>
+    </td-highlight>
+    <p>Typescript:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { ITdDynamicElementConfig, TdDynamicElement, TdDynamicType } from '@covalent/dynamic-forms';
+        ...
+        })
+        export class Demo {
+          elements: ITdDynamicElementConfig[] = [{
+            name: 'input-without-label',
+            type: TdDynamicElement.Input,
+            required: false,
+          }, {
+            name: 'input-with-label',
+            label: 'Input Label',
+            type: TdDynamicElement.Input,
+            required: true,
+          }, {
+            name: 'text-with-default',
+            type: TdDynamicType.Text,
+            required: false,
+            default: 'Default',
+          }];
+        }
+      ]]>
+    </td-highlight>
+    <h3>Setup:</h3>
+    <p>Import the [CovalentDynamicFormsModule] using the <code>forRoot()</code> method in your NgModule:</p>
+    <td-highlight lang="typescript">
+      <![CDATA[
+        import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
+        @NgModule({
+          imports: [
+            CovalentDynamicFormsModule.forRoot(),
+            ...
+          ],
+          ...
+        })
+        export class MyModule {}
+      ]]>
+    </td-highlight>
+  </md-card-content>
+</md-card>

src/app/components/components/dynamic-forms/dynamic-forms.component.ts

@@ -0,0 +1,97 @@
+import { Component } from '@angular/core';
+import { TdDynamicType, ITdDynamicElementConfig, TdDynamicElement } from '@covalent/dynamic-forms';
+
+@Component({
+  selector: 'dynamic-forms-demo',
+  styleUrls: [ './dynamic-forms.component.scss' ],
+  templateUrl: './dynamic-forms.component.html',
+})
+export class DynamicFormsDemoComponent {
+
+  dynamicFormsAttrs: any[] = [{
+    description: `JS Object that will render the elements depending on its config.
+                  [name] property is required.`,
+    name: 'elements',
+    type: 'ITdDynamicElementConfig[]',
+  }, {
+    description: `Getter property for dynamic [FormGroup].`,
+    name: 'form',
+    type: 'get(): FormGroup',
+  }, {
+    description: `Getter property for [valid] of dynamic [FormGroup].`,
+    name: 'valid',
+    type: 'get(): boolean',
+  }, {
+    description: `Getter property for [value] of dynamic [FormGroup].`,
+    name: 'value',
+    type: 'get(): any',
+  }, {
+    description: `Getter property for [errors] of dynamic [FormGroup].`,
+    name: 'errors',
+    type: 'get(): {[name: string]: any}',
+  }, {
+    description: `Getter property for [controls] of dynamic [FormGroup].`,
+    name: 'controls',
+    type: 'get(): {[key: string]: AbstractControl}',
+  }];
+
+  textElements: ITdDynamicElementConfig[] = [{
+    name: 'input',
+    type: TdDynamicElement.Input,
+    required: false,
+  }, {
+    name: 'required-input',
+    label: 'Input Label',
+    type: TdDynamicElement.Input,
+    required: true,
+  }, {
+    name: 'textarea',
+    type: TdDynamicElement.Textarea,
+    required: false,
+  }, {
+    name: 'text',
+    type: TdDynamicType.Text,
+    required: false,
+    default: 'Default',
+  }];
+
+  numberElements: ITdDynamicElementConfig[] = [{
+    name: 'number',
+    label: 'Number (coming soon)',
+    type: TdDynamicType.Number,
+    required: true,
+    min: 18,
+    max: 70,
+  }, {
+    name: 'slider',
+    type: TdDynamicElement.Slider,
+    min: 18,
+    max: 70,
+  }];
+
+  booleanElements: ITdDynamicElementConfig[] = [{
+    name: 'boolean',
+    label: 'Boolean Label',
+    type: TdDynamicType.Boolean,
+    default: false,
+  }, {
+    name: 'slide-toggle',
+    type: TdDynamicElement.SlideToggle,
+    default: true,
+  }, {
+    name: 'checkbox',
+    type: TdDynamicElement.Checkbox,
+  }];
+
+  arrayElements: ITdDynamicElementConfig[] = [{
+    name: 'array',
+    type: TdDynamicType.Array,
+    selections: ['Test1', 'Test2', 'Test3', 'Test4'],
+    default: 'Test1',
+  }, {
+    name: 'required-select',
+    type: TdDynamicElement.Select,
+    selections: ['Test1', 'Test2', 'Test3', 'Test4'],
+    required: true,
+  }];
+}

src/app/components/components/overview/overview.component.ts

@@ -76,6 +76,11 @@ export class ComponentsOverviewComponent {
       icon: 'search',
       route: 'search',
       title: 'Search',
+    }, {
+      color: 'green-700',
+      icon: 'format_align_center',
+      route: 'dynamic-forms',
+      title: 'Dynamic Forms',
     }, {
       color: 'red-700',
       icon: 'devices',