From 5641424db37a7ab0156278340227efbd608065d6 Mon Sep 17 00:00:00 2001 From: Ken Sodemann Date: Tue, 5 Dec 2017 15:03:18 -0600 Subject: [PATCH] feat(value-accessors): move the value accessors into @ionic/angular --- packages/angular/demo/package-lock.json | 66 +++++++++---------- .../basic-inputs-page.module.ts | 11 +++- .../group-inputs-page.module.ts | 4 +- .../demo/src/app/shared/shared.module.ts | 22 ------- .../directives/ion-boolean-value-accessor.ts} | 23 +++++-- .../directives/ion-radio-value-accessor.ts} | 6 +- .../directives/ion-select-value-accessor.ts} | 7 +- .../directives/ion-text-value-accessor.ts} | 7 +- packages/angular/src/module.ts | 20 ++++-- 9 files changed, 85 insertions(+), 81 deletions(-) delete mode 100644 packages/angular/demo/src/app/shared/shared.module.ts rename packages/angular/{demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts => src/directives/ion-boolean-value-accessor.ts} (66%) rename packages/angular/{demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts => src/directives/ion-radio-value-accessor.ts} (83%) rename packages/angular/{demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts => src/directives/ion-select-value-accessor.ts} (79%) rename packages/angular/{demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts => src/directives/ion-text-value-accessor.ts} (79%) diff --git a/packages/angular/demo/package-lock.json b/packages/angular/demo/package-lock.json index 36c539e979..5499e0c8d7 100644 --- a/packages/angular/demo/package-lock.json +++ b/packages/angular/demo/package-lock.json @@ -38,9 +38,9 @@ } }, "@angular/animations": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-beta.2.tgz", - "integrity": "sha1-LtBb+g7SLW0VUGWHhellwfv+xac=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-5.1.0-rc.1.tgz", + "integrity": "sha1-e0EflmDc8aKn0d1qDWA76+8oC+I=", "requires": { "tslib": "1.8.0" } @@ -172,25 +172,25 @@ } }, "@angular/common": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-beta.2.tgz", - "integrity": "sha1-AnsWuNL2PrFNn7yEoKXdkZRYhdY=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-5.1.0-rc.1.tgz", + "integrity": "sha1-LiTxC4k/bUfmUWpZXRvCwIEMJ1k=", "requires": { "tslib": "1.8.0" } }, "@angular/compiler": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-beta.2.tgz", - "integrity": "sha1-bIjDSFVY3PhRRPVe2xKZ2ZzbP+w=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-5.1.0-rc.1.tgz", + "integrity": "sha1-1sS1JkLOllo6os3CU5fPEbqfRyk=", "requires": { "tslib": "1.8.0" } }, "@angular/compiler-cli": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-beta.2.tgz", - "integrity": "sha1-YrY+ML2ukQwyKmK3b6eQ3Ups31M=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-5.1.0-rc.1.tgz", + "integrity": "sha1-zb0OPIf/wCxDCf6vyXHWdOIfIDA=", "dev": true, "requires": { "chokidar": "1.7.0", @@ -200,55 +200,55 @@ } }, "@angular/core": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-beta.2.tgz", - "integrity": "sha1-6UshyuRHnK7ZSGI5sGUwKpfF/U8=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-5.1.0-rc.1.tgz", + "integrity": "sha1-rcO4A4I+tR7gBkKqbVSWJHe9uOE=", "requires": { "tslib": "1.8.0" } }, "@angular/forms": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-beta.2.tgz", - "integrity": "sha1-/u7ikEHM4ifMUOJU6+zC8Z3FKe4=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.1.0-rc.1.tgz", + "integrity": "sha1-AJl15xMG+0/injS/Di3MPrLFplM=", "requires": { "tslib": "1.8.0" } }, "@angular/http": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-beta.2.tgz", - "integrity": "sha1-k1vquir+oZLWp1ocO419/Xh2QbA=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-5.1.0-rc.1.tgz", + "integrity": "sha1-HyK7ODb04RKdO+NIhFSbbTB6TxQ=", "requires": { "tslib": "1.8.0" } }, "@angular/language-service": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-beta.2.tgz", - "integrity": "sha1-nWa0OxQ0b8cRutimpnfIiMVzxRs=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-5.1.0-rc.1.tgz", + "integrity": "sha1-HeN+4dTmEgbKBLZp0tO63iPbXBk=", "dev": true }, "@angular/platform-browser": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-beta.2.tgz", - "integrity": "sha1-zPyp0XLwMxN8g/L76LcC/nIExdU=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.1.0-rc.1.tgz", + "integrity": "sha1-s499o87vvwcL2rUwD4buez8h2wc=", "requires": { "tslib": "1.8.0" } }, "@angular/platform-browser-dynamic": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-beta.2.tgz", - "integrity": "sha1-vuHTf3MAAw7dhV7fZjEbDUkyUtU=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-5.1.0-rc.1.tgz", + "integrity": "sha1-EnSnffyozWG6Y1/q4QhIf9jBErs=", "requires": { "tslib": "1.8.0" } }, "@angular/router": { - "version": "5.1.0-beta.2", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-beta.2.tgz", - "integrity": "sha1-oiuMDgi4HIsJULmmaKqJPp8cDkw=", + "version": "5.1.0-rc.1", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.1.0-rc.1.tgz", + "integrity": "sha1-RRxDR2PDYbdbL++see2SH24DtV8=", "requires": { "tslib": "1.8.0" } diff --git a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.module.ts b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.module.ts index e837031eaa..c4e60de2dc 100644 --- a/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.module.ts +++ b/packages/angular/demo/src/app/basic-inputs-page/basic-inputs-page.module.ts @@ -1,13 +1,18 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { BasicInputsPageComponent } from './basic-inputs-page.component'; +import { IonicAngularModule } from '@ionic/angular'; -import { SharedModule } from '../shared/shared.module'; +import { BasicInputsPageComponent } from './basic-inputs-page.component'; import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module'; @NgModule({ - imports: [CommonModule, FormsModule, BasicInputsPageRoutingModule, SharedModule], + imports: [ + BasicInputsPageRoutingModule, + CommonModule, + FormsModule, + IonicAngularModule + ], declarations: [BasicInputsPageComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.module.ts b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.module.ts index 7c1f05bf50..bb0d0c128c 100644 --- a/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.module.ts +++ b/packages/angular/demo/src/app/group-inputs-page/group-inputs-page.module.ts @@ -1,17 +1,17 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; +import { IonicAngularModule } from '@ionic/angular'; import { GroupInputsPageComponent } from './group-inputs-page.component'; import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module'; -import { SharedModule } from '../shared/shared.module'; @NgModule({ imports: [ CommonModule, FormsModule, GroupInputsPageRoutingModule, - SharedModule + IonicAngularModule ], declarations: [GroupInputsPageComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] diff --git a/packages/angular/demo/src/app/shared/shared.module.ts b/packages/angular/demo/src/app/shared/shared.module.ts deleted file mode 100644 index 06eb886f0e..0000000000 --- a/packages/angular/demo/src/app/shared/shared.module.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { NgModule } from '@angular/core'; - -import { IonBooleanValueAccessorDirective } from './ion-boolean-value-accessor/ion-boolean-value-accessor.directive'; -import { IonRadioValueAccessorDirective } from './ion-radio-value-accessor/ion-radio-value-accessor.directive'; -import { IonSelectValueAccessorDirective } from './ion-select-value-accessor/ion-select-value-accessor.directive'; -import { IonTextValueAccessorDirective } from './ion-text-value-accessor/ion-text-value-accessor.directive'; - -@NgModule({ - exports: [ - IonBooleanValueAccessorDirective, - IonRadioValueAccessorDirective, - IonSelectValueAccessorDirective, - IonTextValueAccessorDirective - ], - declarations: [ - IonBooleanValueAccessorDirective, - IonRadioValueAccessorDirective, - IonSelectValueAccessorDirective, - IonTextValueAccessorDirective - ] -}) -export class SharedModule {} diff --git a/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts b/packages/angular/src/directives/ion-boolean-value-accessor.ts similarity index 66% rename from packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts rename to packages/angular/src/directives/ion-boolean-value-accessor.ts index 3ca6c1e105..f403b96ece 100644 --- a/packages/angular/demo/src/app/shared/ion-boolean-value-accessor/ion-boolean-value-accessor.directive.ts +++ b/packages/angular/src/directives/ion-boolean-value-accessor.ts @@ -1,13 +1,22 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; -import { ControlValueAccessor, DefaultValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; +import { + ControlValueAccessor, + DefaultValueAccessor, + NG_VALUE_ACCESSOR +} from '@angular/forms'; -// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-checkbox,ion-toggle', - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonBooleanValueAccessorDirective, multi: true }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: IonBooleanValueAccessor, + multi: true + } + ] }) -export class IonBooleanValueAccessorDirective implements ControlValueAccessor { +export class IonBooleanValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { this.onChange = () => {}; this.onTouched = () => {}; @@ -39,6 +48,10 @@ export class IonBooleanValueAccessorDirective implements ControlValueAccessor { } setDisabledState(isDisabled: boolean): void { - this.renderer.setProperty(this.element.nativeElement, 'disabled', isDisabled); + this.renderer.setProperty( + this.element.nativeElement, + 'disabled', + isDisabled + ); } } diff --git a/packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts b/packages/angular/src/directives/ion-radio-value-accessor.ts similarity index 83% rename from packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts rename to packages/angular/src/directives/ion-radio-value-accessor.ts index 1086c8a46e..18d09d7c02 100644 --- a/packages/angular/demo/src/app/shared/ion-radio-value-accessor/ion-radio-value-accessor.directive.ts +++ b/packages/angular/src/directives/ion-radio-value-accessor.ts @@ -12,21 +12,19 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms'; -// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-radio', providers: [ { provide: NG_VALUE_ACCESSOR, - useExisting: IonRadioValueAccessorDirective, + useExisting: IonRadioValueAccessor, multi: true } ] }) -export class IonRadioValueAccessorDirective implements ControlValueAccessor { +export class IonRadioValueAccessor implements ControlValueAccessor { @Input() value: any; - @Input() name: string; onChange: (value: any) => void; onTouched: () => void; diff --git a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts b/packages/angular/src/directives/ion-select-value-accessor.ts similarity index 79% rename from packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts rename to packages/angular/src/directives/ion-select-value-accessor.ts index e03e4920be..763f101fde 100644 --- a/packages/angular/demo/src/app/shared/ion-select-value-accessor/ion-select-value-accessor.directive.ts +++ b/packages/angular/src/directives/ion-select-value-accessor.ts @@ -1,15 +1,14 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here -// May also need to look at this to see if we need anything else: +// NOTE: May need to look at this to see if we need anything else: // https://github.com/angular/angular/blob/5.0.2/packages/forms/src/directives/select_control_value_accessor.ts#L28-L158 @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-select, ion-radio-group, ion-segment, ion-datetime', - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessorDirective, multi: true }] + providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonSelectValueAccessor, multi: true }] }) -export class IonSelectValueAccessorDirective implements ControlValueAccessor { +export class IonSelectValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { this.onChange = () => {}; this.onTouched = () => {}; diff --git a/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts b/packages/angular/src/directives/ion-text-value-accessor.ts similarity index 79% rename from packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts rename to packages/angular/src/directives/ion-text-value-accessor.ts index 0743569d50..0f400238a9 100644 --- a/packages/angular/demo/src/app/shared/ion-text-value-accessor/ion-text-value-accessor.directive.ts +++ b/packages/angular/src/directives/ion-text-value-accessor.ts @@ -1,15 +1,14 @@ import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -// NOTE: this is just a sample. It really belongs in @ionic/angular and not at all int his app here -// May also need to look at this to see if we need anything else: +// NOTE: May need to look at this to see if we need anything else: // https://github.com/angular/angular/blob/5.0.1/packages/forms/src/directives/default_value_accessor.ts#L33-L101 @Directive({ /* tslint:disable-next-line:directive-selector */ selector: 'ion-input,ion-textarea', - providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessorDirective, multi: true }] + providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: IonTextValueAccessor, multi: true }] }) -export class IonTextValueAccessorDirective implements ControlValueAccessor { +export class IonTextValueAccessor implements ControlValueAccessor { constructor(private element: ElementRef, private renderer: Renderer2) { this.onChange = () => {}; this.onTouched = () => {}; diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts index 2af5d973a6..6c256e7ce0 100644 --- a/packages/angular/src/module.ts +++ b/packages/angular/src/module.ts @@ -1,15 +1,27 @@ - import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { IonBooleanValueAccessor } from './directives/ion-boolean-value-accessor'; import { IonNavDelegate } from './directives/ion-nav'; +import { IonRadioValueAccessor } from './directives/ion-radio-value-accessor'; +import { IonSelectValueAccessor } from './directives/ion-select-value-accessor'; +import { IonTextValueAccessor } from './directives/ion-text-value-accessor'; + import { AlertController } from './providers/alert-controller'; @NgModule({ declarations: [ - IonNavDelegate + IonBooleanValueAccessor, + IonNavDelegate, + IonRadioValueAccessor, + IonSelectValueAccessor, + IonTextValueAccessor ], exports: [ - IonNavDelegate + IonBooleanValueAccessor, + IonNavDelegate, + IonRadioValueAccessor, + IonSelectValueAccessor, + IonTextValueAccessor ], schemas: [ CUSTOM_ELEMENTS_SCHEMA @@ -20,4 +32,4 @@ import { AlertController } from './providers/alert-controller'; }) export class IonicAngularModule { -} \ No newline at end of file +}