feature(directives): auto trim for string values (#97)

* Added auto trim directive for string values

* feature(docs): add directives doc

* update(directives): correct type, remove OnInit

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

@@ -67,6 +67,11 @@ export class ComponentsComponent {
     icon: 'http',
     route: 'http',
     title: 'Http',
+  }, {
+    description: 'Core directives & utilities',
+    icon: 'wb_iridescent',
+    route: 'directives',
+    title: 'Directives',
   }, {
     description: 'Custom Angular pipes (filters)',
     icon: 'filter_list',

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

@@ -15,6 +15,7 @@ import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
 import { DialogsDemoComponent } from './dialogs/dialogs.component';
+import { DirectivesComponent } from './directives/directives.component';
 import { PipesComponent } from './pipes/pipes.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
@@ -39,6 +40,7 @@ import { CovalentChipsModule } from '../../../platform/chips';
     JsonFormatterDemoComponent,
     ChipsDemoComponent,
     DialogsDemoComponent,
+    DirectivesComponent,
     PipesComponent,
   ],
   imports: [

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

@@ -13,6 +13,7 @@ import { HttpDemoComponent } from './http/http.component';
 import { JsonFormatterDemoComponent } from './json-formatter/json-formatter.component';
 import { ChipsDemoComponent } from './chips/chips.component';
 import { DialogsDemoComponent } from './dialogs/dialogs.component';
+import { DirectivesComponent } from './directives/directives.component';
 import { PipesComponent } from './pipes/pipes.component';
 
 const routes: Routes = [{
@@ -52,6 +53,9 @@ const routes: Routes = [{
     }, {
       component: DialogsDemoComponent,
       path: 'dialogs',
+    }, {
+      component: DirectivesComponent,
+      path: 'directives',
     }, {
       component: PipesComponent,
       path: 'pipes',

src/app/components/components/directives/directives.component.html

@@ -0,0 +1,64 @@
+<md-card>
+  <md-card-title>Directives</md-card-title>
+  <md-card-subtitle>Core Covalent directives &amp; utilities</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>A directive is essentially like a component functionally without a template. There are structural and attribute directives.</p>
+    <p>Structural directives can change the DOM layout by adding and removing DOM elements. NgFor and NgIf are two familiar examples.</p>
+    <p>An Attribute directive can change the appearance or behavior of an element. The built-in NgStyle directive, for example, can change several element styles at the same time.</p>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="primary" href="https://angular.io/docs/ts/latest/guide/attribute-directives.html" target="_blank">
+    More on Angular 2 directives
+    </a>
+  </md-card-actions>
+</md-card>
+
+<md-card>
+  <md-card-title>Autotrim directive</md-card-title>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p class="md-body-1">Use <code>tdAutoTrim</code> on an input to automatically trim the characters.</p>
+    <p>Try entering white spaces before or after a word this input:</p>
+    <div layout="row">
+      <md-input flex tdAutoTrim [(ngModel)]="trim" placeholder="This will be autotrimmed"></md-input>
+    </div>
+    <p>Usage:</p>
+    <td-highlight lang="html">
+        <![CDATA[
+          <md-input tdAutoTrim [(ngModel)]="yourmodel" placeholder="This will be autotrimmed"></md-input>
+        ]]>
+    </td-highlight>
+  </md-card-content>
+</md-card>
+
+<md-card>
+  <md-card-title>Toggle directive</md-card-title>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p class="md-body-1">Use <code>[tdToggle]="variable"</code> on an element to toggle it open or closed (used in Stepper &amp; Expansion Panels).</p>
+    <p>Click on this to open a div:</p>
+    <button md-raised-button color="accent" (click)="toggle()">Toggle</button>
+    <div [tdToggle]="toggleDiv" [hidden]>
+      Reveal or hide with a toggle click!
+    </div>
+    <p>HTML:</p>
+    <td-highlight lang="html">
+        <![CDATA[
+          <button md-raised-button color="accent" (click)="toggle()">Toggle</button>
+          <div [tdToggle]="toggleDiv" [hidden]>
+            Reveal or hide with a toggle click!
+          </div>
+        ]]>
+    </td-highlight>
+    <p>TypeScript:</p>
+    <td-highlight lang="typescript">
+        toggleDiv: boolean = true;
+
+        toggle(): any {{ '{' }}
+          this.toggleDiv = !this.toggleDiv;
+        {{ '}' }}
+    </td-highlight>
+  </md-card-content>
+</md-card>

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

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'directives-demo',
+  styleUrls: [ 'directives.component.scss' ],
+  templateUrl: 'directives.component.html',
+})
+export class DirectivesComponent {
+
+  toggleDiv: boolean = true;
+
+  toggle(): void {
+    this.toggleDiv = !this.toggleDiv;
+  }
+}

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

@@ -61,6 +61,11 @@ export class ComponentsOverviewComponent {
       icon: 'http',
       route: 'http',
       title: 'Http',
+    }, {
+      color: 'light-blue-700',
+      icon: 'wb_iridescent',
+      route: 'directives',
+      title: 'Directives',
     }, {
       color: 'deep-orange-700',
       icon: 'filter_list',

src/platform/core/directives/auto-trim/auto-trim.directive.ts

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { HostListener, Host, Optional } from '@angular/core';
+import { NgModel } from '@angular/forms';
+
+@Directive({
+  selector: '[tdAutoTrim]',
+})
+export class TdAutoTrimDirective {
+
+  constructor(@Optional() @Host() private _model: NgModel) {}
+
+  /**
+   * Listens to host's (blur) event and trims value.
+   */
+  @HostListener('blur', ['$event'])
+  onBlur(event: Event): void {
+    if (this._model && this._model.value && typeof(this._model.value) === 'string') {
+      this._model.update.emit(this._model.value.trim());
+    }
+  }
+}

src/platform/core/index.ts

@@ -44,7 +44,7 @@ import { TdStepBodyComponent } from './steps/step-body/step-body.component';
 import { TdStepComponent, TdStepActionsDirective, TdStepSummaryDirective,
          TdStepContentDirective } from './steps/step.component';
 
-export const TD_STEPS_DIRECTIVES: Type<any>[] = [
+export const TD_STEP_DIRECTIVES: Type<any>[] = [
   TdStepsComponent,
   TdStepComponent,
   TdStepHeaderComponent,
@@ -117,9 +117,17 @@ export { TdPromptDialogComponent } from './dialogs/prompt-dialog/prompt-dialog.c
 
 import { TdToggleDirective } from './directives/toggle/toggle.directive';
 import { TdFadeDirective } from './directives/fade/fade.directive';
+import { TdAutoTrimDirective } from './directives/auto-trim/auto-trim.directive';
+
+export const TD_PLATFORM_DIRECTIVES: Type<any>[] = [
+  TdToggleDirective,
+  TdFadeDirective,
+  TdAutoTrimDirective,
+];
 
 export { TdToggleDirective } from './directives/toggle/toggle.directive';
 export { TdFadeDirective } from './directives/fade/fade.directive';
+export { TdAutoTrimDirective } from './directives/auto-trim/auto-trim.directive';
 
 /**
  * PIPES
@@ -170,11 +178,10 @@ export { TdMediaToggleDirective } from './media/directives/media-toggle.directiv
     TD_LAYOUT_DIRECTIVES,
     TdLoadingDirective,
     TdLoadingComponent,
-    TD_STEPS_DIRECTIVES,
+    TD_STEP_DIRECTIVES,
     TD_EXPANSION_DIRECTIVES,
     TD_DIALOG_DIRECTIVES,
-    TdFadeDirective,
-    TdToggleDirective,
+    TD_PLATFORM_DIRECTIVES,
   ],
   exports: [
     HttpModule,
@@ -188,11 +195,10 @@ export { TdMediaToggleDirective } from './media/directives/media-toggle.directiv
     TD_LAYOUT_DIRECTIVES,
     TdLoadingDirective,
     TdLoadingComponent,
-    TD_STEPS_DIRECTIVES,
+    TD_STEP_DIRECTIVES,
     TD_EXPANSION_DIRECTIVES,
     TD_DIALOG_DIRECTIVES,
-    TdFadeDirective,
-    TdToggleDirective,
+    TD_PLATFORM_DIRECTIVES,
   ],
   entryComponents: [ TD_DIALOG_ENTRY_COMPONENTS ],
 })