From 01cbd92b7e668502cf1be3b1a323962efe640940 Mon Sep 17 00:00:00 2001 From: Ed Morales Date: Wed, 12 Oct 2016 09:31:07 -0700 Subject: [PATCH] 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 --- .../components/components.component.ts | 5 ++ .../components/components.module.ts | 2 + .../components/components.routes.ts | 4 ++ .../directives/directives.component.html | 64 +++++++++++++++++++ .../directives/directives.component.scss | 0 .../directives/directives.component.ts | 15 +++++ .../components/overview/overview.component.ts | 5 ++ .../auto-trim/auto-trim.directive.ts | 21 ++++++ src/platform/core/index.ts | 20 ++++-- 9 files changed, 129 insertions(+), 7 deletions(-) create mode 100644 src/app/components/components/directives/directives.component.html create mode 100644 src/app/components/components/directives/directives.component.scss create mode 100644 src/app/components/components/directives/directives.component.ts create mode 100644 src/platform/core/directives/auto-trim/auto-trim.directive.ts diff --git a/src/app/components/components/components.component.ts b/src/app/components/components/components.component.ts index d9eae919bd..f14901768a 100644 --- a/src/app/components/components/components.component.ts +++ b/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', diff --git a/src/app/components/components/components.module.ts b/src/app/components/components/components.module.ts index ddebc2f825..748ce717ae 100644 --- a/src/app/components/components/components.module.ts +++ b/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: [ diff --git a/src/app/components/components/components.routes.ts b/src/app/components/components/components.routes.ts index a2fd1a2435..7b64fbd594 100644 --- a/src/app/components/components/components.routes.ts +++ b/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', diff --git a/src/app/components/components/directives/directives.component.html b/src/app/components/components/directives/directives.component.html new file mode 100644 index 0000000000..a8ef6105a5 --- /dev/null +++ b/src/app/components/components/directives/directives.component.html @@ -0,0 +1,64 @@ + + Directives + Core Covalent directives & utilities + + +

A directive is essentially like a component functionally without a template. There are structural and attribute directives.

+

Structural directives can change the DOM layout by adding and removing DOM elements. NgFor and NgIf are two familiar examples.

+

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.

+ + + + + More on Angular 2 directives + + + + + + Autotrim directive + + +

Use tdAutoTrim on an input to automatically trim the characters.

+

Try entering white spaces before or after a word this input:

+
+ +
+

Usage:

+ + + ]]> + + + + + + Toggle directive + + +

Use [tdToggle]="variable" on an element to toggle it open or closed (used in Stepper & Expansion Panels).

+

Click on this to open a div:

+ +
+ Reveal or hide with a toggle click! +
+

HTML:

+ + Toggle +
+ Reveal or hide with a toggle click! +
+ ]]> + +

TypeScript:

+ + toggleDiv: boolean = true; + + toggle(): any {{ '{' }} + this.toggleDiv = !this.toggleDiv; + {{ '}' }} + + + \ No newline at end of file diff --git a/src/app/components/components/directives/directives.component.scss b/src/app/components/components/directives/directives.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/components/components/directives/directives.component.ts b/src/app/components/components/directives/directives.component.ts new file mode 100644 index 0000000000..a4dc911bc1 --- /dev/null +++ b/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; + } +} diff --git a/src/app/components/components/overview/overview.component.ts b/src/app/components/components/overview/overview.component.ts index b507633ff1..5704b67aed 100644 --- a/src/app/components/components/overview/overview.component.ts +++ b/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', diff --git a/src/platform/core/directives/auto-trim/auto-trim.directive.ts b/src/platform/core/directives/auto-trim/auto-trim.directive.ts new file mode 100644 index 0000000000..7210e2b53d --- /dev/null +++ b/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()); + } + } +} diff --git a/src/platform/core/index.ts b/src/platform/core/index.ts index d422b6eb1f..75c3e96e44 100644 --- a/src/platform/core/index.ts +++ b/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[] = [ +export const TD_STEP_DIRECTIVES: Type[] = [ 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[] = [ + 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 ], })