diff --git a/nativescript-angular/tslint.json b/nativescript-angular/tslint.json index faae1470c..4a49adfe4 100644 --- a/nativescript-angular/tslint.json +++ b/nativescript-angular/tslint.json @@ -7,7 +7,6 @@ "component-selector": [true, "element", "", "camelCase"], "use-input-property-decorator": true, "use-output-property-decorator": true, - "use-host-property-decorator": true, "no-input-rename": true, "no-output-rename": true, "use-pipe-transform-interface": true, diff --git a/nativescript-angular/value-accessors/base-value-accessor.ts b/nativescript-angular/value-accessors/base-value-accessor.ts index 06df0584c..d7b180c56 100644 --- a/nativescript-angular/value-accessors/base-value-accessor.ts +++ b/nativescript-angular/value-accessors/base-value-accessor.ts @@ -1,10 +1,12 @@ import { ControlValueAccessor } from "@angular/forms"; +import { View } from "tns-core-modules/ui/core/view"; -export class BaseValueAccessor implements ControlValueAccessor { - constructor(public view: TView) { } - - onChange = (_) => { }; +export class BaseValueAccessor implements ControlValueAccessor { private pendingChangeNotification: number = 0; + onChange = (_) => { }; + onTouched = () => {}; + + constructor(public view: TView) { } registerOnChange(fn: (_: any) => void): void { this.onChange = (arg) => { @@ -18,11 +20,13 @@ export class BaseValueAccessor implements ControlValueAccessor { }; } - writeValue(_: any) { - // + registerOnTouched(fn: () => void): void { + this.onTouched = fn; } - registerOnTouched(_: () => void): void { - // + setDisabledState(isDisabled: boolean): void { + this.view.isEnabled = !isDisabled; } + + writeValue(_: any) { } } diff --git a/nativescript-angular/value-accessors/checked-value-accessor.ts b/nativescript-angular/value-accessors/checked-value-accessor.ts index 9b4237bcd..85d8a1a2c 100644 --- a/nativescript-angular/value-accessors/checked-value-accessor.ts +++ b/nativescript-angular/value-accessors/checked-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { Switch } from "tns-core-modules/ui/switch"; -const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => CheckedValueAccessor), multi: true}; +const CHECKED_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => CheckedValueAccessor), + multi: true, +}; /** * The accessor for setting a checked property and listening to changes that is used by the @@ -16,18 +19,16 @@ const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "Switch[ngModel], Switch[formControlName], switch[ngModel], switch[formControlName], switch[ngModel], switch[formControlName]", - providers: [CHECKED_VALUE_ACCESSOR] + selector: + "Switch[ngModel],Switch[formControlName]," + + "switch[ngModel],switch[formControlName]", + providers: [CHECKED_VALUE_ACCESSOR], + host: { + "(touch)": "onTouched()", + "(checkedChange)": "onChange($event.value)", + }, }) export class CheckedValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix - @HostListener("checkedChange", ["$event"]) - checkedChangeListener(event: any) { - this.onChange(event.value); - } - - onTouched = () => { }; - constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -35,6 +36,4 @@ export class CheckedValueAccessor extends BaseValueAccessor { // tslint: writeValue(value: any): void { this.view.checked = value; } - - registerOnTouched(fn: () => void): void { this.onTouched = fn; } } diff --git a/nativescript-angular/value-accessors/date-value-accessor.ts b/nativescript-angular/value-accessors/date-value-accessor.ts index 66e312d68..4541f9bb9 100644 --- a/nativescript-angular/value-accessors/date-value-accessor.ts +++ b/nativescript-angular/value-accessors/date-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { DatePicker } from "tns-core-modules/ui/date-picker"; -const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DateValueAccessor), multi: true}; +const DATE_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DateValueAccessor), + multi: true, +}; /** * The accessor for setting a date and listening to changes that is used by the @@ -16,18 +19,17 @@ const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "DatePicker[ngModel], DatePicker[formControlName], datePicker[ngModel], datePicker[formControlName], date-picker[ngModel], date-picker[formControlName]", - providers: [DATE_VALUE_ACCESSOR] + selector: "DatePicker[ngModel],DatePicker[formControlName]," + + "datepicker[ngModel],datepicker[formControlName]," + + "datePicker[ngModel],datePicker[formControlName]," + + "date-picker[ngModel],date-picker[formControlName]", + providers: [DATE_VALUE_ACCESSOR], + host: { + "(touch)": "onTouched()", + "(dateChange)": "onChange($event.value)", + }, }) export class DateValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix - @HostListener("dateChange", ["$event"]) - dateChangeListener(event: any) { - this.onChange(event.value); - } - - onTouched = () => { }; - constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -35,6 +37,4 @@ export class DateValueAccessor extends BaseValueAccessor { // tslint writeValue(value: any): void { this.view.date = value; } - - registerOnTouched(fn: () => void): void { this.onTouched = fn; } } diff --git a/nativescript-angular/value-accessors/number-value-accessor.ts b/nativescript-angular/value-accessors/number-value-accessor.ts index 28a528585..224a9790a 100644 --- a/nativescript-angular/value-accessors/number-value-accessor.ts +++ b/nativescript-angular/value-accessors/number-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { Slider } from "tns-core-modules/ui/slider"; -const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => NumberValueAccessor), multi: true}; +const NUMBER_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => NumberValueAccessor), + multi: true, +}; /** * The accessor for setting a value and listening to changes that is used by the @@ -16,18 +19,16 @@ const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "Slider[ngModel], Slider[formControlName], slider[ngModel], slider[formControlName], slider[ngModel], slider[formControlName]", - providers: [NUMBER_VALUE_ACCESSOR] + selector: + "Slider[ngModel],Slider[formControlName]," + + "slider[ngModel],slider[formControlName]", + providers: [NUMBER_VALUE_ACCESSOR], + host: { + "(touch)": "onTouched()", + "(valueChange)": "onChange($event.value)", + }, }) export class NumberValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix - @HostListener("valueChange", ["$event"]) - valueChangeListener(event: any) { - this.onChange(event.value); - } - - onTouched = () => { }; - constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -35,6 +36,4 @@ export class NumberValueAccessor extends BaseValueAccessor { // tslint:d writeValue(value: any): void { this.view.value = value; } - - registerOnTouched(fn: () => void): void { this.onTouched = fn; } } diff --git a/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts b/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts index 521ecbc83..462d294dc 100644 --- a/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts +++ b/nativescript-angular/value-accessors/selectedIndex-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef, AfterViewInit } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { View } from "tns-core-modules/ui/core/view"; -const SELECTED_INDEX_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => SelectedIndexValueAccessor), multi: true}; +const SELECTED_INDEX_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectedIndexValueAccessor), + multi: true, +}; export type SelectableView = {selectedIndex: number} & View; @@ -18,18 +21,28 @@ export type SelectableView = {selectedIndex: number} & View; * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "SegmentedBar[ngModel], SegmentedBar[formControlName], segmentedBar[ngModel], segmentedBar[formControlName], segmented-bar[ngModel], segmented-bar[formControlName], ListPicker[ngModel], ListPicker[formControlName], listPicker[ngModel], listPicker[formControlName], list-picker[ngModel], list-picker[formControlName], TabView[ngModel], TabView[formControlName], tabView[ngModel], tabView[formControlName], tab-view[ngModel], tab-view[formControlName]", - providers: [SELECTED_INDEX_VALUE_ACCESSOR] -}) -export class SelectedIndexValueAccessor extends BaseValueAccessor implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix - @HostListener("selectedIndexChange", ["$event"]) - selectedIndexChangeListener(event: any) { - this.onChange(event.value); - } + selector: + "SegmentedBar[ngModel],SegmentedBar[formControlName]," + + "segmentedBar[ngModel],segmentedBar[formControlName]," + + "segmentedbar[ngModel],segmentedbar[formControlName]," + + "segmented-bar[ngModel],segmented-bar[formControlName]," + - onTouched = () => { }; + "ListPicker[ngModel],ListPicker[formControlName]," + + "listPicker[ngModel],listPicker[formControlName]," + + "listpicker[ngModel],listpicker[formControlName]," + + "list-picker[ngModel],list-picker[formControlName]," + + "TabView[ngModel],TabView[formControlName]," + + "tabView[ngModel],tabView[formControlName]," + + "tabview[ngModel],tabview[formControlName]," + + "tab-view[ngModel],tab-view[formControlName]", + providers: [SELECTED_INDEX_VALUE_ACCESSOR], + host: { + "(touch)": "onTouched()", + "(selectedIndexChange)": "onChange($event.value)", + }, +}) +export class SelectedIndexValueAccessor extends BaseValueAccessor implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -39,6 +52,7 @@ export class SelectedIndexValueAccessor extends BaseValueAccessor void): void { this.onTouched = fn; } } diff --git a/nativescript-angular/value-accessors/text-value-accessor.ts b/nativescript-angular/value-accessors/text-value-accessor.ts index 17fb0e845..03688b27e 100644 --- a/nativescript-angular/value-accessors/text-value-accessor.ts +++ b/nativescript-angular/value-accessors/text-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { View } from "tns-core-modules/ui/core/view"; -const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => TextValueAccessor), multi: true}; +const TEXT_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TextValueAccessor), + multi: true, +}; export type TextView = {text: string} & View; @@ -18,18 +21,28 @@ export type TextView = {text: string} & View; * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "TextField[ngModel], TextField[formControlName], textField[ngModel], textField[formControlName], text-field[ngModel], text-field[formControlName], TextView[ngModel], TextView[formControlName], textView[ngModel], textView[formControlName], text-view[ngModel], text-view[formControlName], SearchBar[ngModel], SearchBar[formControlName], searchBar[ngModel], searchBar[formControlName], search-bar[ngModel], search-bar[formControlName]", - providers: [TEXT_VALUE_ACCESSOR] -}) -export class TextValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix - @HostListener("textChange", ["$event"]) - textChangeListener(event: any) { - this.onChange(event.value); - } + selector: + "TextField[ngModel],TextField[formControlName]," + + "textField[ngModel],textField[formControlName]," + + "textfield[ngModel],textfield[formControlName]," + + "text-field[ngModel],text-field[formControlName]," + - onTouched = () => { }; + "TextView[ngModel],TextView[formControlName]," + + "textView[ngModel],textView[formControlName]," + + "textview[ngModel],textview[formControlName]," + + "text-view[ngModel],text-view[formControlName]," + + "SearchBar[ngModel],SearchBar[formControlName]," + + "searchBar[ngModel],searchBar[formControlName]," + + "searchbar[ngModel],searchbar[formControlName]," + + "search-bar[ngModel], search-bar[formControlName]", + providers: [TEXT_VALUE_ACCESSOR], + host: { + "(touch)": "onTouched()", + "(textChange)": "onChange($event.value)", + }, +}) +export class TextValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -37,6 +50,4 @@ export class TextValueAccessor extends BaseValueAccessor { // tslint:d writeValue(value: any): void { this.view.text = value; } - - registerOnTouched(fn: () => void): void { this.onTouched = fn; } } diff --git a/nativescript-angular/value-accessors/time-value-accessor.ts b/nativescript-angular/value-accessors/time-value-accessor.ts index 1e6cde347..61539fdec 100644 --- a/nativescript-angular/value-accessors/time-value-accessor.ts +++ b/nativescript-angular/value-accessors/time-value-accessor.ts @@ -1,10 +1,13 @@ -import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core"; +import { Directive, ElementRef, forwardRef } from "@angular/core"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { BaseValueAccessor } from "./base-value-accessor"; import { TimePicker } from "tns-core-modules/ui/time-picker"; -const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => TimeValueAccessor), multi: true}; +const TIME_VALUE_ACCESSOR = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => TimeValueAccessor), + multi: true, +}; /** * The accessor for setting a time and listening to changes that is used by the @@ -16,18 +19,18 @@ const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR, * ``` */ @Directive({ - // tslint:disable-next-line:max-line-length directive-selector - selector: "TimePicker[ngModel], TimePicker[formControlName], timePicker[ngModel], timePicker[formControlName], time-picker[ngModel], time-picker[formControlName]", - providers: [TIME_VALUE_ACCESSOR] + selector: + "TimePicker[ngModel],TimePicker[formControlName]," + + "timepicker[ngModel],timepicker[formControlName]," + + "timePicker[ngModel],timePicker[formControlName]," + + "time-picker[ngModel], time-picker[formControlName]", + providers: [TIME_VALUE_ACCESSOR], + host: { + "(touch)": "onTouch()", + "(timeChange)": "onChange($event.value)", + }, }) export class TimeValueAccessor extends BaseValueAccessor { // tslint:disable-line:directive-class-suffix - @HostListener("timeChange", ["$event"]) - timeChangeListener(event: any) { - this.onChange(event.value); - } - - onTouched = () => { }; - constructor(elementRef: ElementRef) { super(elementRef.nativeElement); } @@ -35,6 +38,4 @@ export class TimeValueAccessor extends BaseValueAccessor { // tslint writeValue(value: any): void { this.view.time = value; } - - registerOnTouched(fn: () => void): void { this.onTouched = fn; } }