diff --git a/components/select/common.ts b/components/select/common.ts index a1e0053b..4cae6f36 100644 --- a/components/select/common.ts +++ b/components/select/common.ts @@ -1,3 +1,3 @@ -export function escapeRegexp(queryToEscape:string) { +export function escapeRegexp(queryToEscape:string):string { return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); } diff --git a/components/select/select-interfaces.ts b/components/select/select-interfaces.ts index a1f1aa13..db796313 100644 --- a/components/select/select-interfaces.ts +++ b/components/select/select-interfaces.ts @@ -1,4 +1,4 @@ -export interface IOptionsBehavior { +export interface OptionsBehavior { first():any; last():any; prev():any; diff --git a/components/select/select-item.ts b/components/select/select-item.ts index eff1efb9..ff827979 100644 --- a/components/select/select-item.ts +++ b/components/select/select-item.ts @@ -4,15 +4,13 @@ export class SelectItem { public children:Array; public parent:SelectItem; - constructor(source:any) { + public constructor(source:any) { if (typeof source === 'string') { this.id = this.text = source; } - if (typeof source === 'object') { this.id = source.id || source.text; this.text = source.text; - if (source.children && source.text) { this.children = source.children.map((c:any) => { let r:SelectItem = new SelectItem(c); @@ -26,10 +24,9 @@ export class SelectItem { public fillChildrenHash(optionsMap:Map, startIndex:number):number { let i = startIndex; - this.children.map(child => { + this.children.map((child:SelectItem) => { optionsMap.set(child.id, i++); }); - return i; } diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 13f521a7..a6bc6f7f 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -1,11 +1,11 @@ -import {Pipe} from 'angular2/core'; +import {Pipe, PipeTransform} from 'angular2/core'; import {escapeRegexp} from './common'; @Pipe({ name: 'highlight' }) -export class HighlightPipe { - transform(value:string, args:any[]) { +export class HighlightPipe implements PipeTransform { + public transform(value:string, args:any[]):any { if (args.length < 1) { return value; } @@ -30,7 +30,7 @@ export class HighlightPipe { } -export function stripTags(input:string) { +export function stripTags(input:string):string { let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; return input.replace(commentsAndPhpTags, '').replace(tags, ''); diff --git a/components/select/select.ts b/components/select/select.ts index 78a5c5b9..0109ab40 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,22 +1,7 @@ -import { - Component, - Input, - Output, - EventEmitter, - ElementRef -} from 'angular2/core'; -import { - CORE_DIRECTIVES, - FORM_DIRECTIVES, - NgClass, - NgStyle -} from 'angular2/common'; +import {Component, Input, Output, EventEmitter, ElementRef, OnInit, OnDestroy} from 'angular2/core'; import {SelectItem} from './select-item'; -import { - HighlightPipe, - stripTags -} from './select-pipes'; -import {IOptionsBehavior} from './select-interfaces'; +import {HighlightPipe, stripTags} from './select-pipes'; +import {OptionsBehavior} from './select-interfaces'; import {escapeRegexp} from './common'; let optionsTemplate = ` @@ -54,7 +39,6 @@ let optionsTemplate = ` `; - @Component({ selector: 'ng-select', pipes: [HighlightPipe], @@ -126,213 +110,70 @@ let optionsTemplate = ` ` }) -export class Select { - @Input() - allowClear:boolean = false; - @Input() - placeholder:string = ''; - @Input() - initData:Array = []; - @Input() - multiple:boolean = false; +export class Select implements OnInit, OnDestroy { + @Input() public allowClear:boolean = false; + @Input() public placeholder:string = ''; + @Input() public initData:Array = []; + @Input() public multiple:boolean = false; - @Input() set items(value:Array) { + @Input() + public set items(value:Array) { this._items = value; this.itemObjects = this._items.map((item:any) => new SelectItem(item)); } - @Input() set disabled(value:boolean) { + @Input() + public set disabled(value:boolean) { this._disabled = value; if (this._disabled === true) { this.hideOptions(); } } - @Output() - data:EventEmitter = new EventEmitter(); - @Output() - selected:EventEmitter = new EventEmitter(); - @Output() - removed:EventEmitter = new EventEmitter(); - @Output() - typed:EventEmitter = new EventEmitter(); + @Output() public data:EventEmitter = new EventEmitter(); + @Output() public selected:EventEmitter = new EventEmitter(); + @Output() public removed:EventEmitter = new EventEmitter(); + @Output() public typed:EventEmitter = new EventEmitter(); public options:Array = []; public itemObjects:Array = []; public active:Array = []; public activeOption:SelectItem; + public element:ElementRef; + private offSideClickHandler:any; private inputMode:boolean = false; private optionsOpened:boolean = false; - private behavior:IOptionsBehavior; + private behavior:OptionsBehavior; private inputValue:string = ''; private _items:Array = []; private _disabled:boolean = false; - constructor(public element:ElementRef) { - } - - private focusToInput(value:string = '') { - setTimeout(() => { - let el = this.element.nativeElement.querySelector('div.ui-select-container > input'); - if (el) { - el.focus(); - el.value = value; - } - }, 0); - } - - private matchClick(e:any) { - if (this._disabled === true) { - return; - } - - this.inputMode = !this.inputMode; - if (this.inputMode === true && ((this.multiple === true && e) || this.multiple === false)) { - this.focusToInput(); - this.open(); - } - } - - private mainClick(e:any) { - if (this.inputMode === true || this._disabled === true) { - return; - } - - if (e.keyCode === 46) { - e.preventDefault(); - this.inputEvent(e); - return; - } - - if (e.keyCode === 8) { - e.preventDefault(); - this.inputEvent(e, true); - return; - } - - if (e.keyCode === 9 || e.keyCode === 13 || - e.keyCode === 27 || (e.keyCode >= 37 && e.keyCode <= 40)) { - e.preventDefault(); - return; - } - - this.inputMode = true; - let value = String - .fromCharCode(96 <= e.keyCode && e.keyCode <= 105 ? e.keyCode - 48 : e.keyCode) - .toLowerCase(); - this.focusToInput(value); - this.open(); - e.srcElement.value = value; - this.inputEvent(e); - } - - private open() { - this.options = this.itemObjects - .filter(option => (this.multiple === false || - this.multiple === true && !this.active.find(o => option.text === o.text))); - - if (this.options.length > 0) { - this.behavior.first(); - } - - this.optionsOpened = true; - } - - ngOnInit() { - this.behavior = this.itemObjects[0].hasChildren() ? - new ChildrenBehavior(this) : new GenericBehavior(this); - this.offSideClickHandler = this.getOffSideClickHandler(this); - document.addEventListener('click', this.offSideClickHandler); - - if (this.initData) { - this.active = this.initData.map(d => new SelectItem(d)); - this.data.emit(this.active); - } - } - - ngOnDestroy() { - document.removeEventListener('click', this.offSideClickHandler); - this.offSideClickHandler = null; - } - - private getOffSideClickHandler(context:any) { - return function (e:any) { - if (e.target && e.target.nodeName === 'INPUT' - && e.target.className && e.target.className.indexOf('ui-select') >= 0) { - return; - } - - if (e.srcElement.contains(context.element.nativeElement) - && e.srcElement && e.srcElement.className && - e.srcElement.className.indexOf('ui-select') >= 0) { - if (e.target.nodeName !== 'INPUT') { - context.matchClick(null); - } - return; - } - - context.inputMode = false; - context.optionsOpened = false; - }; - } - - public remove(item:SelectItem) { - if (this._disabled === true) { - return; - } - - if (this.multiple === true && this.active) { - let index = this.active.indexOf(item); - this.active.splice(index, 1); - this.data.next(this.active); - this.doEvent('removed', item); - } - - if (this.multiple === false) { - this.active = []; - this.data.next(this.active); - this.doEvent('removed', item); - } - } - - public doEvent(type:string, value:any) { - if ((this)[type] && value) { - (this)[type].next(value); - } + public constructor(element:ElementRef) { + this.element = element; } - private hideOptions() { - this.inputMode = false; - this.optionsOpened = false; - } - - public inputEvent(e:any, isUpMode:boolean = false) { + public inputEvent(e:any, isUpMode:boolean = false):void { // tab if (e.keyCode === 9) { return; } - if (isUpMode && (e.keyCode === 37 || e.keyCode === 39 || e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13)) { e.preventDefault(); return; } - // backspace if (!isUpMode && e.keyCode === 8) { let el:any = this.element.nativeElement .querySelector('div.ui-select-container > input'); - if (!el.value || el.value.length <= 0) { if (this.active.length > 0) { this.remove(this.active[this.active.length - 1]); } - e.preventDefault(); } } - // esc if (!isUpMode && e.keyCode === 27) { this.hideOptions(); @@ -340,7 +181,6 @@ export class Select { e.preventDefault(); return; } - // del if (!isUpMode && e.keyCode === 46) { if (this.active.length > 0) { @@ -348,45 +188,39 @@ export class Select { } e.preventDefault(); } - // left if (!isUpMode && e.keyCode === 37 && this._items.length > 0) { this.behavior.first(); e.preventDefault(); return; } - // right if (!isUpMode && e.keyCode === 39 && this._items.length > 0) { this.behavior.last(); e.preventDefault(); return; } - // up if (!isUpMode && e.keyCode === 38) { this.behavior.prev(); e.preventDefault(); return; } - // down if (!isUpMode && e.keyCode === 40) { this.behavior.next(); e.preventDefault(); return; } - // enter if (!isUpMode && e.keyCode === 13) { - if (this.active.indexOf(this.activeOption) == -1) { + if (this.active.indexOf(this.activeOption) === -1) { this.selectActiveMatch(); this.behavior.next(); } e.preventDefault(); return; } - if (e.srcElement) { this.inputValue = e.srcElement.value; this.behavior.filter(new RegExp(escapeRegexp(this.inputValue), 'ig')); @@ -394,164 +228,280 @@ export class Select { } } - private selectActiveMatch() { + public ngOnInit():any { + this.behavior = this.itemObjects[0].hasChildren() ? + new ChildrenBehavior(this) : new GenericBehavior(this); + this.offSideClickHandler = this.getOffSideClickHandler(this); + document.addEventListener('click', this.offSideClickHandler); + if (this.initData) { + this.active = this.initData.map((data:any) => new SelectItem(data)); + this.data.emit(this.active); + } + } + + public ngOnDestroy():any { + document.removeEventListener('click', this.offSideClickHandler); + this.offSideClickHandler = void 0; + } + + public remove(item:SelectItem):void { + if (this._disabled === true) { + return; + } + if (this.multiple === true && this.active) { + let index = this.active.indexOf(item); + this.active.splice(index, 1); + this.data.next(this.active); + this.doEvent('removed', item); + } + if (this.multiple === false) { + this.active = []; + this.data.next(this.active); + this.doEvent('removed', item); + } + } + + public doEvent(type:string, value:any):void { + if ((this as any)[type] && value) { + (this as any)[type].next(value); + } + } + + protected matchClick(e:any):void { + if (this._disabled === true) { + return; + } + this.inputMode = !this.inputMode; + if (this.inputMode === true && ((this.multiple === true && e) || this.multiple === false)) { + this.focusToInput(); + this.open(); + } + } + + protected mainClick(event:any):void { + if (this.inputMode === true || this._disabled === true) { + return; + } + if (event.keyCode === 46) { + event.preventDefault(); + this.inputEvent(event); + return; + } + if (event.keyCode === 8) { + event.preventDefault(); + this.inputEvent(event, true); + return; + } + if (event.keyCode === 9 || event.keyCode === 13 || + event.keyCode === 27 || (event.keyCode >= 37 && event.keyCode <= 40)) { + event.preventDefault(); + return; + } + this.inputMode = true; + let value = String + .fromCharCode(96 <= event.keyCode && event.keyCode <= 105 ? event.keyCode - 48 : event.keyCode) + .toLowerCase(); + this.focusToInput(value); + this.open(); + event.srcElement.value = value; + this.inputEvent(event); + } + + protected selectActive(value:SelectItem):void { + this.activeOption = value; + } + + protected isActive(value:SelectItem):boolean { + return this.activeOption.text === value.text; + } + + private focusToInput(value:string = ''):void { + setTimeout(() => { + let el = this.element.nativeElement.querySelector('div.ui-select-container > input'); + if (el) { + el.focus(); + el.value = value; + } + }, 0); + } + + private open():void { + this.options = this.itemObjects + .filter((option: SelectItem) => (this.multiple === false || + this.multiple === true && + !this.active.find((o:SelectItem) => option.text === o.text))); + + if (this.options.length > 0) { + this.behavior.first(); + } + this.optionsOpened = true; + } + + private getOffSideClickHandler(context:any):Function { + return function (e:any):void { + if (e.target && e.target.nodeName === 'INPUT' + && e.target.className && e.target.className.indexOf('ui-select') >= 0) { + return; + } + + if (e.srcElement.contains(context.element.nativeElement) + && e.srcElement && e.srcElement.className && + e.srcElement.className.indexOf('ui-select') >= 0) { + if (e.target.nodeName !== 'INPUT') { + context.matchClick(void 0); + } + return; + } + + context.inputMode = false; + context.optionsOpened = false; + }; + } + + private hideOptions():void { + this.inputMode = false; + this.optionsOpened = false; + } + + private selectActiveMatch():void { this.selectMatch(this.activeOption); } - private selectMatch(value:SelectItem, e:Event = null) { + private selectMatch(value:SelectItem, e:Event = void 0):void { if (e) { e.stopPropagation(); e.preventDefault(); } - if (this.options.length <= 0) { return; } - if (this.multiple === true) { this.active.push(value); this.data.next(this.active); } - if (this.multiple === false) { this.active[0] = value; this.data.next(this.active[0]); } - this.doEvent('selected', value); this.hideOptions(); - if (this.multiple === true) { this.focusToInput(''); } else { - this.focusToInput( stripTags(value.text) ); + this.focusToInput(stripTags(value.text)); this.element.nativeElement.querySelector('.ui-select-container').focus(); } } - - private selectActive(value:SelectItem) { - this.activeOption = value; - } - - private isActive(value:SelectItem):boolean { - return this.activeOption.text === value.text; - } } export class Behavior { public optionsMap:Map = new Map(); - constructor(public actor:Select) { - } - - private getActiveIndex(optionsMap:Map = null):number { - let ai = this.actor.options.indexOf(this.actor.activeOption); - - if (ai < 0 && optionsMap !== null) { - ai = optionsMap.get(this.actor.activeOption.id); - } - - return ai; + public actor: Select; + public constructor(actor:Select) { + this.actor = actor; } - public fillOptionsMap() { + public fillOptionsMap():void { this.optionsMap.clear(); let startPos = 0; - this.actor.itemObjects.map(i => { - startPos = i.fillChildrenHash(this.optionsMap, startPos); - }); + this.actor.itemObjects + .map((item:SelectItem) => { + startPos = item.fillChildrenHash(this.optionsMap, startPos); + }); } - public ensureHighlightVisible(optionsMap:Map = null) { + public ensureHighlightVisible(optionsMap:Map = void 0):void { let container = this.actor.element.nativeElement.querySelector('.ui-select-choices-content'); - if (!container) { return; } - let choices = container.querySelectorAll('.ui-select-choices-row'); if (choices.length < 1) { return; } - let activeIndex = this.getActiveIndex(optionsMap); if (activeIndex < 0) { return; } - let highlighted:any = choices[activeIndex]; if (!highlighted) { return; } - let posY:number = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop; let height:number = container.offsetHeight; - if (posY > height) { container.scrollTop += posY - height; } else if (posY < highlighted.clientHeight) { container.scrollTop -= highlighted.clientHeight - posY; } } + + private getActiveIndex(optionsMap:Map = void 0):number { + let ai = this.actor.options.indexOf(this.actor.activeOption); + if (ai < 0 && optionsMap !== void 0) { + ai = optionsMap.get(this.actor.activeOption.id); + } + return ai; + } } -export class GenericBehavior extends Behavior implements IOptionsBehavior { - constructor(public actor:Select) { +export class GenericBehavior extends Behavior implements OptionsBehavior { + public constructor(actor:Select) { super(actor); } - public first() { + public first():void { this.actor.activeOption = this.actor.options[0]; super.ensureHighlightVisible(); } - public last() { + public last():void { this.actor.activeOption = this.actor.options[this.actor.options.length - 1]; super.ensureHighlightVisible(); } - public prev() { + public prev():void { let index = this.actor.options.indexOf(this.actor.activeOption); this.actor.activeOption = this.actor .options[index - 1 < 0 ? this.actor.options.length - 1 : index - 1]; super.ensureHighlightVisible(); } - public next() { + public next():void { let index = this.actor.options.indexOf(this.actor.activeOption); this.actor.activeOption = this.actor .options[index + 1 > this.actor.options.length - 1 ? 0 : index + 1]; super.ensureHighlightVisible(); } - public filter(query:RegExp) { + public filter(query:RegExp):void { let options = this.actor.itemObjects - .filter(option => stripTags(option.text).match(query) && - (this.actor.multiple === false || - (this.actor.multiple === true && - this.actor.active.indexOf(option) < 0))); + .filter((option:SelectItem) => { + return stripTags(option.text).match(query) && + (this.actor.multiple === false || + (this.actor.multiple === true && this.actor.active.indexOf(option) < 0)); + }); this.actor.options = options; - if (this.actor.options.length > 0) { this.actor.activeOption = this.actor.options[0]; super.ensureHighlightVisible(); } } - } -export class ChildrenBehavior extends Behavior implements IOptionsBehavior { - constructor(public actor:Select) { +export class ChildrenBehavior extends Behavior implements OptionsBehavior { + public constructor(actor:Select) { super(actor); } - public first() { + public first():void { this.actor.activeOption = this.actor.options[0].children[0]; this.fillOptionsMap(); this.ensureHighlightVisible(this.optionsMap); } - public last() { + public last():void { this.actor.activeOption = this.actor .options[this.actor.options.length - 1] @@ -560,13 +510,12 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior { this.ensureHighlightVisible(this.optionsMap); } - public prev() { + public prev():void { let indexParent = this.actor.options - .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id); + .findIndex((option:SelectItem) => this.actor.activeOption.parent && this.actor.activeOption.parent.id === option.id); let index = this.actor.options[indexParent].children - .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id); + .findIndex((option:SelectItem) => this.actor.activeOption && this.actor.activeOption.id === option.id); this.actor.activeOption = this.actor.options[indexParent].children[index - 1]; - if (!this.actor.activeOption) { if (this.actor.options[indexParent - 1]) { this.actor.activeOption = this.actor @@ -574,58 +523,48 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior { .children[this.actor.options[indexParent - 1].children.length - 1]; } } - if (!this.actor.activeOption) { this.last(); } - this.fillOptionsMap(); this.ensureHighlightVisible(this.optionsMap); } - public next() { + public next():void { let indexParent = this.actor.options - .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id); + .findIndex((option:SelectItem) => this.actor.activeOption.parent && this.actor.activeOption.parent.id === option.id); let index = this.actor.options[indexParent].children - .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id); + .findIndex((option:SelectItem) => this.actor.activeOption && this.actor.activeOption.id === option.id); this.actor.activeOption = this.actor.options[indexParent].children[index + 1]; if (!this.actor.activeOption) { if (this.actor.options[indexParent + 1]) { this.actor.activeOption = this.actor.options[indexParent + 1].children[0]; } } - if (!this.actor.activeOption) { this.first(); } - this.fillOptionsMap(); this.ensureHighlightVisible(this.optionsMap); } - public filter(query:RegExp) { + public filter(query:RegExp):void { let options:Array = []; let optionsMap:Map = new Map(); let startPos = 0; - for (let si of this.actor.itemObjects) { - let children:Array = si.children.filter(option => query.test(option.text)); + let children:Array = si.children.filter((option:SelectItem) => query.test(option.text)); startPos = si.fillChildrenHash(optionsMap, startPos); - if (children.length > 0) { let newSi = si.getSimilar(); newSi.children = children; options.push(newSi); } } - this.actor.options = options; - if (this.actor.options.length > 0) { this.actor.activeOption = this.actor.options[0].children[0]; super.ensureHighlightVisible(optionsMap); } } } - - diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index 6f432b14..a6b718b7 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -36,7 +36,7 @@ let tabDesc:Array = [ ]; let tabsContent:string = ``; -tabDesc.forEach(desc => { +tabDesc.forEach((desc:any) => { tabsContent += `
<${desc.heading.toLowerCase()}-demo> @@ -91,7 +91,7 @@ tabDesc.forEach(desc => { export class SelectSection { public currentHeading:string = 'Single'; - public select_zzz(e:any) { + public select_zzz(e:any):void { if (e.heading) { this.currentHeading = e.heading; } diff --git a/demo/components/select/children-demo.ts b/demo/components/select/children-demo.ts index a825a5b6..3ab96240 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/components/select/children-demo.ts @@ -13,10 +13,7 @@ let template = require('./children-demo.html'); directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) export class ChildrenDemo { - private value:any = {}; - private _disabledV:string = '0'; - private disabled:boolean = false; - private items:Array = [ + public items:Array = [ { text: 'Austria', children: [ @@ -192,6 +189,9 @@ export class ChildrenDemo { ] } ]; + private value:any = {}; + private _disabledV:string = '0'; + private disabled:boolean = false; private get disabledV():string { return this._disabledV; @@ -202,15 +202,15 @@ export class ChildrenDemo { this.disabled = this._disabledV === '1'; } - private selected(value:any) { + public selected(value:any):void { console.log('Selected value is: ', value); } - private removed(value:any) { + public removed(value:any):void { console.log('Removed value is: ', value); } - private refreshValue(value:any) { + public refreshValue(value:any):void { this.value = value; } } diff --git a/demo/components/select/multiple-demo.ts b/demo/components/select/multiple-demo.ts index c0877d31..64438503 100644 --- a/demo/components/select/multiple-demo.ts +++ b/demo/components/select/multiple-demo.ts @@ -13,10 +13,7 @@ let template = require('./multiple-demo.html'); directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) export class MultipleDemo { - private value:any = ['Athens']; - private _disabledV:string = '0'; - private disabled:boolean = false; - private items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', + public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', 'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest', 'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', 'Hamburg', 'Hannover', @@ -26,6 +23,10 @@ export class MultipleDemo { 'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza']; + private value:any = ['Athens']; + private _disabledV:string = '0'; + private disabled:boolean = false; + private get disabledV():string { return this._disabledV; } @@ -35,21 +36,21 @@ export class MultipleDemo { this.disabled = this._disabledV === '1'; } - private selected(value:any) { + public selected(value:any):void { console.log('Selected value is: ', value); } - private removed(value:any) { + public removed(value:any):void { console.log('Removed value is: ', value); } - private refreshValue(value:any) { + public refreshValue(value:any):void { this.value = value; } - private itemsToString(value:Array = []) { + public itemsToString(value:Array = []):string { return value - .map(item => { + .map((item:any) => { return item.text; }).join(','); } diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index 677cac04..6956adaa 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -1,8 +1,4 @@ -import { - Component, - OnInit, - ViewEncapsulation -} from 'angular2/core'; +import {Component, OnInit, ViewEncapsulation} from 'angular2/core'; import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common'; import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap'; @@ -67,11 +63,11 @@ export class RichDemo implements OnInit { private disabled:boolean = false; private items:Array = []; - ngOnInit() { - COLORS.forEach( c => { + public ngOnInit():any { + COLORS.forEach((color: {name:string, hex:string}) => { this.items.push( { - id : c.hex, - text: `${c.name} (${c.hex})` + id : color.hex, + text: `${color.name} (${color.hex})` }); }); } @@ -85,19 +81,19 @@ export class RichDemo implements OnInit { this.disabled = this._disabledV === '1'; } - private selected(value:any) { + public selected(value:any):void { console.log('Selected value is: ', value); } - private removed(value:any) { + public removed(value:any):void { console.log('Removed value is: ', value); } - private typed(value:any) { + public typed(value:any):void { console.log('New search input: ', value); } - private refreshValue(value:any) { + public refreshValue(value:any):void { this.value = value; } } diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index 3da0ad80..c7b3eb82 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -13,10 +13,7 @@ let template = require('./single-demo.html'); directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) export class SingleDemo { - private value:any = {}; - private _disabledV:string = '0'; - private disabled:boolean = false; - private items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', + public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', 'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest', 'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', @@ -27,6 +24,10 @@ export class SingleDemo { 'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza', 'Łódź']; + private value:any = {}; + private _disabledV:string = '0'; + private disabled:boolean = false; + private get disabledV():string { return this._disabledV; } @@ -36,19 +37,19 @@ export class SingleDemo { this.disabled = this._disabledV === '1'; } - private selected(value:any) { + public selected(value:any):void { console.log('Selected value is: ', value); } - private removed(value:any) { + public removed(value:any):void { console.log('Removed value is: ', value); } - private typed(value:any) { + public typed(value:any):void { console.log('New search input: ', value); } - private refreshValue(value:any) { + public refreshValue(value:any):void { this.value = value; } } diff --git a/gulpfile.js b/gulpfile.js index c56b8414..a902fca6 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,6 @@ -var gulp = require('gulp'); +'use strict'; + +const gulp = require('gulp'); gulp.paths = { tssrc: [ @@ -11,6 +13,6 @@ gulp.paths = { require('require-dir')('./gulp-tasks'); -gulp.task('default', function () { +gulp.task('default', () => { gulp.start('lint'); }); diff --git a/package.json b/package.json index 45d399a0..c5e39ea3 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,7 @@ "angular2": "2.0.0-beta.15", "bootstrap": "3.3.6", "clean-webpack-plugin": "0.1.8", + "codelyzer": "0.0.15", "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.1.1", "conventional-github-releaser": "1.1.2", @@ -79,13 +80,12 @@ "prismjs": "valorkin/prism", "prismjs-loader": "0.0.2", "raw-loader": "0.5.1", - "reflect-metadata": "0.1.3", + "reflect-metadata": "0.1.2", "require-dir": "0.3.0", "rxjs": "5.0.0-beta.2", "systemjs-builder": "0.15.15", "ts-loader": "0.8.2", - "tslint": "3.7.4", - "tslint-config-valorsoft": "0.0.4", + "tslint-config-valorsoft": "1.0.1", "typescript": "1.8.10", "typings": "0.8.1", "webpack": "1.13.0", diff --git a/tslint.json b/tslint.json index 119e1146..ea3f7760 100644 --- a/tslint.json +++ b/tslint.json @@ -1,4 +1,4 @@ { - "extends": "./node_modules/tslint-config-valorsoft/tslint.json", - "rulesDirectory": "./node_modules/codelyzer/dist/src" + "extends": "tslint-config-valorsoft", + "rulesDirectory": "./node_modules/codelyzer" }