From 310335223b0971a34faa8c69c73bd9e77c2adffe Mon Sep 17 00:00:00 2001 From: Jonathon Lee Date: Mon, 18 Apr 2016 23:38:53 +0100 Subject: [PATCH 01/61] fix(Regex): escape all characters to prevent exception --- components/select/common.ts | 3 +++ components/select/select-pipes.ts | 6 ++---- components/select/select.ts | 5 +++-- 3 files changed, 8 insertions(+), 6 deletions(-) create mode 100644 components/select/common.ts diff --git a/components/select/common.ts b/components/select/common.ts new file mode 100644 index 00000000..a1e0053b --- /dev/null +++ b/components/select/common.ts @@ -0,0 +1,3 @@ +export function escapeRegexp(queryToEscape:string) { + return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); +} diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 4ffb6eda..086a10dc 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -1,4 +1,5 @@ import {Pipe} from 'angular2/core'; +import {escapeRegexp} from './common'; @Pipe({ name: 'hightlight' @@ -18,7 +19,7 @@ export class HightlightPipe { // Replace tags with token let tmpValue = value.replace( tagRE, '$!$'); // Replace search words - value = tmpValue.replace(new RegExp(this.escapeRegexp(query), 'gi'), '$&'); + value = tmpValue.replace(new RegExp(escapeRegexp(query), 'gi'), '$&'); // Reinsert HTML for (let i = 0; value.indexOf('$!$') > -1; i++) { value = value.replace('$!$', tagList[i]); @@ -27,9 +28,6 @@ export class HightlightPipe { return value; } - private escapeRegexp(queryToEscape:string) { - return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); - } } export function stripTags(input:string) { diff --git a/components/select/select.ts b/components/select/select.ts index 055b9209..074deef0 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -17,6 +17,7 @@ import { stripTags } from './select-pipes'; import {IOptionsBehavior} from './select-interfaces'; +import {escapeRegexp} from './common'; 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" } From 749ac97553ca3608a206fbfe44ff3fdcbfd58b9b Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Mon, 25 Apr 2016 17:02:45 +0300 Subject: [PATCH 05/61] feat(build): added codecov integration --- .travis.yml | 1 + package.json | 1 + 2 files changed, 2 insertions(+) diff --git a/.travis.yml b/.travis.yml index 1e9bb205..2bd1ce1f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,6 +9,7 @@ before_install: script: - npm run flow.install:typings - npm test +- ./node_modules/.bin/codecov addons: # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ ) diff --git a/package.json b/package.json index db8a8ce7..a7df9156 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "awesome-typescript-loader": "^0.17.0-rc.6", "bootstrap": "3.3.6", "clean-webpack-plugin": "0.1.8", + "codecov": "1.0.1", "codelyzer": "0.0.15", "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.1.1", From c46c0ffaaa2f23c3c81eb0acb9dee40f7bc020f2 Mon Sep 17 00:00:00 2001 From: Jonathon Lee Date: Tue, 26 Apr 2016 11:38:47 +0100 Subject: [PATCH 06/61] fix(select): clicking on the input now causes the item list to appear (#154) * fix(README): Update docs with correct selector ng-select (#148) * fix(select): clicking on the input now causes the item list to appear * fix(select): tslint & merge errors --- components/select/off-click.ts | 23 +++++++++++++++ components/select/readme.md | 2 +- components/select/select.ts | 54 ++++++++++++---------------------- 3 files changed, 43 insertions(+), 36 deletions(-) create mode 100644 components/select/off-click.ts diff --git a/components/select/off-click.ts b/components/select/off-click.ts new file mode 100644 index 00000000..6ccef08a --- /dev/null +++ b/components/select/off-click.ts @@ -0,0 +1,23 @@ +import {Directive, HostListener, Input, OnInit, OnDestroy} from 'angular2/core'; + +@Directive({ + selector: '[offClick]' +}) + +export class OffClickDirective implements OnInit, OnDestroy { + /* tslint:disable */ + @Input('offClick') public offClickHandler: any; + /* tslint:enable */ + @HostListener('click', ['$event']) public onClick($event: MouseEvent): void { + $event.stopPropagation(); + } + + public ngOnInit(): any { + setTimeout(() => {document.addEventListener('click', this.offClickHandler);}, 0); + } + + public ngOnDestroy(): any { + document.removeEventListener('click', this.offClickHandler); + } + +} diff --git a/components/select/readme.md b/components/select/readme.md index f445974f..fcf010b8 100644 --- a/components/select/readme.md +++ b/components/select/readme.md @@ -7,7 +7,7 @@ import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select'; ```typescript // class Select @Component({ - selector: 'ng2-select', + selector: 'ng-select', properties: [ 'allowClear', 'placeholder', diff --git a/components/select/select.ts b/components/select/select.ts index 0109ab40..3c7fc2df 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,11 +1,12 @@ -import {Component, Input, Output, EventEmitter, ElementRef, OnInit, OnDestroy} from 'angular2/core'; +import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from 'angular2/core'; import {SelectItem} from './select-item'; import {HighlightPipe, stripTags} from './select-pipes'; import {OptionsBehavior} from './select-interfaces'; import {escapeRegexp} from './common'; +import {OffClickDirective} from './off-click'; let optionsTemplate = ` -
-
  • @@ -41,18 +42,20 @@ let optionsTemplate = ` `; @Component({ selector: 'ng-select', + directives: [OffClickDirective], pipes: [HighlightPipe], template: `
    {{placeholder}} ` }) -export class Select implements OnInit, OnDestroy { +export class Select implements OnInit { @Input() public allowClear:boolean = false; @Input() public placeholder:string = ''; @Input() public initData:Array = []; @@ -141,7 +144,6 @@ export class Select implements OnInit, OnDestroy { public activeOption:SelectItem; public element:ElementRef; - private offSideClickHandler:any; private inputMode:boolean = false; private optionsOpened:boolean = false; private behavior:OptionsBehavior; @@ -151,6 +153,7 @@ export class Select implements OnInit, OnDestroy { public constructor(element:ElementRef) { this.element = element; + this.clickedOutside = this.clickedOutside.bind(this); } public inputEvent(e:any, isUpMode:boolean = false):void { @@ -229,21 +232,14 @@ export class Select implements OnInit, OnDestroy { } public ngOnInit():any { - this.behavior = this.itemObjects[0].hasChildren() ? + this.behavior = (this.firstItemHasChildren) ? 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; @@ -267,6 +263,15 @@ export class Select implements OnInit, OnDestroy { } } + public clickedOutside():void { + this.inputMode = false; + this.optionsOpened = false; + } + + public get firstItemHasChildren():boolean { + return this.itemObjects[0] && this.itemObjects[0].hasChildren(); + } + protected matchClick(e:any):void { if (this._disabled === true) { return; @@ -337,27 +342,6 @@ export class Select implements OnInit, OnDestroy { 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; From 82437adfba15e148c76a8cee2efb88ed21d428da Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Wed, 27 Apr 2016 14:15:34 +0200 Subject: [PATCH 07/61] chore(package): update clean-webpack-plugin to version 0.1.9 (#169) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a7df9156..0f005fd3 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "angular2": "2.0.0-beta.15", "awesome-typescript-loader": "^0.17.0-rc.6", "bootstrap": "3.3.6", - "clean-webpack-plugin": "0.1.8", + "clean-webpack-plugin": "0.1.9", "codecov": "1.0.1", "codelyzer": "0.0.15", "compression-webpack-plugin": "0.3.1", From 0644067f9714721b9957ea2ce220620e43d4c0e7 Mon Sep 17 00:00:00 2001 From: greenkeeperio-bot Date: Wed, 27 Apr 2016 15:15:48 +0300 Subject: [PATCH 08/61] chore(package): update tslint-config-valorsoft to version 1.0.2 https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0f005fd3..b0870b4b 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "systemjs-builder": "0.15.15", "ts-helpers": "^1.1.0", "ts-loader": "0.8.2", - "tslint-config-valorsoft": "1.0.1", + "tslint-config-valorsoft": "1.0.2", "tslint-loader": "2.1.3", "typescript": "1.8.10", "typings": "0.8.1", From 06f57e4d45b744d4df885921747adc907db1af5b Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 27 Apr 2016 15:16:48 +0300 Subject: [PATCH 09/61] chore(package): removed direct codelyzer dependecy --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 0f005fd3..98a39a65 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "bootstrap": "3.3.6", "clean-webpack-plugin": "0.1.9", "codecov": "1.0.1", - "codelyzer": "0.0.15", "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.1.1", "conventional-github-releaser": "1.1.2", From f5157df4586ee0fc0b2a269287e1810e9d8e27db Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 27 Apr 2016 16:11:59 +0300 Subject: [PATCH 10/61] chore(build): updated accordingly to ng2 style guide --- components/select.ts | 4 ++-- components/select/select.ts | 10 +++++----- demo/components/select-section.ts | 12 ++++++------ demo/components/select/children-demo.ts | 2 +- demo/components/select/multiple-demo.ts | 2 +- demo/components/select/rich-demo.ts | 2 +- demo/components/select/single-demo.ts | 2 +- demo/index.ts | 8 ++++---- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/components/select.ts b/components/select.ts index 43f35c6f..219fc2d3 100644 --- a/components/select.ts +++ b/components/select.ts @@ -1,2 +1,2 @@ -import {Select} from './select/select'; -export const SELECT_DIRECTIVES:Array = [Select]; +import {SelectComponent} from './select/select'; +export const SELECT_DIRECTIVES:Array = [SelectComponent]; diff --git a/components/select/select.ts b/components/select/select.ts index 3c7fc2df..61850f7f 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -113,7 +113,7 @@ let optionsTemplate = `
    ` }) -export class Select implements OnInit { +export class SelectComponent implements OnInit { @Input() public allowClear:boolean = false; @Input() public placeholder:string = ''; @Input() public initData:Array = []; @@ -381,8 +381,8 @@ export class Select implements OnInit { export class Behavior { public optionsMap:Map = new Map(); - public actor: Select; - public constructor(actor:Select) { + public actor: SelectComponent; + public constructor(actor:SelectComponent) { this.actor = actor; } @@ -431,7 +431,7 @@ export class Behavior { } export class GenericBehavior extends Behavior implements OptionsBehavior { - public constructor(actor:Select) { + public constructor(actor:SelectComponent) { super(actor); } @@ -475,7 +475,7 @@ export class GenericBehavior extends Behavior implements OptionsBehavior { } export class ChildrenBehavior extends Behavior implements OptionsBehavior { - public constructor(actor:Select) { + public constructor(actor:SelectComponent) { super(actor); } diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index a6b718b7..221d70c3 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -3,10 +3,10 @@ import {CORE_DIRECTIVES} from 'angular2/common'; import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; -import {SingleDemo} from './select/single-demo'; -import {MultipleDemo} from './select/multiple-demo'; -import {ChildrenDemo} from './select/children-demo'; -import {RichDemo} from './select/rich-demo'; +import {SingleDemoComponent} from './select/single-demo'; +import {MultipleDemoComponent} from './select/multiple-demo'; +import {ChildrenDemoComponent} from './select/children-demo'; +import {RichDemoComponent} from './select/rich-demo'; let name = 'Select'; // webpack html imports @@ -86,9 +86,9 @@ tabDesc.forEach((desc:any) => {
    `, - directives: [SingleDemo, MultipleDemo, ChildrenDemo, RichDemo, TAB_DIRECTIVES, CORE_DIRECTIVES] + directives: [SingleDemoComponent, MultipleDemoComponent, ChildrenDemoComponent, RichDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] }) -export class SelectSection { +export class SelectSectionComponent { public currentHeading:string = 'Single'; public select_zzz(e:any):void { diff --git a/demo/components/select/children-demo.ts b/demo/components/select/children-demo.ts index 3ab96240..1b2bc91e 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/components/select/children-demo.ts @@ -12,7 +12,7 @@ let template = require('./children-demo.html'); template: template, directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) -export class ChildrenDemo { +export class ChildrenDemoComponent { public items:Array = [ { text: 'Austria', diff --git a/demo/components/select/multiple-demo.ts b/demo/components/select/multiple-demo.ts index 64438503..092059ea 100644 --- a/demo/components/select/multiple-demo.ts +++ b/demo/components/select/multiple-demo.ts @@ -12,7 +12,7 @@ let template = require('./multiple-demo.html'); template: template, directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) -export class MultipleDemo { +export class MultipleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', 'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest', 'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf', diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index 6956adaa..5ae97916 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -57,7 +57,7 @@ let template = require('./rich-demo.html'); directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox], encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles }) -export class RichDemo implements OnInit { +export class RichDemoComponent implements OnInit { private value:any = {}; private _disabledV:string = '0'; private disabled:boolean = false; diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index c7b3eb82..d79d0921 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -12,7 +12,7 @@ let template = require('./single-demo.html'); template: template, directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] }) -export class SingleDemo { +export class SingleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', 'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest', 'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', diff --git a/demo/index.ts b/demo/index.ts index 0c7142af..96c41654 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/platform/browser'; import {Component} from 'angular2/core'; import {NgClass} from 'angular2/common'; -import {SelectSection} from './components/select-section'; +import {SelectSectionComponent} from './components/select-section'; let gettingStarted = require('./getting-started.md'); @@ -35,10 +35,10 @@ let gettingStarted = require('./getting-started.md'); `, directives: [ NgClass, - SelectSection + SelectSectionComponent ] }) -export class Demo { +export class DemoComponent { } -bootstrap(Demo); +bootstrap(DemoComponent); From d59368ddbd2a754dc7ecd15d45b3e4c968011479 Mon Sep 17 00:00:00 2001 From: feedyourmind Date: Wed, 18 May 2016 17:41:29 +0300 Subject: [PATCH 11/61] feat(package): update to angular 2 rc1 --- components/select/off-click.ts | 2 +- components/select/select-pipes.ts | 2 +- components/select/select.ts | 10 +++++----- demo/components/select-section.ts | 4 ++-- demo/components/select/children-demo.ts | 8 ++++---- demo/components/select/multiple-demo.ts | 8 ++++---- demo/components/select/rich-demo.ts | 8 ++++---- demo/components/select/single-demo.ts | 8 ++++---- demo/index.ts | 8 ++++---- package.json | 8 ++++++-- 10 files changed, 35 insertions(+), 31 deletions(-) diff --git a/components/select/off-click.ts b/components/select/off-click.ts index 6ccef08a..ccf73a15 100644 --- a/components/select/off-click.ts +++ b/components/select/off-click.ts @@ -1,4 +1,4 @@ -import {Directive, HostListener, Input, OnInit, OnDestroy} from 'angular2/core'; +import {Directive, HostListener, Input, OnInit, OnDestroy} from '@angular/core'; @Directive({ selector: '[offClick]' diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index a6bc6f7f..33458b10 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -1,4 +1,4 @@ -import {Pipe, PipeTransform} from 'angular2/core'; +import {Pipe, PipeTransform} from '@angular/core'; import {escapeRegexp} from './common'; @Pipe({ diff --git a/components/select/select.ts b/components/select/select.ts index 61850f7f..c1f39d99 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,4 +1,4 @@ -import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from 'angular2/core'; +import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from '@angular/core'; import {SelectItem} from './select-item'; import {HighlightPipe, stripTags} from './select-pipes'; import {OptionsBehavior} from './select-interfaces'; @@ -9,7 +9,7 @@ let optionsTemplate = `
    • -
      -
    • +
    • {{c.text}}
      -
      - + = [ diff --git a/demo/components/select/multiple-demo.ts b/demo/components/select/multiple-demo.ts index 092059ea..ada5419f 100644 --- a/demo/components/select/multiple-demo.ts +++ b/demo/components/select/multiple-demo.ts @@ -1,6 +1,6 @@ -import {Component} from 'angular2/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common'; -import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap'; +import {Component} from '@angular/core'; +import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; +import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import {SELECT_DIRECTIVES} from '../../../ng2-select'; @@ -10,7 +10,7 @@ let template = require('./multiple-demo.html'); @Component({ selector: 'multiple-demo', template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] + directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] }) export class MultipleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index 5ae97916..a835149a 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -1,6 +1,6 @@ -import {Component, OnInit, ViewEncapsulation} from 'angular2/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common'; -import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap'; +import {Component, OnInit, ViewEncapsulation} from '@angular/core'; +import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; +import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import {SELECT_DIRECTIVES} from '../../../ng2-select'; @@ -54,7 +54,7 @@ let template = require('./rich-demo.html'); selector: 'rich-demo', template: template, styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`], - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox], + directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ], encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles }) export class RichDemoComponent implements OnInit { diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index d79d0921..45adffb6 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -1,6 +1,6 @@ -import {Component} from 'angular2/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common'; -import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap'; +import {Component} from '@angular/core'; +import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; +import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; import {SELECT_DIRECTIVES} from '../../../ng2-select'; @@ -10,7 +10,7 @@ let template = require('./single-demo.html'); @Component({ selector: 'single-demo', template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox] + directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] }) export class SingleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/index.ts b/demo/index.ts index 96c41654..1d75084c 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,6 +1,6 @@ -import {bootstrap} from 'angular2/platform/browser'; -import {Component} from 'angular2/core'; -import {NgClass} from 'angular2/common'; +import {bootstrapStatic} from '@angular/platform-browser'; +import {Component} from '@angular/core'; +import {NgClass} from '@angular/common'; import {SelectSectionComponent} from './components/select-section'; @@ -41,4 +41,4 @@ let gettingStarted = require('./getting-started.md'); export class DemoComponent { } -bootstrap(DemoComponent); +bootstrapStatic(DemoComponent); diff --git a/package.json b/package.json index 0005949c..5422f886 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,12 @@ }, "homepage": "https://github.com/valor-software/ng2-select#readme", "peerDependencies": { - "angular2": "2.0.0-beta.15" - }, + "@angular/common": "^2.0.0-rc.1", + "@angular/compiler": "^2.0.0-rc.1", + "@angular/core": "^2.0.0-rc.1", + "@angular/platform-browser": "^2.0.0-rc.1", + "@angular/platform-browser-dynamic": "^2.0.0-rc.1" + }, "dependencies": {}, "devDependencies": { "angular2": "2.0.0-beta.15", From 7fbe3397514ef801589e08362a36e70e1faa4408 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 18 May 2016 18:48:21 +0300 Subject: [PATCH 12/61] fix(package): updated code style\fixed ng2 imports --- .config/bundle-system.js | 12 +++-- .eslintignore | 28 ---------- .travis.yml | 14 +++-- components/select/select-pipes.spec.ts | 12 +++++ components/select/select-pipes.ts | 8 ++- components/select/select.spec.ts | 17 ------ demo/components/select-section.ts | 9 ++-- demo/index.ts | 4 +- gulp-tasks/lint.js | 9 ++-- gulpfile.js | 9 ---- karma.conf.js | 55 +++----------------- ng2-select.ts | 2 +- package.json | 62 +++++++++++----------- test.bundle.js | 72 +++++++++++++------------- tsconfig.json | 17 ++---- typings.json | 11 ++-- webpack.config.js | 10 ++-- 17 files changed, 128 insertions(+), 223 deletions(-) delete mode 100644 .eslintignore create mode 100644 components/select/select-pipes.spec.ts delete mode 100644 components/select/select.spec.ts diff --git a/.config/bundle-system.js b/.config/bundle-system.js index 1894fa21..9c8cc53c 100755 --- a/.config/bundle-system.js +++ b/.config/bundle-system.js @@ -17,7 +17,7 @@ const Builder = require('systemjs-builder'); const pkg = require('../package.json'); const name = pkg.name; const targetFolder = path.resolve('./bundles'); -console.log(targetFolder) + async.waterfall([ cleanBundlesFolder, getSystemJsBundleConfig, @@ -40,7 +40,11 @@ function getSystemJsBundleConfig(cb) { }, map: { typescript: path.resolve('node_modules/typescript/lib/typescript.js'), - angular2: path.resolve('node_modules/angular2'), + '@angular/core': path.resolve('node_modules/@angular/core/index.js'), + '@angular/common': path.resolve('node_modules/@angular/common/index.js'), + '@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'), + '@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'), + '@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'), rxjs: path.resolve('node_modules/rxjs') }, paths: { @@ -48,12 +52,12 @@ function getSystemJsBundleConfig(cb) { } }; - config.meta = ['angular2', 'rxjs'].reduce((memo, currentValue) => { + config.meta = ['@angular/common','@angular/compiler','@angular/core', + '@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => { memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false}; return memo; }, {}); config.meta.moment = {build: false}; - console.log(config.meta) return cb(null, config); } diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 41d8b2bd..00000000 --- a/.eslintignore +++ /dev/null @@ -1,28 +0,0 @@ -test.bundle.js -karma.conf.js -gulpfile.js - -.idea/ -gulp-tasks/ -logs/ - -# typings -typings/ -node_modules/ - -# testing -karma.conf.js -test.bundle.js -coverage/ - -demo/ -demo-build/ - -/demo/**/*.js -/components/**/*.js -ng2-select.js - -logs/ -bundles/ - - diff --git a/.travis.yml b/.travis.yml index 2bd1ce1f..56eb9da3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,15 +1,13 @@ language: node_js node_js: - - "5" - - "4" - -before_install: -- npm install -g npm@latest + - "6" script: -- npm run flow.install:typings -- npm test -- ./node_modules/.bin/codecov + - npm run flow.install:typings + - npm test + +after_success: + - ./node_modules/.bin/codecov addons: # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ ) diff --git a/components/select/select-pipes.spec.ts b/components/select/select-pipes.spec.ts new file mode 100644 index 00000000..11a720e3 --- /dev/null +++ b/components/select/select-pipes.spec.ts @@ -0,0 +1,12 @@ +import {it, expect, describe, inject, beforeEachProviders} from '@angular/core/testing'; +import {ComponentFixture} from '@angular/compiler/testing'; +import {HighlightPipe} from './select-pipes'; + +describe('Component: HighlightPipe', () => { + beforeEachProviders(() => [ + HighlightPipe + ]); + it('should be fine', inject([HighlightPipe], (fixture:ComponentFixture) => { + expect(fixture).not.toBeNull(); + })); +}); diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 33458b10..c536eae5 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -1,9 +1,7 @@ import {Pipe, PipeTransform} from '@angular/core'; import {escapeRegexp} from './common'; -@Pipe({ - name: 'highlight' -}) +@Pipe({name: 'highlight'}) export class HighlightPipe implements PipeTransform { public transform(value:string, args:any[]):any { if (args.length < 1) { @@ -31,7 +29,7 @@ export class HighlightPipe implements PipeTransform { } export function stripTags(input:string):string { - let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, - commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; + let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi; + let commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; return input.replace(commentsAndPhpTags, '').replace(tags, ''); } diff --git a/components/select/select.spec.ts b/components/select/select.spec.ts deleted file mode 100644 index afbd0f57..00000000 --- a/components/select/select.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {it, expect} from 'angular2/testing'; - -describe('TEST', () => { - it('true is true', () => { - expect(true).toBe(true); - }); - describe('Load TestComponentBuilder', () => { - // beforeEach(injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => { - // return tcb.createAsync(Select) - // .then((componentFixture:ComponentFixture) => { - // }); - // })); - it('true is true', () => { - expect(true).toBe(true); - }); - }); -}); diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index 760c3cd4..55ccdb4b 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -38,11 +38,10 @@ let tabDesc:Array = [ let tabsContent:string = ``; tabDesc.forEach((desc:any) => { tabsContent += ` -
      - <${desc.heading.toLowerCase()}-demo> - -
      -
      {{ currentHeading }}
      +
      + <${desc.heading.toLowerCase()}-demo> + +

      diff --git a/demo/index.ts b/demo/index.ts index 1d75084c..872f27c6 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,4 +1,4 @@ -import {bootstrapStatic} from '@angular/platform-browser'; +import {bootstrap} from '@angular/platform-browser-dynamic'; import {Component} from '@angular/core'; import {NgClass} from '@angular/common'; @@ -41,4 +41,4 @@ let gettingStarted = require('./getting-started.md'); export class DemoComponent { } -bootstrapStatic(DemoComponent); +bootstrap(DemoComponent); diff --git a/gulp-tasks/lint.js b/gulp-tasks/lint.js index 8d7e794b..62c7806a 100644 --- a/gulp-tasks/lint.js +++ b/gulp-tasks/lint.js @@ -2,13 +2,14 @@ const gulp = require('gulp'); const tslint = require('gulp-tslint'); -const paths = gulp.paths; -const tslintConf = require('../tslint.json'); +const gitignore = require('gitignore-to-glob')(); + +gitignore.push('**/*.ts'); gulp.task('tslint', () => gulp - .src(paths.tssrc) - .pipe(tslint(tslintConf)) + .src(gitignore) + .pipe(tslint()) .pipe(tslint.report('prose', { emitError: true, summarizeFailureOutput: true, diff --git a/gulpfile.js b/gulpfile.js index a902fca6..3d44e09d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,15 +2,6 @@ const gulp = require('gulp'); -gulp.paths = { - tssrc: [ - '**/*.ts', - '!**/*.d.ts', - '!node_modules/**/*', - '!bundles/**/*', - '!typings/**/*'] -}; - require('require-dir')('./gulp-tasks'); gulp.task('default', () => { diff --git a/karma.conf.js b/karma.conf.js index 01c6cd9a..31fec667 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -3,7 +3,7 @@ const path = require('path'); const cwd = process.cwd(); -module.exports = function (config) { +module.exports = config => { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', @@ -27,41 +27,14 @@ module.exports = function (config) { }, webpack: { - // Do not change, leave as is or it wont work. - // See: https://github.com/webpack/karma-webpack#source-maps - devtool: 'inline-source-map', resolve: { - root: [root('components')], + root: [path.resolve(cwd)], + modulesDirectories: ['node_modules', 'demo', 'components', 'test', '.'], extensions: ['', '.ts', '.js', '.css'] }, module: { - preLoaders: [ - { - test: /\.ts$/, - loader: 'tslint-loader', - exclude: [ - root('node_modules') - ] - }, - { - test: /\.js$/, - loader: 'source-map-loader', - exclude: [ - root('node_modules/rxjs') - ] - } - ], loaders: [ - { - test: /\.ts$/, - loader: 'awesome-typescript-loader', - query: { - 'compilerOptions': { - 'removeComments': true, - } - }, - exclude: [/\.e2e\.ts$/] - } + {test: /\.ts$/, loader: 'ts-loader', exclude: [/node_modules/]} ], postLoaders: [ // instrument only testing sources with Istanbul @@ -76,25 +49,10 @@ module.exports = function (config) { } ] }, - tslint: { - emitErrors: false, - failOnHint: false, - resourcePath: 'components' - }, stats: { colors: true, reasons: true }, - - node: { - global: 'window', - process: false, - crypto: 'empty', - module: false, - clearImmediate: false, - setImmediate: false - }, - watch: true, debug: true }, @@ -138,7 +96,6 @@ module.exports = function (config) { }); }; -function root(args) { - args = Array.prototype.slice.call(arguments, 0); - return path.join.apply(path, [__dirname].concat(args)); +function root(partialPath) { + return path.join(__dirname, partialPath); } diff --git a/ng2-select.ts b/ng2-select.ts index 21216aff..10271758 100644 --- a/ng2-select.ts +++ b/ng2-select.ts @@ -7,4 +7,4 @@ export default { directives: [ SELECT_DIRECTIVES ] -} +}; diff --git a/package.json b/package.json index 5422f886..f66a2f7b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-select", - "version": "1.0.1-beta.0", + "version": "1.0.2", "description": "Angular2 based replacement for select boxes", "scripts": { "flow.install:typings": "./node_modules/.bin/typings install", @@ -10,11 +10,11 @@ "flow.copy:src": "./node_modules/.bin/cpy ng2-select.ts \"components/*.ts\" ts --parents", "flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-select.+(js|d.ts|js.map)\"", "flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build", - "flow.eslint": "./node_modules/.bin/eslint --ignore-path .eslintignore --ext js --fix . .config", + "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore --ext js --fix . .config", "flow.tslint": "./node_modules/.bin/gulp lint", "flow.lint": "npm run flow.eslint && npm run flow.tslint", "flow.changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -p angular -v", - "flow.github-release": "conventional-github-releaser -p angular", + "flow.github-release": "./node_modules/.bin/conventional-github-releaser -p angular", "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color", "flow.build:dev": "./node_modules/.bin/webpack --progress --color", "flow.serve:dev": "./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached", @@ -49,65 +49,65 @@ "peerDependencies": { "@angular/common": "^2.0.0-rc.1", "@angular/compiler": "^2.0.0-rc.1", - "@angular/core": "^2.0.0-rc.1", - "@angular/platform-browser": "^2.0.0-rc.1", - "@angular/platform-browser-dynamic": "^2.0.0-rc.1" - }, + "@angular/core": "^2.0.0-rc.1" + }, "dependencies": {}, "devDependencies": { - "angular2": "2.0.0-beta.15", + "@angular/common": "^2.0.0-rc.1", + "@angular/compiler": "^2.0.0-rc.1", + "@angular/core": "^2.0.0-rc.1", + "@angular/platform-browser": "^2.0.0-rc.1", + "@angular/platform-browser-dynamic": "^2.0.0-rc.1", + "async": "1.5.2", "awesome-typescript-loader": "^0.17.0-rc.6", "bootstrap": "3.3.6", - "clean-webpack-plugin": "0.1.9", "codecov": "1.0.1", "compression-webpack-plugin": "0.3.1", - "conventional-changelog-cli": "1.1.1", + "conventional-changelog-cli": "1.2.0", "conventional-github-releaser": "1.1.2", - "copy-webpack-plugin": "2.1.1", - "core-js": "^2.1.5", + "copy-webpack-plugin": "3.0.0", "cpy-cli": "1.0.0", "del-cli": "0.2.0", - "es6-promise": "3.1.2", - "es6-shim": "0.35.0", + "es6-promise": "3.2.1", + "es6-shim": "0.35.1", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.10", + "eslint-config-valorsoft": "0.0.13", "exports-loader": "0.6.3", "file-loader": "0.8.5", "gh-pages": "0.11.0", + "gitignore-to-glob": "0.2.1", "gulp": "3.9.1", "gulp-size": "2.1.0", - "gulp-tslint": "github:valorkin/gulp-tslint", + "gulp-tslint": "5.0.0", "html-loader": "0.4.3", - "html-webpack-plugin": "2.16.0", + "html-webpack-plugin": "2.17.0", "istanbul-instrumenter-loader": "0.2.0", "jasmine": "2.4.1", "karma": "0.13.22", - "karma-chrome-launcher": "0.2.3", - "karma-coverage": "0.5.5", - "karma-jasmine": "0.3.8", + "karma-chrome-launcher": "1.0.1", + "karma-coverage": "1.0.0", + "karma-jasmine": "1.0.2", "karma-phantomjs-launcher": "1.0.0", "karma-sourcemap-loader": "0.3.7", "karma-spec-reporter": "0.0.26", "karma-webpack": "1.7.0", + "lite-server": "2.2.0", "markdown-loader": "0.1.7", "marked": "0.3.5", - "moment": "2.13.0", - "ng2-bootstrap": "1.0.13", + "ng2-bootstrap": "1.0.16", "phantomjs-polyfill": "0.0.2", "phantomjs-prebuilt": "2.1.7", - "pre-commit": "1.1.2", - "prismjs": "valorkin/prism", - "prismjs-loader": "0.0.2", + "pre-commit": "1.1.3", + "prismjs": "1.5.0", + "prismjs-loader": "0.0.3", "raw-loader": "0.5.1", "reflect-metadata": "0.1.2", "require-dir": "0.3.0", - "rxjs": "5.0.0-beta.2", - "source-map-loader": "^0.1.5", - "systemjs-builder": "0.15.15", - "ts-helpers": "^1.1.0", + "rxjs": "5.0.0-beta.6", + "source-map-loader": "0.1.5", + "systemjs-builder": "0.15.16", "ts-loader": "0.8.2", - "tslint-config-valorsoft": "1.0.2", - "tslint-loader": "2.1.3", + "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", "typings": "0.8.1", "webpack": "1.13.0", diff --git a/test.bundle.js b/test.bundle.js index 5a5482fc..9ade8579 100644 --- a/test.bundle.js +++ b/test.bundle.js @@ -1,47 +1,47 @@ +'use strict'; +/* eslint vars-on-top:0 no-var:0 */ +// @AngularClass +/* + * When testing with webpack and ES6, we have to do some extra + * things get testing to work right. Because we are gonna write test + * in ES6 to, we have to compile those as well. That's handled in + * karma.conf.js with the karma-webpack plugin. This is the entry + * file for webpack test. Just like webpack will create a bundle.js + * file for our client, when we run test, it well compile and bundle them + * all here! Crazy huh. So we need to do some setup + */ Error.stackTraceLimit = Infinity; +require('phantomjs-polyfill'); +require('es6-promise'); +require('es6-shim'); +require('es7-reflect-metadata/dist/browser'); -require('core-js'); - -// Typescript emit helpers polyfill -require('ts-helpers'); - -require('zone.js/dist/zone'); -require('zone.js/dist/long-stack-trace-zone'); -require('zone.js/dist/jasmine-patch'); - -// RxJS -require('rxjs/Rx'); +// require('zone.js'); +require('zone.js/dist/zone.js'); +require('zone.js/dist/long-stack-trace-zone.js'); +require('zone.js/dist/jasmine-patch.js'); +require('zone.js/dist/async-test.js'); -var testing = require('angular2/testing'); -var browser = require('angular2/platform/testing/browser'); +var testing = require('@angular/core/testing'); +var browser = require('@angular/platform-browser-dynamic/testing'); testing.setBaseTestProviders( - browser.TEST_BROWSER_PLATFORM_PROVIDERS, - browser.TEST_BROWSER_APPLICATION_PROVIDERS -); - -Object.assign(global, testing); + browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, + browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); /* - * Ok, this is kinda crazy. We can use the the context method on - * require that webpack created in order to tell webpack - * what files we actually want to require or import. - * Below, context will be an function/object with file names as keys. - * using that regex we are saying look in ./src/app and ./test then find - * any file that ends with spec.js and get its path. By passing in true - * we say do this recursively + Ok, this is kinda crazy. We can use the the context method on + require that webpack created in order to tell webpack + what files we actually want to require or import. + Below, context will be an function/object with file names as keys. + using that regex we are saying look in ./src/app and ./test then find + any file that ends with spec.js and get its path. By passing in true + we say do this recursively */ var testContext = require.context('./components', true, /\.spec\.ts/); -/* - * get all the files, for each file, call the context function - * that will require the file and load it up here. Context will - * loop and require those spec files here - */ -function requireAll(requireContext) { - return requireContext.keys().map(requireContext); -} - -// requires and returns all modules that match -var modules = requireAll(testContext); +// get all the files, for each file, call the context function +// that will require the file and load it up here. Context will +// loop and require those spec files here +testContext.keys().forEach(testContext); diff --git a/tsconfig.json b/tsconfig.json index d9454eb9..8028f548 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,6 @@ "module": "commonjs", "moduleResolution": "node", "sourceMap": false, - "noEmitHelpers": true, "declaration": true, "removeComments": false, "emitDecoratorMetadata": true, @@ -14,20 +13,12 @@ "noLib": false }, "exclude": [ - "node_modules", - "typings/main.d.ts", - "typings/main" + "node_modules" ], - "filesGlob": [ - "./components/**/*.spec.ts", - "!./node_modules/**/*.ts", - "./ng2-select.ts", - "typings/browser.d.ts" + "files": [ + "./typings/browser.d.ts", + "./ng2-select.ts" ], - "awesomeTypescriptLoaderOptions": { - "resolveGlobs": true, - "forkChecker": true - }, "compileOnSave": false, "buildOnSave": false, "atom": { "rewriteTsconfig": false } diff --git a/typings.json b/typings.json index 605e9106..592b524e 100644 --- a/typings.json +++ b/typings.json @@ -1,13 +1,12 @@ { "dependencies": { - "zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89", - "moment": "github:typed-typings/npm-moment#a4075cd50e63efbedd850f654594f293ab81a385" + "moment": "registry:npm/moment#2.10.5+20160211003958", + "webpack": "registry:npm/webpack#1.12.9+20160219013405" }, "devDependencies": {}, "ambientDependencies": { - "core-js": "registry:dt/core-js#0.0.0+20160317120654", - "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c", - "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729", - "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4" + "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", + "jasmine": "registry:dt/jasmine#2.2.0+20160317120654", + "require": "registry:dt/require#2.1.20+20160316155526" } } diff --git a/webpack.config.js b/webpack.config.js index 2efe62dc..2d04b081 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,12 +48,12 @@ const config = { entry: { angular2: [ // Angular 2 Deps - 'core-js/es6', - 'core-js/es7/reflect', + 'es6-shim', + 'es6-promise', 'zone.js', - 'angular2/common', - 'angular2/core', - 'ts-helpers' + 'reflect-metadata', + '@angular/common', + '@angular/core' ], 'angular2-select': ['ng2-select'], 'angular2-select-demo': 'demo' From f479a623079ff2a26a1c162652212891956e57a0 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 18 May 2016 18:54:12 +0300 Subject: [PATCH 13/61] 1.0.3 --- CHANGELOG.md | 24 ++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..e9a1d636 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,24 @@ + +## 1.0.3 (2016-05-18) + + +### Bug Fixes + +* ready for publish with ng2 0.42.0 ([8065308](https://github.com/valor-software/ng2-select/commit/8065308)) +* **misprint:** replaced hightlight with highlight ([6266d98](https://github.com/valor-software/ng2-select/commit/6266d98)) +* **multi select:** duplicates, select by Enter in multiple mode ([6fd0067](https://github.com/valor-software/ng2-select/commit/6fd0067)) +* **package:** updated code style\fixed ng2 imports ([7fbe339](https://github.com/valor-software/ng2-select/commit/7fbe339)) +* **Regex:** escape all characters to prevent exception ([3103352](https://github.com/valor-software/ng2-select/commit/3103352)) +* **select:** clicking on the input now causes the item list to appear ([#154](https://github.com/valor-software/ng2-select/issues/154)) ([c46c0ff](https://github.com/valor-software/ng2-select/commit/c46c0ff)) +* **select:** using string.match not regexp.test (fixes [#57](https://github.com/valor-software/ng2-select/issues/57), fixes [#54](https://github.com/valor-software/ng2-select/issues/54), fixes [#56](https://github.com/valor-software/ng2-select/issues/56)) ([5c96c2d](https://github.com/valor-software/ng2-select/commit/5c96c2d)), closes [#57](https://github.com/valor-software/ng2-select/issues/57) [#54](https://github.com/valor-software/ng2-select/issues/54) [#56](https://github.com/valor-software/ng2-select/issues/56) + + +### Features + +* **build:** added codecov integration ([749ac97](https://github.com/valor-software/ng2-select/commit/749ac97)) +* **build:** enabled tslinting ([4718b0f](https://github.com/valor-software/ng2-select/commit/4718b0f)) +* **package:** update to angular 2 rc1 ([d59368d](https://github.com/valor-software/ng2-select/commit/d59368d)) +* **package:** updated to angular2 beta.15 ([393674c](https://github.com/valor-software/ng2-select/commit/393674c)), closes [#106](https://github.com/valor-software/ng2-select/issues/106) + + + diff --git a/package.json b/package.json index f66a2f7b..27670e89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-select", - "version": "1.0.2", + "version": "1.0.3", "description": "Angular2 based replacement for select boxes", "scripts": { "flow.install:typings": "./node_modules/.bin/typings install", From f372961eae7ce2e889ca60abbc6f24156fd21e23 Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Thu, 19 May 2016 16:43:40 +0200 Subject: [PATCH 14/61] chore(package): update systemjs-builder to version 0.15.17 (#205) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27670e89..b764c3c7 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "require-dir": "0.3.0", "rxjs": "5.0.0-beta.6", "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.16", + "systemjs-builder": "0.15.17", "ts-loader": "0.8.2", "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", From 530ef232a0812c4055eec8d6c2100c140cf5e8f0 Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Thu, 19 May 2016 16:43:44 +0200 Subject: [PATCH 15/61] chore(package): update cpy-cli to version 1.0.1 (#204) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b764c3c7..0c71b71d 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "conventional-changelog-cli": "1.2.0", "conventional-github-releaser": "1.1.2", "copy-webpack-plugin": "3.0.0", - "cpy-cli": "1.0.0", + "cpy-cli": "1.0.1", "del-cli": "0.2.0", "es6-promise": "3.2.1", "es6-shim": "0.35.1", From 70c9d4b7790ec7e13ada4b7f0896d7087c00426d Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Thu, 19 May 2016 16:47:29 +0200 Subject: [PATCH 16/61] chore(package): update eslint-config-valorsoft to version 0.0.14 (#206) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0c71b71d..f8bbd09c 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "es6-promise": "3.2.1", "es6-shim": "0.35.1", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.13", + "eslint-config-valorsoft": "0.0.14", "exports-loader": "0.6.3", "file-loader": "0.8.5", "gh-pages": "0.11.0", From e53bdd4089adae98f8b28fac0a3e7e884710b6df Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Fri, 20 May 2016 13:51:24 +0200 Subject: [PATCH 17/61] chore(package): update webpack to version 1.13.1 (#207) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f8bbd09c..1f523a2d 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", "typings": "0.8.1", - "webpack": "1.13.0", + "webpack": "1.13.1", "webpack-dev-server": "1.14.1", "zone.js": "0.6.12" }, From 203cd58765934d08527572130c600986d720c817 Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Mon, 30 May 2016 14:30:30 +0200 Subject: [PATCH 18/61] chore(package): update eslint-config-valorsoft to version 0.0.15 (#220) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f523a2d..8cdb1af9 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "es6-promise": "3.2.1", "es6-shim": "0.35.1", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.14", + "eslint-config-valorsoft": "0.0.15", "exports-loader": "0.6.3", "file-loader": "0.8.5", "gh-pages": "0.11.0", From e61f084240a60e7e50a661f123551c793a338a8b Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Mon, 30 May 2016 14:30:36 +0200 Subject: [PATCH 19/61] chore(package): update html-webpack-plugin to version 2.19.0 (#219) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8cdb1af9..878d5149 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "gulp-size": "2.1.0", "gulp-tslint": "5.0.0", "html-loader": "0.4.3", - "html-webpack-plugin": "2.17.0", + "html-webpack-plugin": "2.19.0", "istanbul-instrumenter-loader": "0.2.0", "jasmine": "2.4.1", "karma": "0.13.22", From 57f67fc2708e78ff9d10a33949af05a8b7beafbc Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Mon, 30 May 2016 14:30:40 +0200 Subject: [PATCH 20/61] chore(package): update copy-webpack-plugin to version 3.0.1 (#218) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 878d5149..af20cebf 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.2.0", "conventional-github-releaser": "1.1.2", - "copy-webpack-plugin": "3.0.0", + "copy-webpack-plugin": "3.0.1", "cpy-cli": "1.0.1", "del-cli": "0.2.0", "es6-promise": "3.2.1", From ee7830bfb36fbe788691879536bcaef41a867066 Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Mon, 30 May 2016 14:30:50 +0200 Subject: [PATCH 21/61] chore(package): update systemjs-builder to version 0.15.18 (#215) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index af20cebf..5d8da142 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "require-dir": "0.3.0", "rxjs": "5.0.0-beta.6", "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.17", + "systemjs-builder": "0.15.18", "ts-loader": "0.8.2", "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", From c178431e6167db46025e7c86a51a57e311f58469 Mon Sep 17 00:00:00 2001 From: linusbrolin Date: Mon, 30 May 2016 14:32:00 +0200 Subject: [PATCH 22/61] feat(css): removed most hardcoded css, instead rely on bootstrap css classes (#214) Made the UI more standardized to use only Bootstrap css classes where possible and minimal hardcoded css rules. The UI now also more closely looks like other Bootstrap UI elements. --- components/css/ng2-select.css | 273 ---------------------------------- components/select/select.ts | 110 +++++++++++--- 2 files changed, 92 insertions(+), 291 deletions(-) delete mode 100644 components/css/ng2-select.css diff --git a/components/css/ng2-select.css b/components/css/ng2-select.css deleted file mode 100644 index c0aac6a3..00000000 --- a/components/css/ng2-select.css +++ /dev/null @@ -1,273 +0,0 @@ - -/* Style when highlighting a search. */ -.ui-select-highlight { - font-weight: bold; -} - -.ui-select-offscreen { - clip: rect(0 0 0 0) !important; - width: 1px !important; - height: 1px !important; - border: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden !important; - position: absolute !important; - outline: 0 !important; - left: 0px !important; - top: 0px !important; -} - - -.ui-select-choices-row:hover { - background-color: #f5f5f5; -} - -/* Select2 theme */ - -/* Mark invalid Select2 */ -.ng-dirty.ng-invalid > a.select2-choice { - border-color: #D44950; -} - -.select2-result-single { - padding-left: 0; -} - -.select2-locked > .select2-search-choice-close{ - display:none; -} - -.select-locked > .ui-select-match-close{ - display:none; -} - -body > .select2-container.open { - z-index: 9999; /* The z-index Select2 applies to the select2-drop */ -} - -/* Handle up direction Select2 */ -.ui-select-container[theme="select2"].direction-up .ui-select-match { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.ui-select-container[theme="select2"].direction-up .ui-select-dropdown { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - - border-top-width: 1px; /* FIXME hardcoded value :-/ */ - border-top-style: solid; - - box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); - - margin-top: -4px; /* FIXME hardcoded value :-/ */ -} -.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search { - margin-top: 4px; /* FIXME hardcoded value :-/ */ -} -.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match { - border-bottom-color: #5897fb; -} - -/* Selectize theme */ - -/* Helper class to show styles when focus */ -.selectize-input.selectize-focus{ - border-color: #007FBB !important; -} - -/* Fix input width for Selectize theme */ -.selectize-control > .selectize-input > input { - width: 100%; -} - -/* Fix dropdown width for Selectize theme */ -.selectize-control > .selectize-dropdown { - width: 100%; -} - -/* Mark invalid Selectize */ -.ng-dirty.ng-invalid > div.selectize-input { - border-color: #D44950; -} - -/* Handle up direction Selectize */ -.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown { - box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); - - margin-top: -2px; /* FIXME hardcoded value :-/ */ -} - -/* Bootstrap theme */ - -/* Helper class to show styles when focus */ -.btn-default-focus { - color: #333; - background-color: #EBEBEB; - border-color: #ADADAD; - text-decoration: none; - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); -} - -.ui-select-bootstrap .ui-select-toggle { - position: relative; -} - -.ui-select-bootstrap .ui-select-toggle > .caret { - position: absolute; - height: 10px; - top: 50%; - right: 10px; - margin-top: -2px; -} - -/* Fix Bootstrap dropdown position when inside a input-group */ -.input-group > .ui-select-bootstrap.dropdown { - /* Instead of relative */ - position: static; -} - -.input-group > .ui-select-bootstrap > input.ui-select-search.form-control { - border-radius: 4px; /* FIXME hardcoded value :-/ */ - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up { - border-radius: 4px !important; /* FIXME hardcoded value :-/ */ - border-top-right-radius: 0 !important; - border-bottom-right-radius: 0 !important; -} - -.ui-select-bootstrap > .ui-select-match > .btn{ - /* Instead of center because of .btn */ - text-align: left !important; -} - -.ui-select-bootstrap > .ui-select-match > .caret { - position: absolute; - top: 45%; - right: 15px; -} - -.ui-disabled { - background-color: #eceeef ; - border-radius: 4px; - position: absolute; - width: 100%; - height: 100%; - z-index: 5; - opacity: 0.6; - top: 0; - left: 0; - cursor: not-allowed; -} - -/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */ -.ui-select-bootstrap > .ui-select-choices { - width: 100%; - height: auto; - max-height: 200px; - overflow-x: hidden; - margin-top: -1px; -} - -body > .ui-select-bootstrap.open { - z-index: 1000; /* Standard Bootstrap dropdown z-index */ -} - -.ui-select-multiple.ui-select-bootstrap { - height: auto; - padding: 3px 3px 0 3px; -} - -.ui-select-multiple.ui-select-bootstrap input.ui-select-search { - background-color: transparent !important; /* To prevent double background when disabled */ - border: none; - outline: none; - height: 1.666666em; - margin-bottom: 3px; -} - -.ui-select-multiple.ui-select-bootstrap .ui-select-match .close { - font-size: 1.6em; - line-height: 0.75; -} - -.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { - outline: 0; - margin: 0 3px 3px 0; -} - -.ui-select-multiple .ui-select-match-item { - position: relative; -} - -.ui-select-multiple .ui-select-match-item.dropping-before:before { - content: ""; - position: absolute; - top: 0; - right: 100%; - height: 100%; - margin-right: 2px; - border-left: 1px solid #428bca; -} - -.ui-select-multiple .ui-select-match-item.dropping-after:after { - content: ""; - position: absolute; - top: 0; - left: 100%; - height: 100%; - margin-left: 2px; - border-right: 1px solid #428bca; -} - -.ui-select-bootstrap .ui-select-choices-row>a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: 400; - line-height: 1.42857143; - color: #333; - white-space: nowrap; -} - -.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus { - text-decoration: none; - color: #262626; - background-color: #f5f5f5; -} - -.ui-select-bootstrap .ui-select-choices-row.active>a { - color: #fff; - text-decoration: none; - outline: 0; - background-color: #428bca; -} - -.ui-select-bootstrap .ui-select-choices-row.disabled>a, -.ui-select-bootstrap .ui-select-choices-row.active.disabled>a { - color: #777; - cursor: not-allowed; - background-color: #fff; -} - -/* fix hide/show angular animation */ -.ui-select-match.ng-hide-add, -.ui-select-search.ng-hide-add { - display: none !important; -} - -/* Mark invalid Bootstrap */ -.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match { - border-color: #D44950; -} - -/* Handle up direction Bootstrap */ -.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown { - box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25); -} diff --git a/components/select/select.ts b/components/select/select.ts index c1f39d99..c50f0f3c 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -5,16 +5,87 @@ import {OptionsBehavior} from './select-interfaces'; import {escapeRegexp} from './common'; import {OffClickDirective} from './off-click'; +let styles = ` +.ui-select-toggle { + position: relative; + + /* hardcoded, should use variable from bootstrap */ + padding: 0.375rem 0.75rem; +} + +/* Fix Bootstrap dropdown position when inside a input-group */ +.input-group > .dropdown { + /* Instead of relative */ + position: static; +} + +.ui-select-match > .btn { + /* Instead of center because of .btn */ + text-align: left !important; +} + +.ui-select-match > .caret { + position: absolute; + top: 45%; + right: 15px; +} + +.ui-disabled { + background-color: #eceeef; + border-radius: 4px; + position: absolute; + width: 100%; + height: 100%; + z-index: 5; + opacity: 0.6; + top: 0; + left: 0; + cursor: not-allowed; +} + +.ui-select-choices { + width: 100%; + height: auto; + max-height: 200px; + overflow-x: hidden; + margin-top: 0; +} + +.ui-select-multiple .ui-select-choices { + margin-top: 1px; +} + +.ui-select-multiple { + height: auto; + padding: 3px 3px 0 3px; +} + +.ui-select-multiple input.ui-select-search { + background-color: transparent !important; /* To prevent double background when disabled */ + border: none; + outline: none; + height: 1.9em; + margin-bottom: 3px; + + /* hardcoded, should use variable from bootstrap, but must be adjusted because... reasons */ + padding: 0.375rem 0.55rem; +} + +.ui-select-multiple .ui-select-match-item { + outline: 0; + margin: 0 3px 3px 0; +} +`; + let optionsTemplate = `
        -
      • -
      • +
        - +
        @@ -22,10 +93,10 @@ let optionsTemplate = `
        -
      • -
        -
        {{c.text}}
        + class="ui-select-choices dropdown-menu" role="menu"> +
      • +
        +
        {{c.text}}
        - +
      `; + @Component({ selector: 'ng-select', directives: [OffClickDirective], pipes: [HighlightPipe], + styles: [styles], template: `
      + class="ui-select-container dropdown open">
      @@ -64,8 +137,8 @@ let optionsTemplate = ` - + (click)="remove(activeOption)" class="close pull-right"> + ×
      @@ -83,16 +156,17 @@ let optionsTemplate = ` *ngIf="multiple === true" (keyup)="mainClick($event)" (focus)="focusToInput('')" - class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open"> + class="ui-select-container ui-select-multiple dropdown form-control open">
      - -  × + × {{a.text}} @@ -106,7 +180,7 @@ let optionsTemplate = ` autocorrect="off" autocapitalize="off" spellcheck="false" - class="ui-select-search input-xs" + class="form-control ui-select-search" placeholder="{{active.length <= 0 ? placeholder : ''}}" role="combobox"> ${optionsTemplate} From cf7f110c5e19e3543c3e1896f239295d881a786f Mon Sep 17 00:00:00 2001 From: linusbrolin Date: Mon, 30 May 2016 15:29:55 +0200 Subject: [PATCH 23/61] feat(input): Added selectable inputfields instead of forcing id and text. (#213) --- components/select/select.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index c50f0f3c..2f47916c 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -190,13 +190,15 @@ let optionsTemplate = ` export class SelectComponent implements OnInit { @Input() public allowClear:boolean = false; @Input() public placeholder:string = ''; + @Input() public idField:string = 'id'; + @Input() public textField:string = 'text'; @Input() public initData:Array = []; @Input() public multiple:boolean = false; @Input() public set items(value:Array) { this._items = value; - this.itemObjects = this._items.map((item:any) => new SelectItem(item)); + this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); } @Input() @@ -309,7 +311,7 @@ export class SelectComponent implements OnInit { this.behavior = (this.firstItemHasChildren) ? new ChildrenBehavior(this) : new GenericBehavior(this); if (this.initData) { - this.active = this.initData.map((data:any) => new SelectItem(data)); + this.active = this.initData.map((data:any) => (typeof data === 'string' ? new SelectItem(data) : new SelectItem({id: data[this.idField], text: data[this.textField]}))); this.data.emit(this.active); } } From 7f4e9f6dedd7a7bbd5fbba98b9bbb7347876f5b8 Mon Sep 17 00:00:00 2001 From: linusbrolin Date: Mon, 30 May 2016 15:30:25 +0200 Subject: [PATCH 24/61] fix(filter): possible dupes in filter (#212) * fixed possible dupes in filter * fixed linting error --- components/select/select.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index 2f47916c..c409f03c 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -540,7 +540,7 @@ export class GenericBehavior extends Behavior implements OptionsBehavior { .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.multiple === true && this.actor.active.map((item: SelectItem) => item.id).indexOf(option.id) < 0)); }); this.actor.options = options; if (this.actor.options.length > 0) { From b018f4b4181a31a28a1a6c8d77acf320848acd0b Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Tue, 31 May 2016 16:06:54 +0200 Subject: [PATCH 25/61] chore(package): update ng2-bootstrap to version 1.0.17 (#222) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5d8da142..784341ff 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "lite-server": "2.2.0", "markdown-loader": "0.1.7", "marked": "0.3.5", - "ng2-bootstrap": "1.0.16", + "ng2-bootstrap": "1.0.17", "phantomjs-polyfill": "0.0.2", "phantomjs-prebuilt": "2.1.7", "pre-commit": "1.1.3", From 409e07b4c78b8eddeb81ff8ebf2cbdf1877af19a Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Wed, 1 Jun 2016 13:24:11 +0200 Subject: [PATCH 26/61] chore(package): update systemjs-builder to version 0.15.19 (#224) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 784341ff..a9a8223e 100644 --- a/package.json +++ b/package.json @@ -105,7 +105,7 @@ "require-dir": "0.3.0", "rxjs": "5.0.0-beta.6", "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.18", + "systemjs-builder": "0.15.19", "ts-loader": "0.8.2", "tslint-config-valorsoft": "1.0.3", "typescript": "1.8.10", From ba618159fb4dcac71baeadd1cb28fd36ca9d6ae5 Mon Sep 17 00:00:00 2001 From: Greenkeeper Date: Mon, 6 Jun 2016 10:28:53 +0200 Subject: [PATCH 27/61] chore(package): update awesome-typescript-loader to version 0.19.0 (#234) https://greenkeeper.io/ --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a9a8223e..f8fd90b4 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "@angular/platform-browser": "^2.0.0-rc.1", "@angular/platform-browser-dynamic": "^2.0.0-rc.1", "async": "1.5.2", - "awesome-typescript-loader": "^0.17.0-rc.6", + "awesome-typescript-loader": "^0.19.0", "bootstrap": "3.3.6", "codecov": "1.0.1", "compression-webpack-plugin": "0.3.1", From f83764f1e5f0d11ecb57c5680243fc38d773e900 Mon Sep 17 00:00:00 2001 From: Aleksey Date: Fri, 24 Jun 2016 15:39:22 +0200 Subject: [PATCH 28/61] fix(): firefox issue (#273) * chore(package): update tslint-config-valorsoft to version 1.0.4 https://greenkeeper.io/ * fix bug when pressing delete or backspace buttons * remove unnecessary things * replace srcElement with target --- components/select/select.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index c409f03c..f267aa78 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -300,8 +300,9 @@ export class SelectComponent implements OnInit { e.preventDefault(); return; } - if (e.srcElement) { - this.inputValue = e.srcElement.value; + let target = e.target || e.srcElement; + if (target && target.value) { + this.inputValue = target.value; this.behavior.filter(new RegExp(escapeRegexp(this.inputValue), 'ig')); this.doEvent('typed', this.inputValue); } @@ -384,7 +385,8 @@ export class SelectComponent implements OnInit { .toLowerCase(); this.focusToInput(value); this.open(); - event.srcElement.value = value; + let target = event.target || event.srcElement; + target.value = value; this.inputEvent(event); } From 2c090f341b0b634c3eca855707844a08b9b463c6 Mon Sep 17 00:00:00 2001 From: Aleksey Date: Fri, 24 Jun 2016 15:39:54 +0200 Subject: [PATCH 29/61] fix(select): allow empty items * chore(package): update tslint-config-valorsoft to version 1.0.4 https://greenkeeper.io/ * check invalid data in items and remove them * fig bug if incoming data is undefined --- components/select/select.ts | 12 ++++++++++-- package.json | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index f267aa78..e79a08f1 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -197,8 +197,16 @@ export class SelectComponent implements OnInit { @Input() public set items(value:Array) { - this._items = value; - this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + if (!value) { + this._items = this.itemObjects = []; + } else { + this._items = value.filter((item:any) => { + if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { + return item; + } + }); + this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + } } @Input() diff --git a/package.json b/package.json index f8fd90b4..fd9392f3 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "source-map-loader": "0.1.5", "systemjs-builder": "0.15.19", "ts-loader": "0.8.2", - "tslint-config-valorsoft": "1.0.3", + "tslint-config-valorsoft": "1.0.4", "typescript": "1.8.10", "typings": "0.8.1", "webpack": "1.13.1", From 1ddbcd9902c3f9fefb7e1b2560b11b5bd904095a Mon Sep 17 00:00:00 2001 From: Namek Date: Mon, 27 Jun 2016 18:20:32 +0200 Subject: [PATCH 30/61] feat: programmatically select active items (#223) * feat: programmatically select active items Add `active` property which describes currently selected items. Remove `initData` property since everything works on top of `active`. * docs(README): change info about properties: `initData` -> `active` --- README.md | 2 +- components/select/select.ts | 28 ++++++++++++++++++++++------ 2 files changed, 23 insertions(+), 7 deletions(-) mode change 100644 => 100755 README.md mode change 100644 => 100755 components/select/select.ts diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 54be6bce..04b4ac11 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Follow me [![twitter](https://img.shields.io/twitter/follow/valorkin.svg?style=s Items may be nested by adding a `children` property to any item, whose value should be another array of items. Items that have children may omit having an ID. If `items` are specified, all items are expected to be available locally and all selection operations operate on this local array only. If omitted, items are not available locally, and the `query` option should be provided to fetch data. - - `initData` (`?Array`) - Initial selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single', + - `active` (`?Array`) - selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value. - `allowClear` (`?boolean=false`) (*not yet supported*) - Set to `true` to allow the selection to be cleared. This option only applies to single-value inputs. - `placeholder` (`?string=''`) - Placeholder text to display when the element has no focus and selected items. diff --git a/components/select/select.ts b/components/select/select.ts old mode 100644 new mode 100755 index e79a08f1..6191221e --- a/components/select/select.ts +++ b/components/select/select.ts @@ -192,7 +192,6 @@ export class SelectComponent implements OnInit { @Input() public placeholder:string = ''; @Input() public idField:string = 'id'; @Input() public textField:string = 'text'; - @Input() public initData:Array = []; @Input() public multiple:boolean = false; @Input() @@ -217,6 +216,23 @@ export class SelectComponent implements OnInit { } } + @Input() + public set active(selectedItems:Array) { + if (!selectedItems || selectedItems.length === 0) { + this._active = []; + } else { + let areItemsStrings = typeof selectedItems[0] === 'string'; + + this._active = selectedItems.map((item:any) => { + let data = areItemsStrings + ? item + : { id: item[this.idField], text: item[this.textField] }; + + return new SelectItem(data); + }); + } + } + @Output() public data:EventEmitter = new EventEmitter(); @Output() public selected:EventEmitter = new EventEmitter(); @Output() public removed:EventEmitter = new EventEmitter(); @@ -224,16 +240,20 @@ export class SelectComponent implements OnInit { public options:Array = []; public itemObjects:Array = []; - public active:Array = []; public activeOption:SelectItem; public element:ElementRef; + public get active():Array { + return this._active; + } + private inputMode:boolean = false; private optionsOpened:boolean = false; private behavior:OptionsBehavior; private inputValue:string = ''; private _items:Array = []; private _disabled:boolean = false; + private _active:Array = []; public constructor(element:ElementRef) { this.element = element; @@ -319,10 +339,6 @@ export class SelectComponent implements OnInit { public ngOnInit():any { this.behavior = (this.firstItemHasChildren) ? new ChildrenBehavior(this) : new GenericBehavior(this); - if (this.initData) { - this.active = this.initData.map((data:any) => (typeof data === 'string' ? new SelectItem(data) : new SelectItem({id: data[this.idField], text: data[this.textField]}))); - this.data.emit(this.active); - } } public remove(item:SelectItem):void { From 5b992e9526a89ea9b5c65e3c7e14ad91a2faf487 Mon Sep 17 00:00:00 2001 From: Alexander Skrypnyk Date: Tue, 19 Jul 2016 11:32:33 +0300 Subject: [PATCH 31/61] feat(package): updated to rc.4 and new forms (#311) --- components/select.ts | 2 +- components/select/off-click.ts | 2 +- components/select/select-pipes.spec.ts | 6 +++--- components/select/select-pipes.ts | 4 ++-- components/select/select.ts | 12 ++++++------ demo/components/select-section.ts | 14 +++++++------- demo/components/select/children-demo.ts | 8 ++++---- demo/components/select/multiple-demo.ts | 8 ++++---- demo/components/select/rich-demo.ts | 8 ++++---- demo/components/select/single-demo.ts | 8 ++++---- demo/index.html | 4 ++-- demo/index.ts | 10 +++++----- ng2-select.ts | 2 +- 13 files changed, 44 insertions(+), 44 deletions(-) diff --git a/components/select.ts b/components/select.ts index 219fc2d3..123935cc 100644 --- a/components/select.ts +++ b/components/select.ts @@ -1,2 +1,2 @@ -import {SelectComponent} from './select/select'; +import { SelectComponent } from './select/select'; export const SELECT_DIRECTIVES:Array = [SelectComponent]; diff --git a/components/select/off-click.ts b/components/select/off-click.ts index ccf73a15..4167d3ff 100644 --- a/components/select/off-click.ts +++ b/components/select/off-click.ts @@ -1,4 +1,4 @@ -import {Directive, HostListener, Input, OnInit, OnDestroy} from '@angular/core'; +import { Directive, HostListener, Input, OnInit, OnDestroy } from '@angular/core'; @Directive({ selector: '[offClick]' diff --git a/components/select/select-pipes.spec.ts b/components/select/select-pipes.spec.ts index 11a720e3..4a09b022 100644 --- a/components/select/select-pipes.spec.ts +++ b/components/select/select-pipes.spec.ts @@ -1,6 +1,6 @@ -import {it, expect, describe, inject, beforeEachProviders} from '@angular/core/testing'; -import {ComponentFixture} from '@angular/compiler/testing'; -import {HighlightPipe} from './select-pipes'; +import { it, expect, describe, inject, beforeEachProviders } from '@angular/core/testing'; +import { ComponentFixture } from '@angular/compiler/testing'; +import { HighlightPipe } from './select-pipes'; describe('Component: HighlightPipe', () => { beforeEachProviders(() => [ diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index c536eae5..4e88697a 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -1,5 +1,5 @@ -import {Pipe, PipeTransform} from '@angular/core'; -import {escapeRegexp} from './common'; +import { Pipe, PipeTransform } from '@angular/core'; +import { escapeRegexp } from './common'; @Pipe({name: 'highlight'}) export class HighlightPipe implements PipeTransform { diff --git a/components/select/select.ts b/components/select/select.ts index 6191221e..4f1a4944 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,9 +1,9 @@ -import {Component, Input, Output, EventEmitter, ElementRef, OnInit} from '@angular/core'; -import {SelectItem} from './select-item'; -import {HighlightPipe, stripTags} from './select-pipes'; -import {OptionsBehavior} from './select-interfaces'; -import {escapeRegexp} from './common'; -import {OffClickDirective} from './off-click'; +import { Component, Input, Output, EventEmitter, ElementRef, OnInit } from '@angular/core'; +import { SelectItem } from './select-item'; +import { HighlightPipe, stripTags } from './select-pipes'; +import { OptionsBehavior } from './select-interfaces'; +import { escapeRegexp } from './common'; +import { OffClickDirective } from './off-click'; let styles = ` .ui-select-toggle { diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index 55ccdb4b..cf3febfd 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -1,12 +1,12 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES} from '@angular/common'; +import { Component } from '@angular/core'; +import { CORE_DIRECTIVES } from '@angular/common'; -import {TAB_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; +import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; -import {SingleDemoComponent} from './select/single-demo'; -import {MultipleDemoComponent} from './select/multiple-demo'; -import {ChildrenDemoComponent} from './select/children-demo'; -import {RichDemoComponent} from './select/rich-demo'; +import { SingleDemoComponent } from './select/single-demo'; +import { MultipleDemoComponent } from './select/multiple-demo'; +import { ChildrenDemoComponent } from './select/children-demo'; +import { RichDemoComponent } from './select/rich-demo'; let name = 'Select'; // webpack html imports diff --git a/demo/components/select/children-demo.ts b/demo/components/select/children-demo.ts index d16fbe82..f57e05c8 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/components/select/children-demo.ts @@ -1,8 +1,8 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; -import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; +import { Component } from '@angular/core'; +import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; +import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; -import {SELECT_DIRECTIVES} from '../../../ng2-select'; +import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./children-demo.html'); diff --git a/demo/components/select/multiple-demo.ts b/demo/components/select/multiple-demo.ts index ada5419f..ea5a574c 100644 --- a/demo/components/select/multiple-demo.ts +++ b/demo/components/select/multiple-demo.ts @@ -1,8 +1,8 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; -import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; +import { Component } from '@angular/core'; +import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; +import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; -import {SELECT_DIRECTIVES} from '../../../ng2-select'; +import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./multiple-demo.html'); diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index a835149a..adb09adc 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -1,8 +1,8 @@ -import {Component, OnInit, ViewEncapsulation} from '@angular/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; -import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; +import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; -import {SELECT_DIRECTIVES} from '../../../ng2-select'; +import { SELECT_DIRECTIVES } from '../../../ng2-select'; const COLORS = [ { 'name': 'Blue 10', 'hex': '#C0E6FF' }, diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index 45adffb6..756310e0 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -1,8 +1,8 @@ -import {Component} from '@angular/core'; -import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common'; -import {BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; +import { Component } from '@angular/core'; +import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; +import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; -import {SELECT_DIRECTIVES} from '../../../ng2-select'; +import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./single-demo.html'); diff --git a/demo/index.html b/demo/index.html index 266abc2b..3c077e81 100644 --- a/demo/index.html +++ b/demo/index.html @@ -31,9 +31,9 @@ - + Loading... - + diff --git a/demo/index.ts b/demo/index.ts index 872f27c6..77772a05 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,13 +1,13 @@ -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {Component} from '@angular/core'; -import {NgClass} from '@angular/common'; +import { bootstrap } from '@angular/platform-browser-dynamic'; +import { Component } from '@angular/core'; +import { NgClass } from '@angular/common'; -import {SelectSectionComponent} from './components/select-section'; +import { SelectSectionComponent } from './components/select-section'; let gettingStarted = require('./getting-started.md'); @Component({ - selector: 'app', + selector: 'demo-app', template: `
      diff --git a/ng2-select.ts b/ng2-select.ts index 10271758..af1f3e14 100644 --- a/ng2-select.ts +++ b/ng2-select.ts @@ -1,4 +1,4 @@ -import {SELECT_DIRECTIVES} from './components/select'; +import { SELECT_DIRECTIVES } from './components/select'; export * from './components/select/select'; export * from './components/select'; From 388506f70ee1ec7505e9e0c6b18ffe1ff1178d88 Mon Sep 17 00:00:00 2001 From: linusbrolin Date: Tue, 19 Jul 2016 11:26:52 +0200 Subject: [PATCH 32/61] fix(options): fixed the disabled state (#225) * fixed the disabled state * added a getter for disabled, instead of using _disabled in the template. --- components/select/select.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/select/select.ts b/components/select/select.ts index 4f1a4944..76d9ec17 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -215,6 +215,9 @@ export class SelectComponent implements OnInit { this.hideOptions(); } } + public get disabled(): boolean { + return this._disabled; + } @Input() public set active(selectedItems:Array) { From d39def2dad263d9a29c13f8ab2a44aaf31ec3b3a Mon Sep 17 00:00:00 2001 From: Adrian Faciu Date: Sun, 24 Jul 2016 21:56:31 +0300 Subject: [PATCH 33/61] fix(docs): updated property name for active items (#318) fixes #307 --- components/select/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/readme.md b/components/select/readme.md index fcf010b8..8913a3d6 100644 --- a/components/select/readme.md +++ b/components/select/readme.md @@ -24,7 +24,7 @@ import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select'; Items may be nested by adding a `children` property to any item, whose value should be another array of items. Items that have children may omit having an ID. If `items` are specified, all items are expected to be available locally and all selection operations operate on this local array only. If omitted, items are not available locally, and the `query` option should be provided to fetch data. - - `data` (`?Array`) - Initial selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single', + - `active` (`?Array`) - Initial selection data to set. This should be an object with `id` and `text` properties in the case of input type 'Single', or an array of such objects otherwise. This option is mutually exclusive with value. - `allowClear` (`?boolean=false`) (*not yet supported*) - Set to `true` to allow the selection to be cleared. This option only applies to single-value inputs. - `placeholder` (`?string=''`) - Placeholder text to display when the element has no focus and selected items. From e642025b54e04065062d5c49abc1e9f040c22f92 Mon Sep 17 00:00:00 2001 From: Lukasz Potapczuk Date: Wed, 10 Aug 2016 10:10:03 +0200 Subject: [PATCH 34/61] Fixed the bug where children of an object weren't passed to the constructor of the SelectItem. --- components/select/select.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index 76d9ec17..1d6235ce 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -192,6 +192,7 @@ export class SelectComponent implements OnInit { @Input() public placeholder:string = ''; @Input() public idField:string = 'id'; @Input() public textField:string = 'text'; + @Input() public childrenField:string = 'children'; @Input() public multiple:boolean = false; @Input() @@ -204,7 +205,7 @@ export class SelectComponent implements OnInit { return item; } }); - this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField], children: item[this.childrenField]}))); } } From 10aeabab9885ab8665eb93d852e327213d49ba1a Mon Sep 17 00:00:00 2001 From: Oleksandr Telnov Date: Wed, 21 Sep 2016 21:42:31 +0300 Subject: [PATCH 35/61] feat(package): update to angular 2.0.0 (#412) * update angular to rc7, update rest of dependencies, use ng2-webpack-config, create modules and update app to rc7 * add custom typings * update to 2.0.0, remove typings * return typescript v * fix select styles * sanitize html (colorbox) add ngc compiler --- .gitignore | 6 + .ng2-config.js | 29 ++ .npmignore | 1 + .travis.yml | 5 +- components/select.module.ts | 14 + components/select.ts | 2 - components/select/off-click.ts | 1 - components/select/select-pipes.spec.ts | 42 ++- components/select/select.ts | 310 +++++++++++++--------- demo/components/select-section.ts | 45 ++-- demo/components/select/children-demo.ts | 7 +- demo/components/select/multiple-demo.html | 2 +- demo/components/select/multiple-demo.ts | 11 +- demo/components/select/rich-demo.ts | 92 +++---- demo/components/select/single-demo.ts | 7 +- demo/custom-typings.d.ts | 1 + demo/demo.component.ts | 34 +++ demo/demo.module.ts | 36 +++ demo/index.html | 1 - demo/index.ts | 46 +--- demo/polyfills.ts | 28 ++ demo/vendor.ts | 23 ++ gulp-tasks/lint.js | 5 +- karma.conf.js | 100 +------ ng2-select.ts | 10 +- package.json | 119 ++++----- protractor.conf.js | 5 + spec-bundle.js | 65 +++++ test.bundle.js | 47 ---- tsconfig.json | 31 ++- tsconfig.publish.json | 31 +++ tslint.json | 6 +- typings.json | 12 - webpack.config.js | 184 ++----------- 34 files changed, 672 insertions(+), 686 deletions(-) create mode 100644 .ng2-config.js create mode 100644 components/select.module.ts delete mode 100644 components/select.ts create mode 100644 demo/custom-typings.d.ts create mode 100644 demo/demo.component.ts create mode 100644 demo/demo.module.ts create mode 100644 demo/polyfills.ts create mode 100644 demo/vendor.ts create mode 100644 protractor.conf.js create mode 100644 spec-bundle.js delete mode 100644 test.bundle.js create mode 100644 tsconfig.publish.json delete mode 100644 typings.json diff --git a/.gitignore b/.gitignore index faf02f93..e3e8cbc2 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,7 @@ npm-debug.log # WebStorm .idea +.vscode # ignore build and dist for now /bundles @@ -20,6 +21,7 @@ npm-debug.log /demo/**/*.js /demo/**/*.js.map /demo/**/*.d.ts +!/demo/custom-typings.d.ts /components/**/*.js /components/**/*.js.map /components/**/*.d.ts @@ -28,3 +30,7 @@ ng2-select.js.map ng2-select.d.ts /logs + +factories + +/**/*.metadata.json diff --git a/.ng2-config.js b/.ng2-config.js new file mode 100644 index 00000000..1229229e --- /dev/null +++ b/.ng2-config.js @@ -0,0 +1,29 @@ +'use strict'; +var pkg = require('./package.json'); + +module.exports = { + // metadata + title: pkg.description, + baseUrl: '/', + // root folder name + src: 'demo', + dist: 'demo-build', + htmlIndexes: ['index.html'], + // karma bundle src + spec: './spec-bundle.js', + // webpack entry + entry: { + polyfills: './demo/polyfills.ts', + vendor: './demo/vendor.ts', + main: './demo/index.ts' + }, + commonChunks: { + name: ['polyfills', 'vendor'].reverse() + }, + // webpack alias + alias: {}, + copy: [ + {from: 'demo/favicon.ico', to: 'favicon.ico'}, + {from: 'demo/assets', to: 'assets'} + ] +}; diff --git a/.npmignore b/.npmignore index 8f189f28..23f40324 100644 --- a/.npmignore +++ b/.npmignore @@ -22,3 +22,4 @@ webpack.config.js /components/**/*.ts !/components/**/*.d.ts +factories diff --git a/.travis.yml b/.travis.yml index 56eb9da3..05455269 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,12 +2,13 @@ language: node_js node_js: - "6" +#before_install: npm i -g npm@latest + script: - - npm run flow.install:typings - npm test after_success: - - ./node_modules/.bin/codecov + - ./node_modules/.bin/codecov -f coverage/coverage-final.json addons: # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ ) diff --git a/components/select.module.ts b/components/select.module.ts new file mode 100644 index 00000000..d864c755 --- /dev/null +++ b/components/select.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { SelectComponent } from './select/select'; +import { HighlightPipe } from './select/select-pipes'; +import { OffClickDirective } from './select/off-click'; + +@NgModule({ + imports: [CommonModule], + declarations: [SelectComponent, HighlightPipe, OffClickDirective], + exports: [SelectComponent, HighlightPipe, OffClickDirective] +}) +export class SelectModule { +} diff --git a/components/select.ts b/components/select.ts deleted file mode 100644 index 123935cc..00000000 --- a/components/select.ts +++ /dev/null @@ -1,2 +0,0 @@ -import { SelectComponent } from './select/select'; -export const SELECT_DIRECTIVES:Array = [SelectComponent]; diff --git a/components/select/off-click.ts b/components/select/off-click.ts index 4167d3ff..a3372bb9 100644 --- a/components/select/off-click.ts +++ b/components/select/off-click.ts @@ -19,5 +19,4 @@ export class OffClickDirective implements OnInit, OnDestroy { public ngOnDestroy(): any { document.removeEventListener('click', this.offClickHandler); } - } diff --git a/components/select/select-pipes.spec.ts b/components/select/select-pipes.spec.ts index 4a09b022..a5961dc0 100644 --- a/components/select/select-pipes.spec.ts +++ b/components/select/select-pipes.spec.ts @@ -1,12 +1,34 @@ -import { it, expect, describe, inject, beforeEachProviders } from '@angular/core/testing'; -import { ComponentFixture } from '@angular/compiler/testing'; -import { HighlightPipe } from './select-pipes'; - -describe('Component: HighlightPipe', () => { - beforeEachProviders(() => [ - HighlightPipe - ]); - it('should be fine', inject([HighlightPipe], (fixture:ComponentFixture) => { +import { Component } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectModule } from '../../ng2-select'; + +const html = ``; + +describe('Component: ng2-select', () => { + let fixture:ComponentFixture; + let context:TestSelectComponent; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestSelectComponent], + imports: [SelectModule] + }); + TestBed.overrideComponent(TestSelectComponent, {set: {template: html}}); + fixture = TestBed.createComponent(TestSelectComponent); + context = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('fixture should not be null', () => { expect(fixture).not.toBeNull(); - })); + }); }); + +@Component({ + selector: 'select-test', + template: '' +}) + +class TestSelectComponent { +} diff --git a/components/select/select.ts b/components/select/select.ts index 76d9ec17..09928f9b 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,121 +1,107 @@ import { Component, Input, Output, EventEmitter, ElementRef, OnInit } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { SelectItem } from './select-item'; -import { HighlightPipe, stripTags } from './select-pipes'; +import { stripTags } from './select-pipes'; import { OptionsBehavior } from './select-interfaces'; import { escapeRegexp } from './common'; -import { OffClickDirective } from './off-click'; let styles = ` -.ui-select-toggle { - position: relative; - - /* hardcoded, should use variable from bootstrap */ - padding: 0.375rem 0.75rem; -} - -/* Fix Bootstrap dropdown position when inside a input-group */ -.input-group > .dropdown { - /* Instead of relative */ - position: static; -} - -.ui-select-match > .btn { - /* Instead of center because of .btn */ - text-align: left !important; -} - -.ui-select-match > .caret { - position: absolute; - top: 45%; - right: 15px; -} - -.ui-disabled { - background-color: #eceeef; - border-radius: 4px; - position: absolute; - width: 100%; - height: 100%; - z-index: 5; - opacity: 0.6; - top: 0; - left: 0; - cursor: not-allowed; -} - -.ui-select-choices { - width: 100%; - height: auto; - max-height: 200px; - overflow-x: hidden; - margin-top: 0; -} - -.ui-select-multiple .ui-select-choices { - margin-top: 1px; -} - -.ui-select-multiple { - height: auto; - padding: 3px 3px 0 3px; -} - -.ui-select-multiple input.ui-select-search { - background-color: transparent !important; /* To prevent double background when disabled */ - border: none; - outline: none; - height: 1.9em; - margin-bottom: 3px; - - /* hardcoded, should use variable from bootstrap, but must be adjusted because... reasons */ - padding: 0.375rem 0.55rem; -} - -.ui-select-multiple .ui-select-match-item { - outline: 0; - margin: 0 3px 3px 0; -} -`; - -let optionsTemplate = ` - - - + .ui-select-toggle { + position: relative; + } + + /* Fix Bootstrap dropdown position when inside a input-group */ + .input-group > .dropdown { + /* Instead of relative */ + position: static; + } + + .ui-select-match > .btn { + /* Instead of center because of .btn */ + text-align: left !important; + } + + .ui-select-match > .caret { + position: absolute; + top: 45%; + right: 15px; + } + + .ui-disabled { + background-color: #eceeef; + border-radius: 4px; + position: absolute; + width: 100%; + height: 100%; + z-index: 5; + opacity: 0.6; + top: 0; + left: 0; + cursor: not-allowed; + } + + .ui-select-choices { + width: 100%; + height: auto; + max-height: 200px; + overflow-x: hidden; + margin-top: 0; + } + + .ui-select-multiple .ui-select-choices { + margin-top: 1px; + } + .ui-select-choices-row>a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: 400; + line-height: 1.42857143; + color: #333; + white-space: nowrap; + } + .ui-select-choices-row.active>a { + color: #fff; + text-decoration: none; + outline: 0; + background-color: #428bca; + } + + .ui-select-multiple { + height: auto; + padding:3px 3px 0 3px; + } + + .ui-select-multiple input.ui-select-search { + background-color: transparent !important; /* To prevent double background when disabled */ + border: none; + outline: none; + box-shadow: none; + height: 1.6666em; + padding: 0; + margin-bottom: 3px; + + } + .ui-select-match .close { + font-size: 1.6em; + line-height: 0.75; + } + + .ui-select-multiple .ui-select-match-item { + outline: 0; + margin: 0 3px 3px 0; + } + .ui-select-toggle > .caret { + position: absolute; + height: 10px; + top: 50%; + right: 10px; + margin-top: -2px; + } `; @Component({ selector: 'ng-select', - directives: [OffClickDirective], - pipes: [HighlightPipe], styles: [styles], template: `
      {{placeholder}} + [innerHTML]="sanitize(active[0].text)"> - - × + +
      @@ -149,7 +134,39 @@ let optionsTemplate = ` class="form-control ui-select-search" *ngIf="inputMode" placeholder="{{active.length <= 0 ? placeholder : ''}}"> - ${optionsTemplate} + + + +
      - × {{a.text}} @@ -183,7 +200,39 @@ let optionsTemplate = ` class="form-control ui-select-search" placeholder="{{active.length <= 0 ? placeholder : ''}}" role="combobox"> - ${optionsTemplate} + + + +
      ` }) @@ -200,11 +249,13 @@ export class SelectComponent implements OnInit { this._items = this.itemObjects = []; } else { this._items = value.filter((item:any) => { - if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { + // if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { + if ((typeof item === 'string') || (typeof item === 'object' && item.text)) { return item; } }); - this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + // this.itemObjects = this._items.map((item:any) => (typeof item === 'string' ? new SelectItem(item) : new SelectItem({id: item[this.idField], text: item[this.textField]}))); + this.itemObjects = this._items.map((item:any) => new SelectItem(item)); } } @@ -215,7 +266,8 @@ export class SelectComponent implements OnInit { this.hideOptions(); } } - public get disabled(): boolean { + + public get disabled():boolean { return this._disabled; } @@ -229,7 +281,7 @@ export class SelectComponent implements OnInit { this._active = selectedItems.map((item:any) => { let data = areItemsStrings ? item - : { id: item[this.idField], text: item[this.textField] }; + : {id: item[this.idField], text: item[this.textField]}; return new SelectItem(data); }); @@ -258,11 +310,15 @@ export class SelectComponent implements OnInit { private _disabled:boolean = false; private _active:Array = []; - public constructor(element:ElementRef) { + public constructor(element:ElementRef, private sanitizer:DomSanitizer) { this.element = element; this.clickedOutside = this.clickedOutside.bind(this); } + public sanitize(html:string):SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } + public inputEvent(e:any, isUpMode:boolean = false):void { // tab if (e.keyCode === 9) { @@ -367,7 +423,7 @@ export class SelectComponent implements OnInit { } } - public clickedOutside():void { + public clickedOutside():void { this.inputMode = false; this.optionsOpened = false; } @@ -437,9 +493,8 @@ export class SelectComponent implements OnInit { 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))); + .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(); @@ -486,7 +541,8 @@ export class SelectComponent implements OnInit { export class Behavior { public optionsMap:Map = new Map(); - public actor: SelectComponent; + public actor:SelectComponent; + public constructor(actor:SelectComponent) { this.actor = actor; } @@ -569,7 +625,7 @@ export class GenericBehavior extends Behavior implements OptionsBehavior { .filter((option:SelectItem) => { return stripTags(option.text).match(query) && (this.actor.multiple === false || - (this.actor.multiple === true && this.actor.active.map((item: SelectItem) => item.id).indexOf(option.id) < 0)); + (this.actor.multiple === true && this.actor.active.map((item:SelectItem) => item.id).indexOf(option.id) < 0)); }); this.actor.options = options; if (this.actor.options.length > 0) { diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index cf3febfd..4b648301 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -1,12 +1,4 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES } from '@angular/common'; - -import { TAB_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SingleDemoComponent } from './select/single-demo'; -import { MultipleDemoComponent } from './select/multiple-demo'; -import { ChildrenDemoComponent } from './select/children-demo'; -import { RichDemoComponent } from './select/rich-demo'; let name = 'Select'; // webpack html imports @@ -36,7 +28,7 @@ let tabDesc:Array = [ ]; let tabsContent:string = ``; -tabDesc.forEach((desc:any) => { +tabDesc.forEach((desc:any, index:number) => { tabsContent += `
      <${desc.heading.toLowerCase()}-demo> @@ -56,7 +48,7 @@ tabDesc.forEach((desc:any) => { 
      -              ${desc.ts}
+
      @@ -70,25 +62,26 @@ tabDesc.forEach((desc:any) => { @Component({ selector: 'select-section', template: ` -
      -
      - - - ${tabsContent} - - -
      - -
      -

      API

      -
      ${doc}
      -
      -
      - `, - directives: [SingleDemoComponent, MultipleDemoComponent, ChildrenDemoComponent, RichDemoComponent, TAB_DIRECTIVES, CORE_DIRECTIVES] +
      +
      + + + ${tabsContent} + + +
      + +
      +

      API

      +
      +
      +
      + ` }) export class SelectSectionComponent { public currentHeading:string = 'Single'; + public tabDesc:any[] = tabDesc; + public doc:string = doc; public select_zzz(e:any):void { if (e.heading) { diff --git a/demo/components/select/children-demo.ts b/demo/components/select/children-demo.ts index f57e05c8..ede43db7 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/components/select/children-demo.ts @@ -1,16 +1,11 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./children-demo.html'); @Component({ selector: 'children-demo', - template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] + template }) export class ChildrenDemoComponent { public items:Array = [ diff --git a/demo/components/select/multiple-demo.html b/demo/components/select/multiple-demo.html index 84a08a72..f1b51464 100644 --- a/demo/components/select/multiple-demo.html +++ b/demo/components/select/multiple-demo.html @@ -1,6 +1,6 @@

      Select multiple cities

      - = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', @@ -51,7 +46,7 @@ export class MultipleDemoComponent { public itemsToString(value:Array = []):string { return value .map((item:any) => { - return item.text; - }).join(','); + return item.text; + }).join(','); } } diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index adb09adc..ad91f9c2 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -1,50 +1,46 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; const COLORS = [ - { 'name': 'Blue 10', 'hex': '#C0E6FF' }, - { 'name': 'Blue 20', 'hex': '#7CC7FF' }, - { 'name': 'Blue 30', 'hex': '#5AAAFA' }, - { 'name': 'Blue 40', 'hex': '#5596E6' }, - { 'name': 'Blue 50', 'hex': '#4178BE' }, - { 'name': 'Blue 60', 'hex': '#325C80' }, - { 'name': 'Blue 70', 'hex': '#264A60' }, - { 'name': 'Blue 80', 'hex': '#1D3649' }, - { 'name': 'Blue 90', 'hex': '#152935' }, - { 'name': 'Blue 100', 'hex': '#010205' }, - { 'name': 'Green 10', 'hex': '#C8F08F' }, - { 'name': 'Green 20', 'hex': '#B4E051' }, - { 'name': 'Green 30', 'hex': '#8CD211' }, - { 'name': 'Green 40', 'hex': '#5AA700' }, - { 'name': 'Green 50', 'hex': '#4B8400' }, - { 'name': 'Green 60', 'hex': '#2D660A' }, - { 'name': 'Green 70', 'hex': '#144D14' }, - { 'name': 'Green 80', 'hex': '#0A3C02' }, - { 'name': 'Green 90', 'hex': '#0C2808' }, - { 'name': 'Green 100', 'hex': '#010200' }, - { 'name': 'Red 10', 'hex': '#FFD2DD' }, - { 'name': 'Red 20', 'hex': '#FFA5B4' }, - { 'name': 'Red 30', 'hex': '#FF7D87' }, - { 'name': 'Red 40', 'hex': '#FF5050' }, - { 'name': 'Red 50', 'hex': '#E71D32' }, - { 'name': 'Red 60', 'hex': '#AD1625' }, - { 'name': 'Red 70', 'hex': '#8C101C' }, - { 'name': 'Red 80', 'hex': '#6E0A1E' }, - { 'name': 'Red 90', 'hex': '#4C0A17' }, - { 'name': 'Red 100', 'hex': '#040001' }, - { 'name': 'Yellow 10', 'hex': '#FDE876' }, - { 'name': 'Yellow 20', 'hex': '#FDD600' }, - { 'name': 'Yellow 30', 'hex': '#EFC100' }, - { 'name': 'Yellow 40', 'hex': '#BE9B00' }, - { 'name': 'Yellow 50', 'hex': '#8C7300' }, - { 'name': 'Yellow 60', 'hex': '#735F00' }, - { 'name': 'Yellow 70', 'hex': '#574A00' }, - { 'name': 'Yellow 80', 'hex': '#3C3200' }, - { 'name': 'Yellow 90', 'hex': '#281E00' }, - { 'name': 'Yellow 100', 'hex': '#020100' } + {'name': 'Blue 10', 'hex': '#C0E6FF'}, + {'name': 'Blue 20', 'hex': '#7CC7FF'}, + {'name': 'Blue 30', 'hex': '#5AAAFA'}, + {'name': 'Blue 40', 'hex': '#5596E6'}, + {'name': 'Blue 50', 'hex': '#4178BE'}, + {'name': 'Blue 60', 'hex': '#325C80'}, + {'name': 'Blue 70', 'hex': '#264A60'}, + {'name': 'Blue 80', 'hex': '#1D3649'}, + {'name': 'Blue 90', 'hex': '#152935'}, + {'name': 'Blue 100', 'hex': '#010205'}, + {'name': 'Green 10', 'hex': '#C8F08F'}, + {'name': 'Green 20', 'hex': '#B4E051'}, + {'name': 'Green 30', 'hex': '#8CD211'}, + {'name': 'Green 40', 'hex': '#5AA700'}, + {'name': 'Green 50', 'hex': '#4B8400'}, + {'name': 'Green 60', 'hex': '#2D660A'}, + {'name': 'Green 70', 'hex': '#144D14'}, + {'name': 'Green 80', 'hex': '#0A3C02'}, + {'name': 'Green 90', 'hex': '#0C2808'}, + {'name': 'Green 100', 'hex': '#010200'}, + {'name': 'Red 10', 'hex': '#FFD2DD'}, + {'name': 'Red 20', 'hex': '#FFA5B4'}, + {'name': 'Red 30', 'hex': '#FF7D87'}, + {'name': 'Red 40', 'hex': '#FF5050'}, + {'name': 'Red 50', 'hex': '#E71D32'}, + {'name': 'Red 60', 'hex': '#AD1625'}, + {'name': 'Red 70', 'hex': '#8C101C'}, + {'name': 'Red 80', 'hex': '#6E0A1E'}, + {'name': 'Red 90', 'hex': '#4C0A17'}, + {'name': 'Red 100', 'hex': '#040001'}, + {'name': 'Yellow 10', 'hex': '#FDE876'}, + {'name': 'Yellow 20', 'hex': '#FDD600'}, + {'name': 'Yellow 30', 'hex': '#EFC100'}, + {'name': 'Yellow 40', 'hex': '#BE9B00'}, + {'name': 'Yellow 50', 'hex': '#8C7300'}, + {'name': 'Yellow 60', 'hex': '#735F00'}, + {'name': 'Yellow 70', 'hex': '#574A00'}, + {'name': 'Yellow 80', 'hex': '#3C3200'}, + {'name': 'Yellow 90', 'hex': '#281E00'}, + {'name': 'Yellow 100', 'hex': '#020100'} ]; // webpack html imports @@ -54,7 +50,6 @@ let template = require('./rich-demo.html'); selector: 'rich-demo', template: template, styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`], - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ], encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles }) export class RichDemoComponent implements OnInit { @@ -64,9 +59,9 @@ export class RichDemoComponent implements OnInit { private items:Array = []; public ngOnInit():any { - COLORS.forEach((color: {name:string, hex:string}) => { - this.items.push( { - id : color.hex, + COLORS.forEach((color:{name:string, hex:string}) => { + this.items.push({ + id: color.hex, text: `${color.name} (${color.hex})` }); }); @@ -97,4 +92,3 @@ export class RichDemoComponent implements OnInit { this.value = value; } } - diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index 756310e0..b3f5320b 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -1,16 +1,11 @@ import { Component } from '@angular/core'; -import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass } from '@angular/common'; -import { BUTTON_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap'; - -import { SELECT_DIRECTIVES } from '../../../ng2-select'; // webpack html imports let template = require('./single-demo.html'); @Component({ selector: 'single-demo', - template: template, - directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, BUTTON_DIRECTIVES ] + template }) export class SingleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/custom-typings.d.ts b/demo/custom-typings.d.ts new file mode 100644 index 00000000..8b7203f2 --- /dev/null +++ b/demo/custom-typings.d.ts @@ -0,0 +1 @@ +declare const ENV:string; diff --git a/demo/demo.component.ts b/demo/demo.component.ts new file mode 100644 index 00000000..fb179131 --- /dev/null +++ b/demo/demo.component.ts @@ -0,0 +1,34 @@ +import { Component } from '@angular/core'; + +let gettingStarted = require('./getting-started.md'); + +@Component({ + selector: 'demo-app', + template: ` +
      +
      +

      ng2-select

      +

      Native Angular2 component for Select

      + View on GitHub +
      +
      +
      +
      +
      +
      + +
      +
      ${gettingStarted}
      + + +
      + + + ` +}) +export class DemoComponent { +} diff --git a/demo/demo.module.ts b/demo/demo.module.ts new file mode 100644 index 00000000..7cec11c5 --- /dev/null +++ b/demo/demo.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; +import { TabsModule, ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap'; + +import { SelectModule } from '../components/select.module'; +import { DemoComponent } from './demo.component'; +import { SelectSectionComponent } from './components/select-section'; +import { ChildrenDemoComponent } from './components/select/children-demo'; +import { MultipleDemoComponent } from './components/select/multiple-demo'; +import { RichDemoComponent } from './components/select/rich-demo'; +import { SingleDemoComponent } from './components/select/single-demo'; + +@NgModule({ + declarations: [ + DemoComponent, + SelectSectionComponent, + ChildrenDemoComponent, + MultipleDemoComponent, + RichDemoComponent, + SingleDemoComponent + ], + imports: [ + BrowserModule, + FormsModule, + SelectModule, + TabsModule, + ButtonsModule, + CommonModule + ], + bootstrap: [DemoComponent] +}) + +export class SelectDemoModule { +} diff --git a/demo/index.html b/demo/index.html index 3c077e81..2223d9a2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -34,6 +34,5 @@ Loading... - diff --git a/demo/index.ts b/demo/index.ts index 77772a05..e270523b 100644 --- a/demo/index.ts +++ b/demo/index.ts @@ -1,44 +1,4 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; -import { Component } from '@angular/core'; -import { NgClass } from '@angular/common'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { SelectSectionComponent } from './components/select-section'; - -let gettingStarted = require('./getting-started.md'); - -@Component({ - selector: 'demo-app', - template: ` -
      -
      -

      ng2-select

      -

      Native Angular2 component for Select

      - View on GitHub -
      -
      -
      -
      -
      -
      - -
      -
      ${gettingStarted}
      - - -
      - - - `, - directives: [ - NgClass, - SelectSectionComponent - ] -}) -export class DemoComponent { -} - -bootstrap(DemoComponent); +import { SelectDemoModule } from './demo.module'; +platformBrowserDynamic().bootstrapModule(SelectDemoModule); diff --git a/demo/polyfills.ts b/demo/polyfills.ts new file mode 100644 index 00000000..d27ff360 --- /dev/null +++ b/demo/polyfills.ts @@ -0,0 +1,28 @@ +// Polyfills +// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here) + +// import 'ie-shim'; // Internet Explorer +// import 'es6-shim'; +// import 'es6-promise'; +// import 'es7-reflect-metadata'; + +// Prefer CoreJS over the polyfills above +import 'core-js/es6'; +import 'core-js/es7/reflect'; +require('zone.js/dist/zone'); +require('reflect-metadata'); + +// Typescript emit helpers polyfill +import 'ts-helpers'; + +if ('production' === ENV) { + // Production + +} else { + // Development + + (Error as any).stackTraceLimit = Infinity; + + require('zone.js/dist/long-stack-trace-zone'); + +} diff --git a/demo/vendor.ts b/demo/vendor.ts new file mode 100644 index 00000000..c06cab38 --- /dev/null +++ b/demo/vendor.ts @@ -0,0 +1,23 @@ +// For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on +// chunking vendors files for async loading. You would need to import the async loaded vendors +// at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to +// run `typings install x` where `x` is your module + +// Angular 2 +import '@angular/common'; +import '@angular/core'; +import '@angular/forms'; +import '@angular/platform-browser'; +import '@angular/platform-browser-dynamic'; + +// RxJS +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/mergeMap'; + +if ('production' === ENV) { + // Production + +} else { + // Development + +} diff --git a/gulp-tasks/lint.js b/gulp-tasks/lint.js index 62c7806a..1132abdf 100644 --- a/gulp-tasks/lint.js +++ b/gulp-tasks/lint.js @@ -9,12 +9,13 @@ gitignore.push('**/*.ts'); gulp.task('tslint', () => gulp .src(gitignore) - .pipe(tslint()) - .pipe(tslint.report('prose', { + .pipe(tslint({ + formatter: 'verbose', emitError: true, summarizeFailureOutput: true, reportLimit: 50 })) + .pipe(tslint.report()) ); gulp.task('lint', ['tslint']); diff --git a/karma.conf.js b/karma.conf.js index 31fec667..6c64f09d 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -1,101 +1,5 @@ 'use strict'; -const path = require('path'); -const cwd = process.cwd(); +const config = require('./.ng2-config'); -module.exports = config => { - config.set({ - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: '', - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['jasmine'], - - // list of files / patterns to load in the browser - files: [ - {pattern: 'test.bundle.js', watched: false} - ], - - // list of files to exclude - exclude: [], - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - 'test.bundle.js': ['coverage', 'webpack', 'sourcemap'] - }, - - webpack: { - resolve: { - root: [path.resolve(cwd)], - modulesDirectories: ['node_modules', 'demo', 'components', 'test', '.'], - extensions: ['', '.ts', '.js', '.css'] - }, - module: { - loaders: [ - {test: /\.ts$/, loader: 'ts-loader', exclude: [/node_modules/]} - ], - postLoaders: [ - // instrument only testing sources with Istanbul - { - test: /\.(js|ts)$/, - include: root('components'), - loader: 'istanbul-instrumenter-loader', - exclude: [ - /\.e2e\.ts$/, - /node_modules/ - ] - } - ] - }, - stats: { - colors: true, - reasons: true - }, - watch: true, - debug: true - }, - - coverageReporter: { - dir: 'coverage/', - reporters: [ - {type: 'text'}, - {type: 'json'}, - {type: 'html'} - ] - }, - webpackServer: {noInfo: true}, - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['spec', 'coverage'], - - // web server port - port: 9876, - - // enable / disable colors in the output (reporters and logs) - colors: true, - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || - // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: false, - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: ['PhantomJS'], - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: true - }); -}; - -function root(partialPath) { - return path.join(__dirname, partialPath); -} +module.exports = require('ng2-webpack-config').karma(config); diff --git a/ng2-select.ts b/ng2-select.ts index af1f3e14..e23a00b2 100644 --- a/ng2-select.ts +++ b/ng2-select.ts @@ -1,10 +1,2 @@ -import { SELECT_DIRECTIVES } from './components/select'; - export * from './components/select/select'; -export * from './components/select'; - -export default { - directives: [ - SELECT_DIRECTIVES - ] -}; +export { SelectModule } from './components/select.module'; diff --git a/package.json b/package.json index fd9392f3..17d7c12f 100644 --- a/package.json +++ b/package.json @@ -3,27 +3,27 @@ "version": "1.0.3", "description": "Angular2 based replacement for select boxes", "scripts": { - "flow.install:typings": "./node_modules/.bin/typings install", - "flow.compile": "npm run flow.install:typings && npm run flow.compile:common && npm run flow.compile:system ", - "flow.compile:common": "./node_modules/.bin/tsc", - "flow.compile:system": "./.config/bundle-system.js", - "flow.copy:src": "./node_modules/.bin/cpy ng2-select.ts \"components/*.ts\" ts --parents", - "flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-select.+(js|d.ts|js.map)\"", - "flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build", - "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore --ext js --fix . .config", - "flow.tslint": "./node_modules/.bin/gulp lint", + "flow.compile": "npm run flow.compile:common && npm run flow.compile:system", + "flow.compile:common": "ngc -p tsconfig.publish.json", + "flow.compile:system": "node ./.config/bundle-system.js", + "flow.copy:src": "cpy ng2-select.ts \"components/*.ts\" ts --parents", + "flow.clean": "del-cli bundles coverage demo-build \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-select.+(js|d.ts|js.map)\"", + "flow.deploy:gh-pages": "npm run flow.build:prod && gh-pages -d demo-build", + "flow.eslint": "eslint --ignore-path .gitignore --ext js --fix . .config", + "flow.tslint": "gulp lint", "flow.lint": "npm run flow.eslint && npm run flow.tslint", - "flow.changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -p angular -v", - "flow.github-release": "./node_modules/.bin/conventional-github-releaser -p angular", - "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color", - "flow.build:dev": "./node_modules/.bin/webpack --progress --color", - "flow.serve:dev": "./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached", - "flow.serve:prod": "NODE_ENV=production ./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached", + "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular -v", + "flow.github-release": "conventional-github-releaser -p angular", + "flow.build:prod": "cross-env NODE_ENV=production webpack --progress --color --display-error-details --display-cached", + "flow.build:dev": "webpack --progress --color", + "flow.serve:dev": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached", + "flow.serve:prod": "cross-env NODE_ENV=production webpack-dev-server --hot --inline --colors --display-error-details --display-cached", "prepublish": "npm run flow.clean && npm run flow.compile", "postpublish": "npm run flow.deploy:gh-pages", "start": "npm run flow.serve:dev", "pretest": "npm run flow.lint", - "test": "NODE_ENV=test ./node_modules/.bin/karma start", + "test": "cross-env NODE_ENV=test karma start", + "test:watch": "cross-env NODE_ENV=test karma start --auto-watch --no-single-run", "preversion": "npm test", "version": "npm run flow.changelog && git add -A", "postversion": "git push origin development && git push --tags" @@ -47,72 +47,54 @@ }, "homepage": "https://github.com/valor-software/ng2-select#readme", "peerDependencies": { - "@angular/common": "^2.0.0-rc.1", - "@angular/compiler": "^2.0.0-rc.1", - "@angular/core": "^2.0.0-rc.1" + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0" }, "dependencies": {}, "devDependencies": { - "@angular/common": "^2.0.0-rc.1", - "@angular/compiler": "^2.0.0-rc.1", - "@angular/core": "^2.0.0-rc.1", - "@angular/platform-browser": "^2.0.0-rc.1", - "@angular/platform-browser-dynamic": "^2.0.0-rc.1", - "async": "1.5.2", - "awesome-typescript-loader": "^0.19.0", - "bootstrap": "3.3.6", + "@angular/common": "2.0.0", + "@angular/compiler": "2.0.0", + "@angular/compiler-cli": "0.6.2", + "@angular/core": "2.0.0", + "@angular/forms": "2.0.0", + "@angular/platform-browser": "2.0.0", + "@angular/platform-browser-dynamic": "2.0.0", + "@types/jasmine": "2.2.34", + "@types/node": "6.0.39", + "@types/webpack": "1.12.34", + "async": "2.0.1", + "bootstrap": "3.3.7", "codecov": "1.0.1", - "compression-webpack-plugin": "0.3.1", "conventional-changelog-cli": "1.2.0", - "conventional-github-releaser": "1.1.2", - "copy-webpack-plugin": "3.0.1", + "conventional-github-releaser": "1.1.3", "cpy-cli": "1.0.1", + "cross-env": "2.0.1", "del-cli": "0.2.0", - "es6-promise": "3.2.1", + "es6-promise": "3.3.1", "es6-shim": "0.35.1", "es7-reflect-metadata": "1.6.0", - "eslint-config-valorsoft": "0.0.15", - "exports-loader": "0.6.3", - "file-loader": "0.8.5", + "eslint-config-valorsoft": "0.1.0", "gh-pages": "0.11.0", "gitignore-to-glob": "0.2.1", "gulp": "3.9.1", "gulp-size": "2.1.0", - "gulp-tslint": "5.0.0", - "html-loader": "0.4.3", - "html-webpack-plugin": "2.19.0", - "istanbul-instrumenter-loader": "0.2.0", - "jasmine": "2.4.1", - "karma": "0.13.22", - "karma-chrome-launcher": "1.0.1", - "karma-coverage": "1.0.0", - "karma-jasmine": "1.0.2", - "karma-phantomjs-launcher": "1.0.0", - "karma-sourcemap-loader": "0.3.7", - "karma-spec-reporter": "0.0.26", - "karma-webpack": "1.7.0", - "lite-server": "2.2.0", - "markdown-loader": "0.1.7", - "marked": "0.3.5", - "ng2-bootstrap": "1.0.17", - "phantomjs-polyfill": "0.0.2", - "phantomjs-prebuilt": "2.1.7", + "gulp-tslint": "6.1.1", + "lite-server": "2.2.2", + "marked": "0.3.6", + "ng2-bootstrap": "1.1.5", + "ng2-webpack-config": "0.0.5", "pre-commit": "1.1.3", - "prismjs": "1.5.0", + "prismjs": "1.5.1", "prismjs-loader": "0.0.3", - "raw-loader": "0.5.1", - "reflect-metadata": "0.1.2", + "reflect-metadata": "0.1.8", "require-dir": "0.3.0", - "rxjs": "5.0.0-beta.6", - "source-map-loader": "0.1.5", - "systemjs-builder": "0.15.19", - "ts-loader": "0.8.2", - "tslint-config-valorsoft": "1.0.4", - "typescript": "1.8.10", - "typings": "0.8.1", - "webpack": "1.13.1", - "webpack-dev-server": "1.14.1", - "zone.js": "0.6.12" + "rxjs": "5.0.0-beta.12", + "systemjs-builder": "0.15.31", + "tslint-config-valorsoft": "1.1.1", + "typescript": "2.0.2", + "zone.js": "0.6.25" }, "contributors": [ { @@ -124,6 +106,11 @@ "name": "Dmitriy Shekhovtsov", "email": "valorkin@gmail.com", "url": "https://github.com/valorkin" + }, + { + "name": "Oleksandr Telnov", + "email": "otelnov@gmail.com", + "url": "https://github.com/otelnov" } ] } diff --git a/protractor.conf.js b/protractor.conf.js new file mode 100644 index 00000000..2f1cac81 --- /dev/null +++ b/protractor.conf.js @@ -0,0 +1,5 @@ +'use strict'; + +const config = require('./.ng2-config'); + +module.exports.config = require('ng2-webpack-config').protractor(config); diff --git a/spec-bundle.js b/spec-bundle.js new file mode 100644 index 00000000..fb8a3922 --- /dev/null +++ b/spec-bundle.js @@ -0,0 +1,65 @@ +/* eslint no-var: 0, vars-on-top: 0 */ +/** + * @author: @AngularClass + */ + +/* + * When testing with webpack and ES6, we have to do some extra + * things to get testing to work right. Because we are gonna write tests + * in ES6 too, we have to compile those as well. That's handled in + * karma.conf.js with the karma-webpack plugin. This is the entry + * file for webpack test. Just like webpack will create a bundle.js + * file for our client, when we run test, it will compile and bundle them + * all here! Crazy huh. So we need to do some setup + */ +'use strict'; +Error.stackTraceLimit = Infinity; + +require('core-js'); + +// Typescript emit helpers polyfill +require('ts-helpers'); + +require('zone.js/dist/zone'); +require('zone.js/dist/long-stack-trace-zone'); +require('zone.js/dist/async-test'); +require('zone.js/dist/fake-async-test'); +require('zone.js/dist/sync-test'); +require('zone.js/dist/proxy'); +require('zone.js/dist/jasmine-patch'); + +// RxJS +require('rxjs/Rx'); + +var testing = require('@angular/core/testing'); +var browser = require('@angular/platform-browser-dynamic/testing'); + +testing.TestBed.initTestEnvironment( + browser.BrowserDynamicTestingModule, + browser.platformBrowserDynamicTesting() +); + +Object.assign(global, testing); + +/* + * Ok, this is kinda crazy. We can use the the context method on + * require that webpack created in order to tell webpack + * what files we actually want to require or import. + * Below, context will be an function/object with file names as keys. + * using that regex we are saying look in ./src/app and ./test then find + * any file that ends with spec.js and get its path. By passing in true + * we say do this recursively + */ +var testContext = require.context('./components', true, /\.spec\.ts/); + +/* + * get all the files, for each file, call the context function + * that will require the file and load it up here. Context will + * loop and require those spec files here + */ +function requireAll(requireContext) { + return requireContext.keys().map(requireContext); +} + +// requires and returns all modules that match +requireAll(testContext); diff --git a/test.bundle.js b/test.bundle.js deleted file mode 100644 index 9ade8579..00000000 --- a/test.bundle.js +++ /dev/null @@ -1,47 +0,0 @@ -'use strict'; - -/* eslint vars-on-top:0 no-var:0 */ -// @AngularClass -/* - * When testing with webpack and ES6, we have to do some extra - * things get testing to work right. Because we are gonna write test - * in ES6 to, we have to compile those as well. That's handled in - * karma.conf.js with the karma-webpack plugin. This is the entry - * file for webpack test. Just like webpack will create a bundle.js - * file for our client, when we run test, it well compile and bundle them - * all here! Crazy huh. So we need to do some setup - */ -Error.stackTraceLimit = Infinity; -require('phantomjs-polyfill'); -require('es6-promise'); -require('es6-shim'); -require('es7-reflect-metadata/dist/browser'); - -// require('zone.js'); -require('zone.js/dist/zone.js'); -require('zone.js/dist/long-stack-trace-zone.js'); -require('zone.js/dist/jasmine-patch.js'); -require('zone.js/dist/async-test.js'); - -var testing = require('@angular/core/testing'); -var browser = require('@angular/platform-browser-dynamic/testing'); - -testing.setBaseTestProviders( - browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, - browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); - -/* - Ok, this is kinda crazy. We can use the the context method on - require that webpack created in order to tell webpack - what files we actually want to require or import. - Below, context will be an function/object with file names as keys. - using that regex we are saying look in ./src/app and ./test then find - any file that ends with spec.js and get its path. By passing in true - we say do this recursively - */ -var testContext = require.context('./components', true, /\.spec\.ts/); - -// get all the files, for each file, call the context function -// that will require the file and load it up here. Context will -// loop and require those spec files here -testContext.keys().forEach(testContext); diff --git a/tsconfig.json b/tsconfig.json index 8028f548..4613fb2e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,24 +3,31 @@ "target": "es5", "module": "commonjs", "moduleResolution": "node", - "sourceMap": false, - "declaration": true, - "removeComments": false, "emitDecoratorMetadata": true, "experimentalDecorators": true, + "sourceMap": true, + "noEmitHelpers": true, "noImplicitAny": true, - "listFiles": false, - "noLib": false + "declaration": false, + "skipLibCheck": true, + "stripInternal": true, + "lib": [ + "dom", + "es6" + ], + "types": [ + "jasmine", + "node", + "webpack" + ] }, "exclude": [ - "node_modules" + "node_modules", + "bundles", + "dist" ], "files": [ - "./typings/browser.d.ts", + "./demo/custom-typings.d.ts", "./ng2-select.ts" - ], - "compileOnSave": false, - "buildOnSave": false, - "atom": { "rewriteTsconfig": false } + ] } - diff --git a/tsconfig.publish.json b/tsconfig.publish.json new file mode 100644 index 00000000..9c102d1a --- /dev/null +++ b/tsconfig.publish.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "sourceMap": false, + "noEmitHelpers": false, + "noImplicitAny": true, + "declaration": true, + "skipLibCheck": true, + "stripInternal": true, + "lib": ["dom", "es6"], + "types": [ + "jasmine", + "node", + "webpack" + ] + }, + "exclude": [ + "node_modules" + ], + "files": [ + "./demo/custom-typings.d.ts", + "./ng2-select.ts" + ], + "angularCompilerOptions": { + "genDir": "factories" + } +} diff --git a/tslint.json b/tslint.json index ea3f7760..589765ab 100644 --- a/tslint.json +++ b/tslint.json @@ -1,4 +1,8 @@ { "extends": "tslint-config-valorsoft", - "rulesDirectory": "./node_modules/codelyzer" + "rulesDirectory": "./node_modules/codelyzer", + "rules": { + "component-selector-name": [false, ""], + "only-arrow-functions": false + } } diff --git a/typings.json b/typings.json deleted file mode 100644 index 592b524e..00000000 --- a/typings.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "dependencies": { - "moment": "registry:npm/moment#2.10.5+20160211003958", - "webpack": "registry:npm/webpack#1.12.9+20160219013405" - }, - "devDependencies": {}, - "ambientDependencies": { - "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654", - "jasmine": "registry:dt/jasmine#2.2.0+20160317120654", - "require": "registry:dt/require#2.1.20+20160316155526" - } -} diff --git a/webpack.config.js b/webpack.config.js index 2d04b081..a280a0b6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,15 +1,9 @@ -/* eslint global-require: 0 */ +/* eslint no-process-env: 0, global-require:0 */ 'use strict'; -const path = require('path'); -const marked = require('marked'); -const webpack = require('webpack'); const reqPrism = require('prismjs'); -const CompressionPlugin = require('compression-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); +const marked = require('marked'); -// marked renderer hack marked.Renderer.prototype.code = function renderCode(code, lang) { const out = this.options.highlight(code, lang); const classMap = this.options.langPrefix + lang; @@ -20,159 +14,35 @@ marked.Renderer.prototype.code = function renderCode(code, lang) { return `
      ${out}\n
      \n`; }; -/*eslint no-process-env:0, camelcase:0*/ -const isProduction = (process.env.NODE_ENV || 'development') === 'production'; -const devtool = process.env.NODE_ENV === 'test' ? 'inline-source-map' : 'source-map'; -const dest = 'demo-build'; -const absDest = root(dest); - -const config = { - // isProduction ? 'source-map' : 'evale', - devtool, - debug: false, - - verbose: true, - displayErrorDetails: true, - context: __dirname, - stats: { - colors: true, - reasons: true - }, - - resolve: { - cache: false, - root: __dirname, - extensions: ['', '.ts', '.js', '.json'] - }, - - entry: { - angular2: [ - // Angular 2 Deps - 'es6-shim', - 'es6-promise', - 'zone.js', - 'reflect-metadata', - '@angular/common', - '@angular/core' - ], - 'angular2-select': ['ng2-select'], - 'angular2-select-demo': 'demo' - }, - - output: { - path: absDest, - filename: '[name].js', - sourceMapFilename: '[name].js.map', - chunkFilename: '[id].chunk.js' - }, +// Look in ./config folder for webpack.dev.js +const conf = getWebpackConfig(process.env.NODE_ENV, require('./.ng2-config')); - // our Development Server configs - devServer: { - inline: true, - colors: true, - historyApiFallback: true, - contentBase: dest, - //publicPath: dest, - outputPath: dest, - watchOptions: {aggregateTimeout: 300, poll: 1000} - }, +conf.markdownLoader = { + langPrefix: 'language-', + highlight(code, lang) { + const language = !lang || lang === 'html' ? 'markup' : lang; + const Prism = global.Prism || reqPrism; - markdownLoader: { - langPrefix: 'language-', - highlight(code, lang) { - const language = !lang || lang === 'html' ? 'markup' : lang; - const Prism = global.Prism || reqPrism; - - if (!Prism.languages[language]) { - require(`prismjs/components/prism-${language}.js`); - } - return Prism.highlight(code, Prism.languages[language]); - } - }, - module: { - loaders: [ - // support markdown - {test: /\.md$/, loader: 'html?minimize=false!markdown'}, - // Support for *.json files. - {test: /\.json$/, loader: 'json'}, - // Support for CSS as raw text - {test: /\.css$/, loader: 'raw'}, - // support for .html as raw text - {test: /\.html$/, loader: 'raw'}, - // Support for .ts files. - { - test: /\.ts$/, - loader: 'ts', - query: { - compilerOptions: { - removeComments: true, - noEmitHelpers: false - } - }, - exclude: [/\.(spec|e2e)\.ts$/] - } - ], - noParse: [ - /rtts_assert\/src\/rtts_assert/, - /reflect-metadata/, - /zone\.js\/dist\/zone-microtask/ - ] - }, - - plugins: [ - //new Clean([dest]), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.OccurenceOrderPlugin(true), - new webpack.optimize.CommonsChunkPlugin({ - name: 'angular2', - minChunks: Infinity, - filename: 'angular2.js' - }), - // static assets - new CopyWebpackPlugin([{from: 'demo/favicon.ico', to: 'favicon.ico'}]), - new CopyWebpackPlugin([{from: 'demo/assets', to: 'assets'}]), - // generating html - new HtmlWebpackPlugin({template: 'demo/index.html'}) - ], - pushPlugins() { - if (!isProduction) { - return; + if (!Prism.languages[language]) { + require(`prismjs/components/prism-${language}.js`); } - const plugins = [ - //production only - new webpack.optimize.UglifyJsPlugin({ - beautify: false, - mangle: false, - comments: false, - compress: { - screw_ie8: true - //warnings: false, - //drop_debugger: false - } - //verbose: true, - //beautify: false, - //quote_style: 3 - }), - new CompressionPlugin({ - asset: '{file}.gz', - algorithm: 'gzip', - regExp: /\.js$|\.html|\.css|.map$/, - threshold: 10240, - minRatio: 0.8 - }) - ]; - - this - .plugins - .push - .apply(plugins); + return Prism.highlight(code, Prism.languages[language]); } }; -config.pushPlugins(); - -module.exports = config; - -function root(partialPath) { - return path.join(__dirname, partialPath); +module.exports = conf; + +function getWebpackConfig(env, config) { + switch (env) { + case 'prod': + case 'production': + return require('ng2-webpack-config').webpack.prod(config); + case 'test': + case 'testing': + return require('ng2-webpack-config').webpack.test(config); + case 'dev': + case 'development': + default: + return require('ng2-webpack-config').webpack.dev(config); + } } From bbba0f55aac69b6f630328c53eff43adc5f3e932 Mon Sep 17 00:00:00 2001 From: Dmitriy Schekhovtsov Date: Wed, 21 Sep 2016 22:05:40 +0300 Subject: [PATCH 36/61] 1.1.0 --- CHANGELOG.md | 23 +++++++++++++++++++++++ package.json | 2 +- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e9a1d636..3410f7c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,26 @@ + +# [1.1.0](https://github.com/valor-software/ng2-select/compare/v1.0.3...v1.1.0) (2016-09-21) + + +### Bug Fixes + +* firefox issue ([#273](https://github.com/valor-software/ng2-select/issues/273)) ([f83764f](https://github.com/valor-software/ng2-select/commit/f83764f)) +* **docs:** updated property name for active items ([#318](https://github.com/valor-software/ng2-select/issues/318)) ([d39def2](https://github.com/valor-software/ng2-select/commit/d39def2)), closes [#307](https://github.com/valor-software/ng2-select/issues/307) +* **filter:** possible dupes in filter ([#212](https://github.com/valor-software/ng2-select/issues/212)) ([7f4e9f6](https://github.com/valor-software/ng2-select/commit/7f4e9f6)) +* **options:** fixed the disabled state ([#225](https://github.com/valor-software/ng2-select/issues/225)) ([388506f](https://github.com/valor-software/ng2-select/commit/388506f)) +* **select:** allow empty items ([2c090f3](https://github.com/valor-software/ng2-select/commit/2c090f3)) + + +### Features + +* **css:** removed most hardcoded css, instead rely on bootstrap css classes ([#214](https://github.com/valor-software/ng2-select/issues/214)) ([c178431](https://github.com/valor-software/ng2-select/commit/c178431)) +* **input:** Added selectable inputfields instead of forcing id and text. ([#213](https://github.com/valor-software/ng2-select/issues/213)) ([cf7f110](https://github.com/valor-software/ng2-select/commit/cf7f110)) +* programmatically select active items ([#223](https://github.com/valor-software/ng2-select/issues/223)) ([1ddbcd9](https://github.com/valor-software/ng2-select/commit/1ddbcd9)) +* **package:** update to angular 2.0.0 ([#412](https://github.com/valor-software/ng2-select/issues/412)) ([10aeaba](https://github.com/valor-software/ng2-select/commit/10aeaba)) +* **package:** updated to rc.4 and new forms ([#311](https://github.com/valor-software/ng2-select/issues/311)) ([5b992e9](https://github.com/valor-software/ng2-select/commit/5b992e9)) + + + ## 1.0.3 (2016-05-18) diff --git a/package.json b/package.json index 17d7c12f..29c7b849 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-select", - "version": "1.0.3", + "version": "1.1.0", "description": "Angular2 based replacement for select boxes", "scripts": { "flow.compile": "npm run flow.compile:common && npm run flow.compile:system", From 926e14d7e540af2ebd28701b38b19748f47cc3d4 Mon Sep 17 00:00:00 2001 From: Ville-Matti Riihikoski Date: Wed, 5 Oct 2016 12:19:02 +0300 Subject: [PATCH 37/61] fix(select): issue #437 (#454) * fix typing to input throwing an error and highlight on highlighting the first character * added rest of the highlight pipe usages --- components/select/select-pipes.ts | 6 ++---- components/select/select.ts | 8 ++++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 4e88697a..25f7b083 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -3,13 +3,11 @@ import { escapeRegexp } from './common'; @Pipe({name: 'highlight'}) export class HighlightPipe implements PipeTransform { - public transform(value:string, args:any[]):any { - if (args.length < 1) { + public transform(value:string, query:string):any { + if (query.length < 1) { return value; } - let query = args[0]; - if ( query ) { let tagRE = new RegExp('<[^<>]*>', 'ig'); // get ist of tags diff --git a/components/select/select.ts b/components/select/select.ts index 09928f9b..77813e2b 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -143,7 +143,7 @@ let styles = ` (mouseenter)="selectActive(o)" (click)="selectMatch(o, $event)"> -
      +
      • @@ -162,7 +162,7 @@ let styles = ` (click)="selectMatch(o, $event)" [ngClass]="{'active': isActive(o)}"> -
      +
@@ -209,7 +209,7 @@ let styles = ` (mouseenter)="selectActive(o)" (click)="selectMatch(o, $event)"> -
+
@@ -228,7 +228,7 @@ let styles = ` (click)="selectMatch(o, $event)" [ngClass]="{'active': isActive(o)}"> -
+
From ba627d085cb747ac3a5cc701dd8b5d8d90b78ed5 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Tue, 18 Oct 2016 11:37:19 +0300 Subject: [PATCH 38/61] 1.1.1 --- CHANGELOG.md | 25 +++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3410f7c0..42bf3be9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,28 @@ + +## [1.1.1](https://github.com/valor-software/ng2-select/compare/v1.0.3...v1.1.1) (2016-10-18) + + +### Bug Fixes + +* firefox issue ([#273](https://github.com/valor-software/ng2-select/issues/273)) ([f83764f](https://github.com/valor-software/ng2-select/commit/f83764f)) +* **docs:** updated property name for active items ([#318](https://github.com/valor-software/ng2-select/issues/318)) ([d39def2](https://github.com/valor-software/ng2-select/commit/d39def2)), closes [#307](https://github.com/valor-software/ng2-select/issues/307) +* **filter:** possible dupes in filter ([#212](https://github.com/valor-software/ng2-select/issues/212)) ([7f4e9f6](https://github.com/valor-software/ng2-select/commit/7f4e9f6)) +* **options:** fixed the disabled state ([#225](https://github.com/valor-software/ng2-select/issues/225)) ([388506f](https://github.com/valor-software/ng2-select/commit/388506f)) +* **README:** Update docs with correct selector ng-select ([#148](https://github.com/valor-software/ng2-select/issues/148)) ([8aee01c](https://github.com/valor-software/ng2-select/commit/8aee01c)) +* **select:** issue [#437](https://github.com/valor-software/ng2-select/issues/437) ([#454](https://github.com/valor-software/ng2-select/issues/454)) ([926e14d](https://github.com/valor-software/ng2-select/commit/926e14d)) +* **select:** allow empty items ([2c090f3](https://github.com/valor-software/ng2-select/commit/2c090f3)) + + +### Features + +* **css:** removed most hardcoded css, instead rely on bootstrap css classes ([#214](https://github.com/valor-software/ng2-select/issues/214)) ([c178431](https://github.com/valor-software/ng2-select/commit/c178431)) +* **input:** Added selectable inputfields instead of forcing id and text. ([#213](https://github.com/valor-software/ng2-select/issues/213)) ([cf7f110](https://github.com/valor-software/ng2-select/commit/cf7f110)) +* programmatically select active items ([#223](https://github.com/valor-software/ng2-select/issues/223)) ([1ddbcd9](https://github.com/valor-software/ng2-select/commit/1ddbcd9)) +* **package:** update to angular 2.0.0 ([#412](https://github.com/valor-software/ng2-select/issues/412)) ([10aeaba](https://github.com/valor-software/ng2-select/commit/10aeaba)) +* **package:** updated to rc.4 and new forms ([#311](https://github.com/valor-software/ng2-select/issues/311)) ([5b992e9](https://github.com/valor-software/ng2-select/commit/5b992e9)) + + + # [1.1.0](https://github.com/valor-software/ng2-select/compare/v1.0.3...v1.1.0) (2016-09-21) diff --git a/package.json b/package.json index 29c7b849..3b3ae3db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-select", - "version": "1.1.0", + "version": "1.1.1", "description": "Angular2 based replacement for select boxes", "scripts": { "flow.compile": "npm run flow.compile:common && npm run flow.compile:system", From 43b4c1074fb4700e20b24b35f12ba4c1619b152c Mon Sep 17 00:00:00 2001 From: Sergey Kuryatnick Date: Fri, 11 Nov 2016 14:31:26 +0200 Subject: [PATCH 39/61] fix(close): dropdown by missclick (#515) --- components/select/select.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/select/select.ts b/components/select/select.ts index 77813e2b..286dcfe3 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -173,6 +173,7 @@ let styles = ` *ngIf="multiple === true" (keyup)="mainClick($event)" (focus)="focusToInput('')" + [offClick]="clickedOutside" class="ui-select-container ui-select-multiple dropdown form-control open">
From 99a9a533ad759477952c4cc92416d1a8483fd56e Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Fri, 11 Nov 2016 14:32:32 +0200 Subject: [PATCH 40/61] 1.1.2 --- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42bf3be9..efe3658e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ + +## [1.1.2](https://github.com/valor-software/ng2-select/compare/v1.1.1...v1.1.2) (2016-11-11) + + +### Bug Fixes + +* **close:** dropdown by missclick ([#515](https://github.com/valor-software/ng2-select/issues/515)) ([43b4c10](https://github.com/valor-software/ng2-select/commit/43b4c10)) + + + ## [1.1.1](https://github.com/valor-software/ng2-select/compare/v1.0.3...v1.1.1) (2016-10-18) diff --git a/package.json b/package.json index 3b3ae3db..22d47a35 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ng2-select", - "version": "1.1.1", + "version": "1.1.2", "description": "Angular2 based replacement for select boxes", "scripts": { "flow.compile": "npm run flow.compile:common && npm run flow.compile:system", From 2c211cc9dee9829a8dce8af78c76198a0453cdbf Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 21 Dec 2016 10:35:13 +0100 Subject: [PATCH 41/61] avoid peer messages (#475) * avoid peer messages * avoid peer missing messages --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 22d47a35..8e9e6f86 100644 --- a/package.json +++ b/package.json @@ -47,18 +47,18 @@ }, "homepage": "https://github.com/valor-software/ng2-select#readme", "peerDependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", - "@angular/core": "2.0.0", - "@angular/forms": "2.0.0" + "@angular/common": "^2.0.0", + "@angular/compiler": "^2.0.0", + "@angular/core": "^2.0.0", + "@angular/forms": "^2.0.0" }, "dependencies": {}, "devDependencies": { - "@angular/common": "2.0.0", - "@angular/compiler": "2.0.0", + "@angular/common": "^2.0.0", + "@angular/compiler": "^2.0.0", "@angular/compiler-cli": "0.6.2", - "@angular/core": "2.0.0", - "@angular/forms": "2.0.0", + "@angular/core": "^2.0.0", + "@angular/forms": "^2.0.0", "@angular/platform-browser": "2.0.0", "@angular/platform-browser-dynamic": "2.0.0", "@types/jasmine": "2.2.34", From 77ddc892b6e07cdbb14218c7e37125857a2779ab Mon Sep 17 00:00:00 2001 From: Matiszak Date: Wed, 21 Dec 2016 10:37:02 +0100 Subject: [PATCH 42/61] #557: Fix rendering select component on firefox (#559) #557: Fixed visual error on firefox. In single-select mode select component had extended height due to caret symbol going into new line. Added float:left to placeholder class to fix this. --- components/select/select.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/components/select/select.ts b/components/select/select.ts index 286dcfe3..3db7c29b 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -9,6 +9,11 @@ let styles = ` .ui-select-toggle { position: relative; } + + /* Fix caret going into new line in Firefox */ + .ui-select-placeholder { + float: left; + } /* Fix Bootstrap dropdown position when inside a input-group */ .input-group > .dropdown { From f9750f46f8d43f43bfb8d4f6d64c44e44abd3881 Mon Sep 17 00:00:00 2001 From: hellivan Date: Wed, 21 Dec 2016 10:37:32 +0100 Subject: [PATCH 43/61] Added output "opened" to component (#546) Added new output "opened" that will be emitted every time the components options dropdown changes visibility --- components/select/select.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index 3db7c29b..99f23d21 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -298,6 +298,7 @@ export class SelectComponent implements OnInit { @Output() public selected:EventEmitter = new EventEmitter(); @Output() public removed:EventEmitter = new EventEmitter(); @Output() public typed:EventEmitter = new EventEmitter(); + @Output() public opened:EventEmitter = new EventEmitter(); public options:Array = []; public itemObjects:Array = []; @@ -308,8 +309,17 @@ export class SelectComponent implements OnInit { return this._active; } + private set optionsOpened(value:boolean){ + this._optionsOpened = value; + this.opened.emit(value); + } + + private get optionsOpened(): boolean{ + return this._optionsOpened; + } + private inputMode:boolean = false; - private optionsOpened:boolean = false; + private _optionsOpened:boolean = false; private behavior:OptionsBehavior; private inputValue:string = ''; private _items:Array = []; From aaadcbb70d2314b4932a2b015e66680f8e16f0e1 Mon Sep 17 00:00:00 2001 From: Javier Prieto Diaz Date: Tue, 17 Jan 2017 14:46:34 +0000 Subject: [PATCH 44/61] fix(forms): Validation compliant to ngModel (#575) * Added validation ngModel compliant * upgrade angular packages version * upgrade angular peerDependencies version --- .config/bundle-system.js | 3 ++- components/select/select.ts | 30 ++++++++++++++++++++++++++++-- package.json | 20 ++++++++++---------- 3 files changed, 40 insertions(+), 13 deletions(-) diff --git a/.config/bundle-system.js b/.config/bundle-system.js index 9c8cc53c..5ce631e1 100755 --- a/.config/bundle-system.js +++ b/.config/bundle-system.js @@ -42,6 +42,7 @@ function getSystemJsBundleConfig(cb) { typescript: path.resolve('node_modules/typescript/lib/typescript.js'), '@angular/core': path.resolve('node_modules/@angular/core/index.js'), '@angular/common': path.resolve('node_modules/@angular/common/index.js'), + '@angular/forms': path.resolve('node_modules/@angular/forms/index.js'), '@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'), '@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'), '@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'), @@ -52,7 +53,7 @@ function getSystemJsBundleConfig(cb) { } }; - config.meta = ['@angular/common','@angular/compiler','@angular/core', + config.meta = ['@angular/common', '@angular/forms', '@angular/compiler','@angular/core', '@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => { memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false}; return memo; diff --git a/components/select/select.ts b/components/select/select.ts index 99f23d21..8925bb01 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -1,4 +1,5 @@ -import { Component, Input, Output, EventEmitter, ElementRef, OnInit } from '@angular/core'; +import { Component, Input, Output, EventEmitter, ElementRef, OnInit, forwardRef } from '@angular/core'; +import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { SelectItem } from './select-item'; import { stripTags } from './select-pipes'; @@ -108,6 +109,15 @@ let styles = ` @Component({ selector: 'ng-select', styles: [styles], + providers: [ + { + provide: NG_VALUE_ACCESSOR, + /* tslint:disable */ + useExisting: forwardRef(() => SelectComponent), + /* tslint:enable */ + multi: true + } + ], template: `
` }) -export class SelectComponent implements OnInit { +export class SelectComponent implements OnInit, ControlValueAccessor { @Input() public allowClear:boolean = false; @Input() public placeholder:string = ''; @Input() public idField:string = 'id'; @@ -318,6 +328,9 @@ export class SelectComponent implements OnInit { return this._optionsOpened; } + protected onChange:any = Function.prototype; + protected onTouched:any = Function.prototype; + private inputMode:boolean = false; private _optionsOpened:boolean = false; private behavior:OptionsBehavior; @@ -437,6 +450,11 @@ export class SelectComponent implements OnInit { if ((this as any)[type] && value) { (this as any)[type].next(value); } + + this.onTouched(); + if (type === 'selected' || type === 'removed') { + this.onChange(this.active); + } } public clickedOutside():void { @@ -448,6 +466,14 @@ export class SelectComponent implements OnInit { return this.itemObjects[0] && this.itemObjects[0].hasChildren(); } + public writeValue(val:any):void { + this.active = val; + this.data.emit(this.active); + } + + public registerOnChange(fn:(_:any) => {}):void {this.onChange = fn;} + public registerOnTouched(fn:() => {}):void {this.onTouched = fn;} + protected matchClick(e:any):void { if (this._disabled === true) { return; diff --git a/package.json b/package.json index 8e9e6f86..2e5f1e2a 100644 --- a/package.json +++ b/package.json @@ -47,20 +47,20 @@ }, "homepage": "https://github.com/valor-software/ng2-select#readme", "peerDependencies": { - "@angular/common": "^2.0.0", - "@angular/compiler": "^2.0.0", - "@angular/core": "^2.0.0", - "@angular/forms": "^2.0.0" + "@angular/common": "2.1.0", + "@angular/compiler": "2.1.0", + "@angular/core": "2.1.0", + "@angular/forms": "2.1.0" }, "dependencies": {}, "devDependencies": { - "@angular/common": "^2.0.0", - "@angular/compiler": "^2.0.0", + "@angular/common": "2.1.0", + "@angular/compiler": "2.1.0", "@angular/compiler-cli": "0.6.2", - "@angular/core": "^2.0.0", - "@angular/forms": "^2.0.0", - "@angular/platform-browser": "2.0.0", - "@angular/platform-browser-dynamic": "2.0.0", + "@angular/core": "2.1.0", + "@angular/forms": "2.1.0", + "@angular/platform-browser": "2.1.0", + "@angular/platform-browser-dynamic": "2.1.0", "@types/jasmine": "2.2.34", "@types/node": "6.0.39", "@types/webpack": "1.12.34", From ad16168e4732458cd03a8a7240263c0000bc0fb6 Mon Sep 17 00:00:00 2001 From: jayHPerera Date: Wed, 18 Jan 2017 03:47:14 +1300 Subject: [PATCH 45/61] #545 fixed (#567) --- components/select/select.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/select/select.ts b/components/select/select.ts index 8925bb01..9c4efaf1 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -421,6 +421,8 @@ export class SelectComponent implements OnInit, ControlValueAccessor { this.inputValue = target.value; this.behavior.filter(new RegExp(escapeRegexp(this.inputValue), 'ig')); this.doEvent('typed', this.inputValue); + }else { + this.open(); } } From 7330f4742cbf1091431d6d2092c9dda0c2c21c12 Mon Sep 17 00:00:00 2001 From: Dmytro Zaverukha Date: Tue, 17 Jan 2017 16:48:29 +0200 Subject: [PATCH 46/61] fix: add checking for not udefined document object (#541) * Add checking for not udefined document object * fix braces --- components/select/off-click.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/select/off-click.ts b/components/select/off-click.ts index a3372bb9..2368c06c 100644 --- a/components/select/off-click.ts +++ b/components/select/off-click.ts @@ -13,10 +13,10 @@ export class OffClickDirective implements OnInit, OnDestroy { } public ngOnInit(): any { - setTimeout(() => {document.addEventListener('click', this.offClickHandler);}, 0); + setTimeout(() => { if(typeof document !== 'undefined') { document.addEventListener('click', this.offClickHandler); } }, 0); } public ngOnDestroy(): any { - document.removeEventListener('click', this.offClickHandler); + if(typeof document !== 'undefined') { document.removeEventListener('click', this.offClickHandler); } } } From 7cbeb462f5205e083028de7edad19bdebc08653c Mon Sep 17 00:00:00 2001 From: Sergey Kuryatnick Date: Tue, 17 Jan 2017 16:50:18 +0200 Subject: [PATCH 47/61] fix(demo): Removed duplicated attribute (data)="value" from multiple-demo.html (#516) * fix.close dropdown by missclick * fix. remove duplicated attribute --- demo/components/select/multiple-demo.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demo/components/select/multiple-demo.html b/demo/components/select/multiple-demo.html index f1b51464..239073da 100644 --- a/demo/components/select/multiple-demo.html +++ b/demo/components/select/multiple-demo.html @@ -1,7 +1,6 @@

Select multiple cities

- Date: Tue, 17 Jan 2017 15:52:44 +0100 Subject: [PATCH 48/61] Parse HTML in multiple select views (#490) "One image is worth a thousand words": http://imgur.com/a/CY0ol --- components/select/select.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index 9c4efaf1..9ec876cd 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -200,7 +200,7 @@ let styles = ` × - {{a.text}} + From de2f4951e76c824cfd29eeb28022b73e2a3e6ef5 Mon Sep 17 00:00:00 2001 From: Libor Zoubek Date: Tue, 17 Jan 2017 15:54:53 +0100 Subject: [PATCH 49/61] (fix) remove handle click behaviour on single mode (#457) Pass correct active item when remove handle is clicked in single mode. Prevent dropdown popup when clicking on remove handle. --- components/select/select.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index 9ec876cd..e54e6996 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -137,7 +137,7 @@ let styles = ` [innerHTML]="sanitize(active[0].text)"> - + @@ -199,7 +199,7 @@ let styles = ` [ngClass]="{'btn-default': true}"> × + (click)="removeClick(a, $event)">× @@ -525,6 +525,11 @@ export class SelectComponent implements OnInit, ControlValueAccessor { return this.activeOption.text === value.text; } + protected removeClick(value: SelectItem, event: any): void { + event.stopPropagation(); + this.remove(value); + } + private focusToInput(value:string = ''):void { setTimeout(() => { let el = this.element.nativeElement.querySelector('div.ui-select-container > input'); From 95397f645f5d5842a057c214818f834b6cf46b91 Mon Sep 17 00:00:00 2001 From: linusbrolin Date: Tue, 17 Jan 2017 15:59:52 +0100 Subject: [PATCH 50/61] Fixed bug where custom id/textfields were ignored (#374) --- components/select/select.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index e54e6996..5d6921a2 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -265,8 +265,7 @@ export class SelectComponent implements OnInit, ControlValueAccessor { this._items = this.itemObjects = []; } else { this._items = value.filter((item:any) => { - // if ((typeof item === 'string' && item) || (typeof item === 'object' && item && item.text && item.id)) { - if ((typeof item === 'string') || (typeof item === 'object' && item.text)) { + if ((typeof item === 'string') || (typeof item === 'object' && item && item[this.textField] && item[this.idField])) { return item; } }); From 5c3a4e186572c379aa5a94c0046ea73e2845f47a Mon Sep 17 00:00:00 2001 From: Mateusz Kocz Date: Tue, 17 Jan 2017 16:00:49 +0100 Subject: [PATCH 51/61] fix(select): compare the ID of a SelectItem instead of its text (#358) --- components/select/select.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index 5d6921a2..55c36050 100755 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -521,7 +521,7 @@ export class SelectComponent implements OnInit, ControlValueAccessor { } protected isActive(value:SelectItem):boolean { - return this.activeOption.text === value.text; + return this.activeOption.id === value.id; } protected removeClick(value: SelectItem, event: any): void { From 71536bc43b2e1a70508229276e5d4c533bdae7a1 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Wed, 18 Jan 2017 12:46:37 +0200 Subject: [PATCH 52/61] feat(select): update to ng v2.3+ (#590) --- .config/bundle-system.js | 108 - .eslintrc.json | 6 - .gitignore | 54 +- .ng2-config.js | 29 - .npmignore | 25 - .travis.yml | 14 +- angular-cli.json | 57 + demo/.gitignore | 2 + demo/assets/css/prism-okaidia.css | 119 - demo/bs-config.json | 4 + demo/components/select-section.ts | 91 - demo/custom-typings.d.ts | 1 - demo/index.ts | 4 - demo/polyfills.ts | 28 - .../app/app.component.ts} | 15 +- .../{demo.module.ts => src/app/app.module.ts} | 18 +- .../components/sample-section.component.html | 18 + .../components/sample-section.component.ts | 9 + demo/src/app/components/select-section.ts | 63 + .../app}/components/select/children-demo.html | 0 .../app}/components/select/children-demo.ts | 5 +- .../app}/components/select/multiple-demo.html | 0 .../app}/components/select/multiple-demo.ts | 5 +- .../app}/components/select/rich-demo.html | 0 .../app}/components/select/rich-demo.ts | 5 +- .../app}/components/select/single-demo.html | 0 .../app}/components/select/single-demo.ts | 5 +- demo/src/app/index.ts | 2 + demo/{ => src}/assets/css/glyphicons.css | 0 demo/{ => src}/assets/css/ng2-select.css | 0 demo/src/assets/css/prettify-angulario.css | 217 + demo/{ => src}/assets/css/style.css | 0 .../fonts/glyphicons-halflings-regular.eot | Bin .../fonts/glyphicons-halflings-regular.svg | 0 .../fonts/glyphicons-halflings-regular.ttf | Bin .../fonts/glyphicons-halflings-regular.woff | Bin .../fonts/glyphicons-halflings-regular.woff2 | Bin demo/src/assets/js/prettify.min.js | 36 + .../select/readme.md => demo/src/doc.md | 2 +- demo/src/environments/environment.prod.ts | 3 + demo/src/environments/environment.ts | 8 + demo/src/favicon.ico | Bin 0 -> 5430 bytes demo/{ => src}/getting-started.md | 0 demo/{ => src}/index.html | 6 +- demo/src/main.ts | 12 + demo/src/polyfills.ts | 21 + demo/src/tsconfig.json | 22 + demo/src/typings.d.ts | 16 + demo/vendor.ts | 23 - gulpfile.js | 9 - karma.conf.js | 86 +- ng2-select.ts | 2 - package.json | 146 +- protractor.conf.js | 5 - scripts/.gitignore | 1 + scripts/matchers.ts | 21 + scripts/sauce-browsers.js | 18 + scripts/test.ts | 37 + scripts/typings.d.ts | 17 + spec-bundle.js | 65 - src/index.ts | 7 + src/ng2-select.ts | 1 + src/package.json | 8 + {components => src}/select/common.ts | 0 {components => src}/select/off-click.ts | 0 .../select/select-interfaces.ts | 0 {components => src}/select/select-item.ts | 0 {components => src}/select/select-pipes.ts | 0 {components => src/select}/select.module.ts | 6 +- {components => src}/select/select.ts | 0 .../select => src/spec}/select-pipes.spec.ts | 2 +- tsconfig.publish.json => src/tsconfig.json | 14 +- tsconfig.json | 33 - tslint.json | 8 +- webpack.config.js | 48 - yarn.lock | 7807 +++++++++++++++++ 76 files changed, 8658 insertions(+), 736 deletions(-) delete mode 100755 .config/bundle-system.js delete mode 100644 .eslintrc.json delete mode 100644 .ng2-config.js delete mode 100644 .npmignore create mode 100644 angular-cli.json create mode 100644 demo/.gitignore delete mode 100644 demo/assets/css/prism-okaidia.css create mode 100644 demo/bs-config.json delete mode 100644 demo/components/select-section.ts delete mode 100644 demo/custom-typings.d.ts delete mode 100644 demo/index.ts delete mode 100644 demo/polyfills.ts rename demo/{demo.component.ts => src/app/app.component.ts} (74%) rename demo/{demo.module.ts => src/app/app.module.ts} (67%) create mode 100644 demo/src/app/components/sample-section.component.html create mode 100644 demo/src/app/components/sample-section.component.ts create mode 100644 demo/src/app/components/select-section.ts rename demo/{ => src/app}/components/select/children-demo.html (100%) rename demo/{ => src/app}/components/select/children-demo.ts (98%) rename demo/{ => src/app}/components/select/multiple-demo.html (100%) rename demo/{ => src/app}/components/select/multiple-demo.ts (94%) rename demo/{ => src/app}/components/select/rich-demo.html (100%) rename demo/{ => src/app}/components/select/rich-demo.ts (97%) rename demo/{ => src/app}/components/select/single-demo.html (100%) rename demo/{ => src/app}/components/select/single-demo.ts (94%) create mode 100644 demo/src/app/index.ts rename demo/{ => src}/assets/css/glyphicons.css (100%) rename demo/{ => src}/assets/css/ng2-select.css (100%) create mode 100644 demo/src/assets/css/prettify-angulario.css rename demo/{ => src}/assets/css/style.css (100%) rename demo/{ => src}/assets/fonts/glyphicons-halflings-regular.eot (100%) rename demo/{ => src}/assets/fonts/glyphicons-halflings-regular.svg (100%) rename demo/{ => src}/assets/fonts/glyphicons-halflings-regular.ttf (100%) rename demo/{ => src}/assets/fonts/glyphicons-halflings-regular.woff (100%) rename demo/{ => src}/assets/fonts/glyphicons-halflings-regular.woff2 (100%) create mode 100644 demo/src/assets/js/prettify.min.js rename components/select/readme.md => demo/src/doc.md (97%) create mode 100644 demo/src/environments/environment.prod.ts create mode 100644 demo/src/environments/environment.ts create mode 100644 demo/src/favicon.ico rename demo/{ => src}/getting-started.md (100%) rename demo/{ => src}/index.html (82%) create mode 100644 demo/src/main.ts create mode 100644 demo/src/polyfills.ts create mode 100644 demo/src/tsconfig.json create mode 100644 demo/src/typings.d.ts delete mode 100644 demo/vendor.ts delete mode 100644 gulpfile.js delete mode 100644 ng2-select.ts delete mode 100644 protractor.conf.js create mode 100644 scripts/.gitignore create mode 100644 scripts/matchers.ts create mode 100644 scripts/sauce-browsers.js create mode 100644 scripts/test.ts create mode 100644 scripts/typings.d.ts delete mode 100644 spec-bundle.js create mode 100644 src/index.ts create mode 100644 src/ng2-select.ts create mode 100644 src/package.json rename {components => src}/select/common.ts (100%) rename {components => src}/select/off-click.ts (100%) rename {components => src}/select/select-interfaces.ts (100%) rename {components => src}/select/select-item.ts (100%) rename {components => src}/select/select-pipes.ts (100%) rename {components => src/select}/select.module.ts (64%) rename {components => src}/select/select.ts (100%) rename {components/select => src/spec}/select-pipes.spec.ts (94%) rename tsconfig.publish.json => src/tsconfig.json (67%) delete mode 100644 tsconfig.json delete mode 100644 webpack.config.js create mode 100644 yarn.lock diff --git a/.config/bundle-system.js b/.config/bundle-system.js deleted file mode 100755 index 5ce631e1..00000000 --- a/.config/bundle-system.js +++ /dev/null @@ -1,108 +0,0 @@ -#!/usr/bin/env node -'use strict'; - -/*eslint no-console: 0, no-sync: 0*/ - -// System.js bundler -// simple and yet reusable system.js bundler -// bundles, minifies and gzips - -const fs = require('fs'); -const del = require('del'); -const path = require('path'); -const zlib = require('zlib'); -const async = require('async'); -const Builder = require('systemjs-builder'); - -const pkg = require('../package.json'); -const name = pkg.name; -const targetFolder = path.resolve('./bundles'); - -async.waterfall([ - cleanBundlesFolder, - getSystemJsBundleConfig, - buildSystemJs({minify: false, sourceMaps: true, mangle: false}), - getSystemJsBundleConfig, - buildSystemJs({minify: true, sourceMaps: true, mangle: false}), - gzipSystemJsBundle -], err => { - if (err) { - throw err; - } -}); - -function getSystemJsBundleConfig(cb) { - const config = { - baseURL: '..', - transpiler: 'typescript', - typescriptOptions: { - module: 'cjs' - }, - map: { - typescript: path.resolve('node_modules/typescript/lib/typescript.js'), - '@angular/core': path.resolve('node_modules/@angular/core/index.js'), - '@angular/common': path.resolve('node_modules/@angular/common/index.js'), - '@angular/forms': path.resolve('node_modules/@angular/forms/index.js'), - '@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'), - '@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'), - '@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'), - rxjs: path.resolve('node_modules/rxjs') - }, - paths: { - '*': '*.js' - } - }; - - config.meta = ['@angular/common', '@angular/forms', '@angular/compiler','@angular/core', - '@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => { - memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false}; - return memo; - }, {}); - config.meta.moment = {build: false}; - return cb(null, config); -} - -function cleanBundlesFolder(cb) { - return del(targetFolder) - .then(paths => { - console.log('Deleted files and folders:\n', paths.join('\n')); - cb(); - }); -} - -function buildSystemJs(options) { - return (config, cb) => { - const minPostFix = options && options.minify ? '.min' : ''; - const fileName = `${name}${minPostFix}.js`; - const dest = path.resolve(__dirname, targetFolder, fileName); - const builder = new Builder(); - - console.log('Bundling system.js file:', fileName, options); - builder.config(config); - return builder - .bundle([name, name].join('/'), dest, options) - .then(() => cb()) - .catch(cb); - }; -} - -function gzipSystemJsBundle(cb) { - const files = fs - .readdirSync(path.resolve(targetFolder)) - .map(file => path.resolve(targetFolder, file)) - .filter(file => fs.statSync(file).isFile()) - .filter(file => path.extname(file) !== 'gz'); - - return async.eachSeries(files, (file, gzipcb) => { - process.nextTick(() => { - console.log('Gzipping ', file); - const gzip = zlib.createGzip({level: 9}); - const inp = fs.createReadStream(file); - const out = fs.createWriteStream(`${file}.gz`); - - inp.on('end', () => gzipcb()); - inp.on('error', err => gzipcb(err)); - return inp.pipe(gzip).pipe(out); - }); - }, cb); -} diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index f8afe993..00000000 --- a/.eslintrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "./node_modules/eslint-config-valorsoft/.eslintrc.json", - "env": { - "node": true - } -} diff --git a/.gitignore b/.gitignore index e3e8cbc2..0eae0155 100644 --- a/.gitignore +++ b/.gitignore @@ -1,36 +1,38 @@ # Dependency directory # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git /node_modules +/bower_components + +# IDEs and editors +/.idea +/.vscode +.project +.classpath +*.launch +.settings/ + +# misc +/.sass-cache +/connect.lock +/coverage +/libpeerconnection.log npm-debug.log -# type script artifacts -/typings - -# WebStorm -.idea -.vscode - # ignore build and dist for now -/bundles -/demo-build /dist -/coverage -/ts - - -/demo/**/*.js -/demo/**/*.js.map -/demo/**/*.d.ts -!/demo/custom-typings.d.ts -/components/**/*.js -/components/**/*.js.map -/components/**/*.d.ts -ng2-select.js -ng2-select.js.map -ng2-select.d.ts - +/temp +/demo/dist +/demo/temp /logs -factories +#System Files +.DS_Store +Thumbs.db + -/**/*.metadata.json +/demo/e2e/*.js +/demo/e2e/*.map +src/**/*.js +src/**/*.map +scripts/**/*.js +scripts/**/*.map diff --git a/.ng2-config.js b/.ng2-config.js deleted file mode 100644 index 1229229e..00000000 --- a/.ng2-config.js +++ /dev/null @@ -1,29 +0,0 @@ -'use strict'; -var pkg = require('./package.json'); - -module.exports = { - // metadata - title: pkg.description, - baseUrl: '/', - // root folder name - src: 'demo', - dist: 'demo-build', - htmlIndexes: ['index.html'], - // karma bundle src - spec: './spec-bundle.js', - // webpack entry - entry: { - polyfills: './demo/polyfills.ts', - vendor: './demo/vendor.ts', - main: './demo/index.ts' - }, - commonChunks: { - name: ['polyfills', 'vendor'].reverse() - }, - // webpack alias - alias: {}, - copy: [ - {from: 'demo/favicon.ico', to: 'favicon.ico'}, - {from: 'demo/assets', to: 'assets'} - ] -}; diff --git a/.npmignore b/.npmignore deleted file mode 100644 index 23f40324..00000000 --- a/.npmignore +++ /dev/null @@ -1,25 +0,0 @@ -.idea -gulp-tasks -logs - -# typings -typings - -# testing -karma.conf.js -test.bundle.js -coverage - -# demo build -demo -demo-build -webpack.config.js - -#typescript sources -*.ts -*.js.map -!*.d.ts -/components/**/*.ts -!/components/**/*.d.ts - -factories diff --git a/.travis.yml b/.travis.yml index 05455269..85a38507 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,18 +2,20 @@ language: node_js node_js: - "6" -#before_install: npm i -g npm@latest +before_install: + - export CHROME_BIN=chromium-browser + - export DISPLAY=:99.0 + - sh -e /etc/init.d/xvfb start script: - - npm test + - npm run pretest + - npm run test-coverage after_success: - - ./node_modules/.bin/codecov -f coverage/coverage-final.json + - ./node_modules/.bin/codecov addons: - # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ ) - sauce_connect: true - firefox: "42.0" + firefox: "latest" apt: sources: - ubuntu-toolchain-r-test diff --git a/angular-cli.json b/angular-cli.json new file mode 100644 index 00000000..77d77115 --- /dev/null +++ b/angular-cli.json @@ -0,0 +1,57 @@ +{ + "project": { + "name": "ng2-select" + }, + "apps": [ + { + "root": "demo/src", + "outDir": "demo/dist", + "assets": [ + "assets" + ], + "index": "index.html", + "main": "main.ts", + "test": "../../scripts/test.ts", + "tsconfig": "tsconfig.json", + "prefix": "", + "mobile": false, + "styles": [ + ], + "scripts": [ + ], + "environments": { + "source": "environments/environment.ts", + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" + } + } + ], + "addons": [], + "packages": [], + "e2e": { + "protractor": { + "config": "protractor.conf.js" + } + }, + "test": { + "karma": { + "config": "karma.conf.js" + } + }, + "defaults": { + "styleExt": "css", + "prefixInterfaces": false, + "inline": { + "style": false, + "template": false + }, + "spec": { + "class": false, + "component": true, + "directive": true, + "module": false, + "pipe": true, + "service": true + } + } +} diff --git a/demo/.gitignore b/demo/.gitignore new file mode 100644 index 00000000..c4afc525 --- /dev/null +++ b/demo/.gitignore @@ -0,0 +1,2 @@ +# Created by .ignore support plugin (hsz.mobi) +src/api-doc.json diff --git a/demo/assets/css/prism-okaidia.css b/demo/assets/css/prism-okaidia.css deleted file mode 100644 index 0fac6828..00000000 --- a/demo/assets/css/prism-okaidia.css +++ /dev/null @@ -1,119 +0,0 @@ -/** - * okaidia theme for JavaScript, CSS and HTML - * Loosely based on Monokai textmate theme by http://www.monokai.nl/ - * @author ocodia - */ - -code[class*="language-"], -pre[class*="language-"] { - color: #f8f8f2; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; - border-radius: 0.3em; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { - background: #272822; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - border-radius: .3em; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #f8f8f2; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #f92672; -} - -.token.boolean, -.token.number { - color: #ae81ff; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #a6e22e; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #f8f8f2; -} - -.token.atrule, -.token.attr-value, -.token.function { - color: #e6db74; -} - -.token.keyword { - color: #66d9ef; -} - -.token.regex, -.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/demo/bs-config.json b/demo/bs-config.json new file mode 100644 index 00000000..44c422ad --- /dev/null +++ b/demo/bs-config.json @@ -0,0 +1,4 @@ +{ + "port": 4200, + "server": { "baseDir": "./demo/dist" } +} diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts deleted file mode 100644 index 4b648301..00000000 --- a/demo/components/select-section.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { Component } from '@angular/core'; - -let name = 'Select'; -// webpack html imports -let doc = require('../../components/select/readme.md'); - -let tabDesc:Array = [ - { - heading: 'Single', - ts: require('!!prismjs?lang=typescript!./select/single-demo.ts'), - html: require('!!prismjs?lang=markup!./select/single-demo.html') - }, - { - heading: 'Multiple', - ts: require('!!prismjs?lang=typescript!./select/multiple-demo.ts'), - html: require('!!prismjs?lang=markup!./select/multiple-demo.html') - }, - { - heading: 'Children', - ts: require('!!prismjs?lang=typescript!./select/children-demo.ts'), - html: require('!!prismjs?lang=markup!./select/children-demo.html') - }, - { - heading: 'Rich', - ts: require('!!prismjs?lang=typescript!./select/rich-demo.ts'), - html: require('!!prismjs?lang=markup!./select/rich-demo.html') - } -]; - -let tabsContent:string = ``; -tabDesc.forEach((desc:any, index:number) => { - tabsContent += ` -
- <${desc.heading.toLowerCase()}-demo> - -
- -
-
- -
- - -
- 
${desc.html}
-
- - -
- 
-              
-
-
- - -
-
- - `; -}); - -@Component({ - selector: 'select-section', - template: ` -
-
- - - ${tabsContent} - - -
- -
-

API

-
-
-
- ` -}) -export class SelectSectionComponent { - public currentHeading:string = 'Single'; - public tabDesc:any[] = tabDesc; - public doc:string = doc; - - public select_zzz(e:any):void { - if (e.heading) { - this.currentHeading = e.heading; - } - } -} diff --git a/demo/custom-typings.d.ts b/demo/custom-typings.d.ts deleted file mode 100644 index 8b7203f2..00000000 --- a/demo/custom-typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare const ENV:string; diff --git a/demo/index.ts b/demo/index.ts deleted file mode 100644 index e270523b..00000000 --- a/demo/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { SelectDemoModule } from './demo.module'; -platformBrowserDynamic().bootstrapModule(SelectDemoModule); diff --git a/demo/polyfills.ts b/demo/polyfills.ts deleted file mode 100644 index d27ff360..00000000 --- a/demo/polyfills.ts +++ /dev/null @@ -1,28 +0,0 @@ -// Polyfills -// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here) - -// import 'ie-shim'; // Internet Explorer -// import 'es6-shim'; -// import 'es6-promise'; -// import 'es7-reflect-metadata'; - -// Prefer CoreJS over the polyfills above -import 'core-js/es6'; -import 'core-js/es7/reflect'; -require('zone.js/dist/zone'); -require('reflect-metadata'); - -// Typescript emit helpers polyfill -import 'ts-helpers'; - -if ('production' === ENV) { - // Production - -} else { - // Development - - (Error as any).stackTraceLimit = Infinity; - - require('zone.js/dist/long-stack-trace-zone'); - -} diff --git a/demo/demo.component.ts b/demo/src/app/app.component.ts similarity index 74% rename from demo/demo.component.ts rename to demo/src/app/app.component.ts index fb179131..dafe080a 100644 --- a/demo/demo.component.ts +++ b/demo/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -let gettingStarted = require('./getting-started.md'); +let gettingStarted = require('html-loader!markdown-loader!../getting-started.md'); @Component({ selector: 'demo-app', @@ -18,7 +18,7 @@ let gettingStarted = require('./getting-started.md');
-
${gettingStarted}
+
@@ -30,5 +30,14 @@ let gettingStarted = require('./getting-started.md'); ` }) -export class DemoComponent { +export class AppComponent { + public gettingStarted:string = gettingStarted; + public ngAfterContentInit(): any { + setTimeout(()=>{ + if (typeof PR !== 'undefined') { + // google code-prettify + PR.prettyPrint(); + } + }, 150); + } } diff --git a/demo/demo.module.ts b/demo/src/app/app.module.ts similarity index 67% rename from demo/demo.module.ts rename to demo/src/app/app.module.ts index 7cec11c5..cf0faed0 100644 --- a/demo/demo.module.ts +++ b/demo/src/app/app.module.ts @@ -2,19 +2,21 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; -import { TabsModule, ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap'; +import { TabsModule, ButtonsModule } from 'ng2-bootstrap'; -import { SelectModule } from '../components/select.module'; -import { DemoComponent } from './demo.component'; +import { SelectModule } from 'ng2-select'; +import { AppComponent } from './app.component'; import { SelectSectionComponent } from './components/select-section'; import { ChildrenDemoComponent } from './components/select/children-demo'; import { MultipleDemoComponent } from './components/select/multiple-demo'; import { RichDemoComponent } from './components/select/rich-demo'; import { SingleDemoComponent } from './components/select/single-demo'; +import { SampleSectionComponent } from './components/sample-section.component'; @NgModule({ declarations: [ - DemoComponent, + AppComponent, + SampleSectionComponent, SelectSectionComponent, ChildrenDemoComponent, MultipleDemoComponent, @@ -25,12 +27,12 @@ import { SingleDemoComponent } from './components/select/single-demo'; BrowserModule, FormsModule, SelectModule, - TabsModule, - ButtonsModule, + TabsModule.forRoot(), + ButtonsModule.forRoot(), CommonModule ], - bootstrap: [DemoComponent] + bootstrap: [AppComponent] }) -export class SelectDemoModule { +export class AppModule { } diff --git a/demo/src/app/components/sample-section.component.html b/demo/src/app/components/sample-section.component.html new file mode 100644 index 00000000..f2759f9e --- /dev/null +++ b/demo/src/app/components/sample-section.component.html @@ -0,0 +1,18 @@ + +
+
+
+ + +
+ 
{{desc.html}}
+
+ + +
+ 
{{desc.ts}}
+
+ + +
+
diff --git a/demo/src/app/components/sample-section.component.ts b/demo/src/app/components/sample-section.component.ts new file mode 100644 index 00000000..31768ac9 --- /dev/null +++ b/demo/src/app/components/sample-section.component.ts @@ -0,0 +1,9 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'sample-section', + templateUrl: './sample-section.component.html' +}) +export class SampleSectionComponent{ + @Input() public desc:any; +} diff --git a/demo/src/app/components/select-section.ts b/demo/src/app/components/select-section.ts new file mode 100644 index 00000000..aa4d2f1c --- /dev/null +++ b/demo/src/app/components/select-section.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; + +let doc = require('html-loader!markdown-loader!../../doc.md'); + +let tabDesc: any = { + single: { + heading: 'Single', + ts: require('!!raw-loader?lang=typescript!./select/single-demo.ts'), + html: require('!!raw-loader?lang=markup!./select/single-demo.html') + } + , + multiple: { + heading: 'Multiple', + ts: require('!!raw-loader?lang=typescript!./select/multiple-demo.ts'), + html: require('!!raw-loader?lang=markup!./select/multiple-demo.html') + } + , + children: { + heading: 'Children', + ts: require('!!raw-loader?lang=typescript!./select/children-demo.ts'), + html: require('!!raw-loader?lang=markup!./select/children-demo.html') + } + , + rich: { + heading: 'Rich', + ts: require('!!raw-loader?lang=typescript!./select/rich-demo.ts'), + html: require('!!raw-loader?lang=markup!./select/rich-demo.html') + } +}; + +@Component({ + selector: 'select-section', + template: ` +
+
+ + + + + + + + + + + + + + +
+ +
+

API

+
+
+
+ ` +}) +export class SelectSectionComponent { + public currentHeading: string = 'Single'; + public tabDesc: any = tabDesc; + public doc: string = doc; +} diff --git a/demo/components/select/children-demo.html b/demo/src/app/components/select/children-demo.html similarity index 100% rename from demo/components/select/children-demo.html rename to demo/src/app/components/select/children-demo.html diff --git a/demo/components/select/children-demo.ts b/demo/src/app/components/select/children-demo.ts similarity index 98% rename from demo/components/select/children-demo.ts rename to demo/src/app/components/select/children-demo.ts index ede43db7..deb82ff2 100644 --- a/demo/components/select/children-demo.ts +++ b/demo/src/app/components/select/children-demo.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -// webpack html imports -let template = require('./children-demo.html'); - @Component({ selector: 'children-demo', - template + templateUrl: './children-demo.html' }) export class ChildrenDemoComponent { public items:Array = [ diff --git a/demo/components/select/multiple-demo.html b/demo/src/app/components/select/multiple-demo.html similarity index 100% rename from demo/components/select/multiple-demo.html rename to demo/src/app/components/select/multiple-demo.html diff --git a/demo/components/select/multiple-demo.ts b/demo/src/app/components/select/multiple-demo.ts similarity index 94% rename from demo/components/select/multiple-demo.ts rename to demo/src/app/components/select/multiple-demo.ts index 1c37c3d0..75bb2b04 100644 --- a/demo/components/select/multiple-demo.ts +++ b/demo/src/app/components/select/multiple-demo.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -// webpack html imports -let template = require('./multiple-demo.html'); - @Component({ selector: 'multiple-demo', - template + templateUrl: './multiple-demo.html' }) export class MultipleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/components/select/rich-demo.html b/demo/src/app/components/select/rich-demo.html similarity index 100% rename from demo/components/select/rich-demo.html rename to demo/src/app/components/select/rich-demo.html diff --git a/demo/components/select/rich-demo.ts b/demo/src/app/components/select/rich-demo.ts similarity index 97% rename from demo/components/select/rich-demo.ts rename to demo/src/app/components/select/rich-demo.ts index ad91f9c2..f01ae691 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/src/app/components/select/rich-demo.ts @@ -43,12 +43,9 @@ const COLORS = [ {'name': 'Yellow 100', 'hex': '#020100'} ]; -// webpack html imports -let template = require('./rich-demo.html'); - @Component({ selector: 'rich-demo', - template: template, + templateUrl: './rich-demo.html', styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`], encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles }) diff --git a/demo/components/select/single-demo.html b/demo/src/app/components/select/single-demo.html similarity index 100% rename from demo/components/select/single-demo.html rename to demo/src/app/components/select/single-demo.html diff --git a/demo/components/select/single-demo.ts b/demo/src/app/components/select/single-demo.ts similarity index 94% rename from demo/components/select/single-demo.ts rename to demo/src/app/components/select/single-demo.ts index b3f5320b..f7200c9c 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/src/app/components/select/single-demo.ts @@ -1,11 +1,8 @@ import { Component } from '@angular/core'; -// webpack html imports -let template = require('./single-demo.html'); - @Component({ selector: 'single-demo', - template + templateUrl: './single-demo.html' }) export class SingleDemoComponent { public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', diff --git a/demo/src/app/index.ts b/demo/src/app/index.ts new file mode 100644 index 00000000..875bdb2f --- /dev/null +++ b/demo/src/app/index.ts @@ -0,0 +1,2 @@ +export * from './app.component'; +export * from './app.module'; diff --git a/demo/assets/css/glyphicons.css b/demo/src/assets/css/glyphicons.css similarity index 100% rename from demo/assets/css/glyphicons.css rename to demo/src/assets/css/glyphicons.css diff --git a/demo/assets/css/ng2-select.css b/demo/src/assets/css/ng2-select.css similarity index 100% rename from demo/assets/css/ng2-select.css rename to demo/src/assets/css/ng2-select.css diff --git a/demo/src/assets/css/prettify-angulario.css b/demo/src/assets/css/prettify-angulario.css new file mode 100644 index 00000000..77facd04 --- /dev/null +++ b/demo/src/assets/css/prettify-angulario.css @@ -0,0 +1,217 @@ +.prettyprint { + white-space: pre-wrap; + background: #F5F6F7; + font-family: Monaco,"Lucida Console",monospace; + color: #5C707A; + width: auto; + overflow: auto; + position: relative; + padding: 0; + font-size: 13px; + line-height: 24px; + margin-bottom: 24px; + border-radius: 4px; + padding: 16px 32px +} + +.prettyprint.linenums,.prettyprint[class^="linenums:"],.prettyprint[class*=" linenums:"] { + padding: 0 +} + +.prettyprint.is-showcase { + border: 4px solid #0273D4 +} + +.prettyprint code { + background: none; + font-size: 13px; + padding: 0 +} + +.prettyprint ol { + background: #F5F6F7; + padding: 16px 32px 16px 56px; + margin: 0; + overflow: auto; + font-size: 13px +} + +.prettyprint ol li,.prettyprint .tag { + color: #7a8b94; + background: none; + margin-bottom: 5px; + line-height: normal; + list-style-type: decimal; + font-size: 12px +} + +.prettyprint ol li:last-child { + margin-bottom: 0 +} + +.prettyprint ol li code { + background: none; + font-size: 13px +} + +.prettyprint .pnk,.prettyprint .blk { + border-radius: 4px; + padding: 2px 4px +} + +.prettyprint .pnk { + background: #CFD8DC; + color: #5C707A +} + +.prettyprint .blk { + background: #E0E0E0 +} + +.prettyprint .otl { + outline: 1px solid rgba(169,169,169,0.56) +} + +.prettyprint .kwd { + color: #D43669 +} + +.prettyprint .typ,.prettyprint .tag { + color: #D43669 +} + +.prettyprint .str,.prettyprint .atv { + color: #647f11 +} + +.prettyprint .atn { + /*color: #647f11*/ + color: #31708f +} + +.prettyprint .com { + color: #647f11 +} + +.prettyprint .lit { + color: #647f11 +} + +.prettyprint .pun { + color: #7a8b94 +} + +.prettyprint .pln { + color: #5C707A + /*color: #8a6d3b*/ +} + +.prettyprint .dec { + color: #647f11 +} + +@media print { + .prettyprint { + background: #F5F6F7; + border: none; + box-shadow: none + } + + .prettyprint ol { + background: #F5F6F7 + } + + .prettyprint .kwd { + color: #D43669 + } + + .prettyprint .typ,.prettyprint .tag { + color: #D43669 + } + + .prettyprint .str,.prettyprint .atv { + color: #647f11 + } + + .prettyprint .atn { + /*color: #647f11*/ + color: #31708f + } + + .prettyprint .com { + color: #647f11 + } + + .prettyprint .lit { + color: #647f11 + } + + .prettyprint .pun { + color: #7a8b94 + } + + .prettyprint .pln { + color: #5C707A + } + + .prettyprint .dec { + color: #647f11 + } +} + +h1 .prettyprint,h2 .prettyprint,h3 .prettyprint,h4 .prettyprint { + background: none; + font-family: Monaco,"Lucida Console",monospace; + color: #253238; + overflow: hidden; + position: relative; + font-size: 15px; + font-weight: 600; + line-height: 24px; + margin: 0; + border: none; + box-shadow: none; + padding: 0 +} + +h1 .prettyprint code,h2 .prettyprint code,h3 .prettyprint code,h4 .prettyprint code { + background: none; + font-size: 15px; + padding: 0 +} + +h1 .prettyprint .kwd,h2 .prettyprint .kwd,h3 .prettyprint .kwd,h4 .prettyprint .kwd { + color: #253238 +} + +h1 .prettyprint .typ,h1 .prettyprint .tag,h2 .prettyprint .typ,h2 .prettyprint .tag,h3 .prettyprint .typ,h3 .prettyprint .tag,h4 .prettyprint .typ,h4 .prettyprint .tag { + color: #B52E31 +} + +h1 .prettyprint .str,h1 .prettyprint .atv,h2 .prettyprint .str,h2 .prettyprint .atv,h3 .prettyprint .str,h3 .prettyprint .atv,h4 .prettyprint .str,h4 .prettyprint .atv { + color: #9d8d00 +} + +h1 .prettyprint .atn,h2 .prettyprint .atn,h3 .prettyprint .atn,h4 .prettyprint .atn { + color: #71a436 +} + +h1 .prettyprint .com,h2 .prettyprint .com,h3 .prettyprint .com,h4 .prettyprint .com { + color: #AFBEC5 +} + +h1 .prettyprint .lit,h2 .prettyprint .lit,h3 .prettyprint .lit,h4 .prettyprint .lit { + color: #9d8d00 +} + +h1 .prettyprint .pun,h2 .prettyprint .pun,h3 .prettyprint .pun,h4 .prettyprint .pun { + color: #000 +} + +h1 .prettyprint .pln,h2 .prettyprint .pln,h3 .prettyprint .pln,h4 .prettyprint .pln { + color: #000 +} + +h1 .prettyprint .dec,h2 .prettyprint .dec,h3 .prettyprint .dec,h4 .prettyprint .dec { + color: #8762c6 +} diff --git a/demo/assets/css/style.css b/demo/src/assets/css/style.css similarity index 100% rename from demo/assets/css/style.css rename to demo/src/assets/css/style.css diff --git a/demo/assets/fonts/glyphicons-halflings-regular.eot b/demo/src/assets/fonts/glyphicons-halflings-regular.eot similarity index 100% rename from demo/assets/fonts/glyphicons-halflings-regular.eot rename to demo/src/assets/fonts/glyphicons-halflings-regular.eot diff --git a/demo/assets/fonts/glyphicons-halflings-regular.svg b/demo/src/assets/fonts/glyphicons-halflings-regular.svg similarity index 100% rename from demo/assets/fonts/glyphicons-halflings-regular.svg rename to demo/src/assets/fonts/glyphicons-halflings-regular.svg diff --git a/demo/assets/fonts/glyphicons-halflings-regular.ttf b/demo/src/assets/fonts/glyphicons-halflings-regular.ttf similarity index 100% rename from demo/assets/fonts/glyphicons-halflings-regular.ttf rename to demo/src/assets/fonts/glyphicons-halflings-regular.ttf diff --git a/demo/assets/fonts/glyphicons-halflings-regular.woff b/demo/src/assets/fonts/glyphicons-halflings-regular.woff similarity index 100% rename from demo/assets/fonts/glyphicons-halflings-regular.woff rename to demo/src/assets/fonts/glyphicons-halflings-regular.woff diff --git a/demo/assets/fonts/glyphicons-halflings-regular.woff2 b/demo/src/assets/fonts/glyphicons-halflings-regular.woff2 similarity index 100% rename from demo/assets/fonts/glyphicons-halflings-regular.woff2 rename to demo/src/assets/fonts/glyphicons-halflings-regular.woff2 diff --git a/demo/src/assets/js/prettify.min.js b/demo/src/assets/js/prettify.min.js new file mode 100644 index 00000000..e83633dd --- /dev/null +++ b/demo/src/assets/js/prettify.min.js @@ -0,0 +1,36 @@ +!function () { var q = null; window.PR_SHOULD_USE_CONTINUATION = !0; + (function () { function S(a) { function d(e) { var b = e.charCodeAt(0); if (b !== 92) return b; var a = e.charAt(1); return (b = r[a]) ? b : '0' <= a && a <= '7' ? parseInt(e.substring(1), 8) : a === 'u' || a === 'x' ? parseInt(e.substring(2), 16) : e.charCodeAt(1); } function g(e) { if (e < 32) return (e < 16 ? '\\x0' : '\\x') + e.toString(16); e = String.fromCharCode(e); return e === '\\' || e === '-' || e === ']' || e === '^' ? '\\' + e : e; } function b(e) { var b = e.substring(1, e.length - 1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g), e = [], a = +b[0] === '^', c = ['[']; a && c.push('^'); for (var a = a ? 1 : 0, f = b.length; a < f; ++a) { var h = b[a]; if (/\\[bdsw]/i.test(h))c.push(h); else { var h = d(h), l; a + 2 < f && '-' === b[a + 1] ? (l = d(b[a + 2]), a += 2) : l = h; e.push([h, l]); l < 65 || h > 122 || (l < 65 || h > 90 || e.push([Math.max(65, h) | 32, Math.min(l, 90) | 32]), l < 97 || h > 122 || e.push([Math.max(97, h) & -33, Math.min(l, 122) & -33])); } }e.sort(function (e, a) { return e[0] - a[0] || a[1] - e[1]; }); b = []; f = []; for (a = 0; a < e.length; ++a)h = e[a], h[0] <= f[1] + 1 ? f[1] = Math.max(f[1], h[1]) : b.push(f = h); for (a = 0; a < b.length; ++a)h = b[a], c.push(g(h[0])), +h[1] > h[0] && (h[1] + 1 > h[0] && c.push('-'), c.push(g(h[1]))); c.push(']'); return c.join(''); } function s(e) { for (var a = e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g), c = a.length, d = [], f = 0, h = 0; f < c; ++f) { var l = a[f]; l === '(' ? ++h : '\\' === l.charAt(0) && (l = +l.substring(1)) && (l <= h ? d[l] = -1 : a[f] = g(l)); } for (f = 1; f < d.length; ++f)-1 === d[f] && (d[f] = ++x); for (h = f = 0; f < c; ++f)l = a[f], l === '(' ? (++h, d[h] || (a[f] = '(?:')) : '\\' === l.charAt(0) && (l = +l.substring(1)) && l <= h && +(a[f] = '\\' + d[l]); for (f = 0; f < c; ++f)'^' === a[f] && '^' !== a[f + 1] && (a[f] = ''); if (e.ignoreCase && m) for (f = 0; f < c; ++f)l = a[f], e = l.charAt(0), l.length >= 2 && e === '[' ? a[f] = b(l) : e !== '\\' && (a[f] = l.replace(/[A-Za-z]/g, function (a) { a = a.charCodeAt(0); return '[' + String.fromCharCode(a & -33, a | 32) + ']'; })); return a.join(''); } for (var x = 0, m = !1, j = !1, k = 0, c = a.length; k < c; ++k) { var i = a[k]; if (i.ignoreCase)j = !0; else if (/[a-z]/i.test(i.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi, ''))) { m = !0; j = !1; break; } } for (var r = { + b: 8, t: 9, n: 10, v: 11, + f: 12, r: 13 + }, n = [], k = 0, c = a.length; k < c; ++k) { i = a[k]; if (i.global || i.multiline) throw Error('' + i); n.push('(?:' + s(i) + ')'); } return RegExp(n.join('|'), j ? 'gi' : 'g'); } function T(a, d) { function g(a) { var c = a.nodeType; if (c == 1) { if (!b.test(a.className)) { for (c = a.firstChild; c; c = c.nextSibling)g(c); c = a.nodeName.toLowerCase(); if ('br' === c || 'li' === c)s[j] = '\n', m[j << 1] = x++, m[j++ << 1 | 1] = a; } } else if (c == 3 || c == 4)c = a.nodeValue, c.length && (c = d ? c.replace(/\r\n?/g, '\n') : c.replace(/[\t\n\r ]+/g, ' '), s[j] = c, m[j << 1] = x, x += c.length, m[j++ << 1 | 1] = +a); } var b = /(?:^|\s)nocode(?:\s|$)/, s = [], x = 0, m = [], j = 0; g(a); return {a: s.join('').replace(/\n$/, ''), d: m}; } function H(a, d, g, b) { d && (a = {a: d, e: a}, g(a), b.push.apply(b, a.g)); } function U(a) { for (var d = void 0, g = a.firstChild; g; g = g.nextSibling) var b = g.nodeType, d = b === 1 ? d ? a : g : b === 3 ? V.test(g.nodeValue) ? a : d : d; return d === a ? void 0 : d; } function C(a, d) { function g(a) { for (var j = a.e, k = [j, 'pln'], c = 0, i = a.a.match(s) || [], r = {}, n = 0, e = i.length; n < e; ++n) { var z = i[n], w = r[z], t = void 0, f; if (typeof w === 'string')f = !1; else { var h = b[z.charAt(0)]; + if (h)t = z.match(h[1]), w = h[0]; else { for (f = 0; f < x; ++f) if (h = d[f], t = z.match(h[1])) { w = h[0]; break; }t || (w = 'pln'); } if ((f = w.length >= 5 && 'lang-' === w.substring(0, 5)) && !(t && typeof t[1] === 'string'))f = !1, w = 'src'; f || (r[z] = w); }h = c; c += z.length; if (f) { f = t[1]; var l = z.indexOf(f), B = l + f.length; t[2] && (B = z.length - t[2].length, l = B - f.length); w = w.substring(5); H(j + h, z.substring(0, l), g, k); H(j + h + l, f, I(w, f), k); H(j + h + B, z.substring(B), g, k); } else k.push(j + h, w); }a.g = k; } var b = {}, s; (function () { for (var g = a.concat(d), j = [], k = {}, c = 0, i = g.length; c < i; ++c) { var r = +g[c], n = r[3]; if (n) for (var e = n.length; --e >= 0;)b[n.charAt(e)] = r; r = r[1]; n = '' + r; k.hasOwnProperty(n) || (j.push(r), k[n] = q); }j.push(/[\S\s]/); s = S(j); })(); var x = d.length; return g; } function v(a) { var d = [], g = []; a.tripleQuotedStrings ? d.push(['str', /^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, q, '\'"']) : a.multiLineStrings ? d.push(['str', /^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, +q, '\'"`']) : d.push(['str', /^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/, q, '"\'']); a.verbatimStrings && g.push(['str', /^@"(?:[^"]|"")*(?:"|$)/, q]); var b = a.hashComments; b && (a.cStyleComments ? (b > 1 ? d.push(['com', /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, q, '#']) : d.push(['com', /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/, q, '#']), g.push(['str', /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/, q])) : d.push(['com', +/^#[^\n\r]*/, q, '#'])); a.cStyleComments && (g.push(['com', /^\/\/[^\n\r]*/, q]), g.push(['com', /^\/\*[\S\s]*?(?:\*\/|$)/, q])); if (b = a.regexLiterals) { var s = (b = b > 1 ? '' : '\n\r') ? '.' : '[\\S\\s]'; g.push(['lang-regex', RegExp('^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*(' + ('/(?=[^/*' + b + '])(?:[^/\\x5B\\x5C' + b + ']|\\x5C' + s + '|\\x5B(?:[^\\x5C\\x5D' + b + ']|\\x5C' + +s + ')*(?:\\x5D|$))+/') + ')')]); }(b = a.types) && g.push(['typ', b]); b = ('' + a.keywords).replace(/^ | $/g, ''); b.length && g.push(['kwd', RegExp('^(?:' + b.replace(/[\s,]+/g, '|') + ')\\b'), q]); d.push(['pln', /^\s+/, q, ' \r\n\t\u00a0']); b = '^.[^\\s\\w.$@\'"`/\\\\]*'; a.regexLiterals && (b += '(?!s*/)'); g.push(['lit', /^@[$_a-z][\w$@]*/i, q], ['typ', /^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/, q], ['pln', /^[$_a-z][\w$@]*/i, q], ['lit', /^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, q, '0123456789'], ['pln', /^\\[\S\s]?/, +q], ['pun', RegExp(b), q]); return C(d, g); } function J(a, d, g) { function b(a) { var c = a.nodeType; if (c == 1 && !x.test(a.className)) if ('br' === a.nodeName)s(a), a.parentNode && a.parentNode.removeChild(a); else for (a = a.firstChild; a; a = a.nextSibling)b(a); else if ((c == 3 || c == 4) && g) { var d = a.nodeValue, i = d.match(m); if (i)c = d.substring(0, i.index), a.nodeValue = c, (d = d.substring(i.index + i[0].length)) && a.parentNode.insertBefore(j.createTextNode(d), a.nextSibling), s(a), c || a.parentNode.removeChild(a); } } function s(a) { function b(a, c) { var d = +c ? a.cloneNode(!1) : a, e = a.parentNode; if (e) { var e = b(e, 1), g = a.nextSibling; e.appendChild(d); for (var i = g; i; i = g)g = i.nextSibling, e.appendChild(i); } return d; } for (;!a.nextSibling;) if (a = a.parentNode, !a) return; for (var a = b(a.nextSibling, 0), d; (d = a.parentNode) && d.nodeType === 1;)a = d; c.push(a); } for (var x = /(?:^|\s)nocode(?:\s|$)/, m = /\r\n?|\n/, j = a.ownerDocument, k = j.createElement('li'); a.firstChild;)k.appendChild(a.firstChild); for (var c = [k], i = 0; i < c.length; ++i)b(c[i]); d === (d | 0) && c[0].setAttribute('value', d); var r = j.createElement('ol'); + r.className = 'linenums'; for (var d = Math.max(0, d - 1 | 0) || 0, i = 0, n = c.length; i < n; ++i)k = c[i], k.className = 'L' + (i + d) % 10, k.firstChild || k.appendChild(j.createTextNode('\u00a0')), r.appendChild(k); a.appendChild(r); } function p(a, d) { for (var g = d.length; --g >= 0;) { var b = d[g]; F.hasOwnProperty(b) ? D.console && console.warn('cannot override language handler %s', b) : F[b] = a; } } function I(a, d) { if (!a || !F.hasOwnProperty(a))a = /^\s*= l && (b += 2); g >= B && (r += 2); } } finally { if (f)f.style.display = h; } } catch (u) { D.console && console.log(u && u.stack || u); } } var D = window, y = ['break,continue,do,else,for,if,return,while'], E = [[y, 'auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile'], +'catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof'], M = [E, 'alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where'], N = [E, 'abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient'], + O = [N, 'as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where'], E = [E, 'debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN'], P = [y, 'and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None'], + Q = [y, 'alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END'], W = [y, 'as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use'], y = [y, 'case,done,elif,esac,eval,fi,function,in,local,set,then,until'], R = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/, + V = /\S/, X = v({keywords: [M, O, E, 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END', P, Q, y], hashComments: !0, cStyleComments: !0, multiLineStrings: !0, regexLiterals: !0}), F = {}; p(X, ['default-code']); p(C([], [['pln', /^[^]*(?:>|$)/], ['com', /^<\!--[\S\s]*?(?:--\>|$)/], ['lang-', /^<\?([\S\s]+?)(?:\?>|$)/], ['lang-', /^<%([\S\s]+?)(?:%>|$)/], ['pun', /^(?:<[%?]|[%?]>)/], ['lang-', +/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i], ['lang-js', /^]*>([\S\s]*?)(<\/script\b[^>]*>)/i], ['lang-css', /^]*>([\S\s]*?)(<\/style\b[^>]*>)/i], ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]]), ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']); p(C([['pln', /^\s+/, q, ' \t\r\n'], ['atv', /^(?:"[^"]*"?|'[^']*'?)/, q, '"\'']], [['tag', /^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i], ['atn', /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i], ['lang-uq.val', /^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/], ['pun', /^[/<->]+/], +['lang-js', /^on\w+\s*=\s*"([^"]+)"/i], ['lang-js', /^on\w+\s*=\s*'([^']+)'/i], ['lang-js', /^on\w+\s*=\s*([^\s"'>]+)/i], ['lang-css', /^style\s*=\s*"([^"]+)"/i], ['lang-css', /^style\s*=\s*'([^']+)'/i], ['lang-css', /^style\s*=\s*([^\s"'>]+)/i]]), ['in.tag']); p(C([], [['atv', /^[\S\s]+/]]), ['uq.val']); p(v({keywords: M, hashComments: !0, cStyleComments: !0, types: R}), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']); p(v({keywords: 'null,true,false'}), ['json']); p(v({keywords: O, hashComments: !0, cStyleComments: !0, verbatimStrings: !0, types: R}), +['cs']); p(v({keywords: N, cStyleComments: !0}), ['java']); p(v({keywords: y, hashComments: !0, multiLineStrings: !0}), ['bash', 'bsh', 'csh', 'sh']); p(v({keywords: P, hashComments: !0, multiLineStrings: !0, tripleQuotedStrings: !0}), ['cv', 'py', 'python']); p(v({keywords: 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END', hashComments: !0, multiLineStrings: !0, regexLiterals: 2}), ['perl', 'pl', 'pm']); p(v({ + keywords: Q, + hashComments: !0, multiLineStrings: !0, regexLiterals: !0 +}), ['rb', 'ruby']); p(v({keywords: E, cStyleComments: !0, regexLiterals: !0}), ['javascript', 'js']); p(v({keywords: 'all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes', hashComments: 3, cStyleComments: !0, multilineStrings: !0, tripleQuotedStrings: !0, regexLiterals: !0}), ['coffee']); p(v({keywords: W, cStyleComments: !0, multilineStrings: !0}), ['rc', 'rs', 'rust']); + p(C([], [['str', /^[\S\s]+/]]), ['regex']); var Y = D.PR = { + createSimpleLexer: C, registerLangHandler: p, sourceDecorator: v, PR_ATTRIB_NAME: 'atn', PR_ATTRIB_VALUE: 'atv', PR_COMMENT: 'com', PR_DECLARATION: 'dec', PR_KEYWORD: 'kwd', PR_LITERAL: 'lit', PR_NOCODE: 'nocode', PR_PLAIN: 'pln', PR_PUNCTUATION: 'pun', PR_SOURCE: 'src', PR_STRING: 'str', PR_TAG: 'tag', PR_TYPE: 'typ', prettyPrintOne: D.prettyPrintOne = function (a, d, g) { var b = document.createElement('div'); b.innerHTML = '
' + a + '
'; b = b.firstChild; g && J(b, g, !0); K({h: d, j: g, c: b, i: 1}); + return b.innerHTML; }, prettyPrint: D.prettyPrint = function (a, d) { function g() { for (var b = D.PR_SHOULD_USE_CONTINUATION ? c.now() + 250 : Infinity; i < p.length && c.now() < b; i++) { for (var d = p[i], j = h, k = d; k = k.previousSibling;) { var m = k.nodeType, o = (m === 7 || m === 8) && k.nodeValue; if (o ? !/^\??prettify\b/.test(o) : m !== 3 || /\S/.test(k.nodeValue)) break; if (o) { j = {}; o.replace(/\b(\w+)=([\w%+\-.:]+)/g, function (a, b, c) { j[b] = c; }); break; } }k = d.className; if ((j !== h || e.test(k)) && !v.test(k)) { m = !1; for (o = d.parentNode; o; o = o.parentNode) if (f.test(o.tagName) && +o.className && e.test(o.className)) { m = !0; break; } if (!m) { d.className += ' prettyprinted'; m = j.lang; if (!m) { var m = k.match(n), y; if (!m && (y = U(d)) && t.test(y.tagName))m = y.className.match(n); m && (m = m[1]); } if (w.test(d.tagName))o = 1; else var o = d.currentStyle, u = s.defaultView, o = (o = o ? o.whiteSpace : u && u.getComputedStyle ? u.getComputedStyle(d, q).getPropertyValue('white-space') : 0) && 'pre' === o.substring(0, 3); u = j.linenums; if (!(u = u === 'true' || +u))u = (u = k.match(/\blinenums\b(?::(\d+))?/)) ? u[1] && u[1].length ? +u[1] : !0 : !1; u && J(d, u, o); r = +{h: m, c: d, j: u, i: o}; K(r); } } }i < p.length ? setTimeout(g, 250) : 'function' === typeof a && a(); } for (var b = d || document.body, s = b.ownerDocument || document, b = [b.getElementsByTagName('pre'), b.getElementsByTagName('code'), b.getElementsByTagName('xmp')], p = [], m = 0; m < b.length; ++m) for (var j = 0, k = b[m].length; j < k; ++j)p.push(b[m][j]); var b = q, c = Date; c.now || (c = {now() { return +new Date; }}); var i = 0, r, n = /\blang(?:uage)?-([\w.]+)(?!\S)/, e = /\bprettyprint\b/, v = /\bprettyprinted\b/, w = /pre|xmp/i, t = /^code$/i, f = /^(?:pre|code|xmp)$/i, + h = {}; g(); } + }; typeof define === 'function' && define.amd && define('google-code-prettify', [], function () { return Y; }); })(); }(); diff --git a/components/select/readme.md b/demo/src/doc.md similarity index 97% rename from components/select/readme.md rename to demo/src/doc.md index 8913a3d6..5c1c9fe2 100644 --- a/components/select/readme.md +++ b/demo/src/doc.md @@ -1,6 +1,6 @@ ### Usage ```typescript -import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select'; +import {SelectModule} from 'ng2-select'; ``` ### Annotations diff --git a/demo/src/environments/environment.prod.ts b/demo/src/environments/environment.prod.ts new file mode 100644 index 00000000..3612073b --- /dev/null +++ b/demo/src/environments/environment.prod.ts @@ -0,0 +1,3 @@ +export const environment = { + production: true +}; diff --git a/demo/src/environments/environment.ts b/demo/src/environments/environment.ts new file mode 100644 index 00000000..00313f16 --- /dev/null +++ b/demo/src/environments/environment.ts @@ -0,0 +1,8 @@ +// The file contents for the current environment will overwrite these during build. +// The build system defaults to the dev environment which uses `environment.ts`, but if you do +// `ng build --env=prod` then `environment.prod.ts` will be used instead. +// The list of which env maps to which file can be found in `angular-cli.json`. + +export const environment = { + production: false +}; diff --git a/demo/src/favicon.ico b/demo/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..8081c7ceaf2be08bf59010158c586170d9d2d517 GIT binary patch literal 5430 zcmc(je{54#6vvCoAI3i*G5%$U7!sA3wtMZ$fH6V9C`=eXGJb@R1%(I_{vnZtpD{6n z5Pl{DmxzBDbrB>}`90e12m8T*36WoeDLA&SD_hw{H^wM!cl_RWcVA!I+x87ee975; z@4kD^=bYPn&pmG@(+JZ`rqQEKxW<}RzhW}I!|ulN=fmjVi@x{p$cC`)5$a!)X&U+blKNvN5tg=uLvuLnuqRM;Yc*swiexsoh#XPNu{9F#c`G zQLe{yWA(Y6(;>y|-efAy11k<09(@Oo1B2@0`PtZSkqK&${ zgEY}`W@t{%?9u5rF?}Y7OL{338l*JY#P!%MVQY@oqnItpZ}?s z!r?*kwuR{A@jg2Chlf0^{q*>8n5Ir~YWf*wmsh7B5&EpHfd5@xVaj&gqsdui^spyL zB|kUoblGoO7G(MuKTfa9?pGH0@QP^b#!lM1yHWLh*2iq#`C1TdrnO-d#?Oh@XV2HK zKA{`eo{--^K&MW66Lgsktfvn#cCAc*(}qsfhrvOjMGLE?`dHVipu1J3Kgr%g?cNa8 z)pkmC8DGH~fG+dlrp(5^-QBeEvkOvv#q7MBVLtm2oD^$lJZx--_=K&Ttd=-krx(Bb zcEoKJda@S!%%@`P-##$>*u%T*mh+QjV@)Qa=Mk1?#zLk+M4tIt%}wagT{5J%!tXAE;r{@=bb%nNVxvI+C+$t?!VJ@0d@HIyMJTI{vEw0Ul ze(ha!e&qANbTL1ZneNl45t=#Ot??C0MHjjgY8%*mGisN|S6%g3;Hlx#fMNcL<87MW zZ>6moo1YD?P!fJ#Jb(4)_cc50X5n0KoDYfdPoL^iV`k&o{LPyaoqMqk92wVM#_O0l z09$(A-D+gVIlq4TA&{1T@BsUH`Bm=r#l$Z51J-U&F32+hfUP-iLo=jg7Xmy+WLq6_tWv&`wDlz#`&)Jp~iQf zZP)tu>}pIIJKuw+$&t}GQuqMd%Z>0?t%&BM&Wo^4P^Y z)c6h^f2R>X8*}q|bblAF?@;%?2>$y+cMQbN{X$)^R>vtNq_5AB|0N5U*d^T?X9{xQnJYeU{ zoZL#obI;~Pp95f1`%X3D$Mh*4^?O?IT~7HqlWguezmg?Ybq|7>qQ(@pPHbE9V?f|( z+0xo!#m@Np9PljsyxBY-UA*{U*la#8Wz2sO|48_-5t8%_!n?S$zlGe+NA%?vmxjS- zHE5O3ZarU=X}$7>;Okp(UWXJxI%G_J-@IH;%5#Rt$(WUX?6*Ux!IRd$dLP6+SmPn= z8zjm4jGjN772R{FGkXwcNv8GBcZI#@Y2m{RNF_w8(Z%^A*!bS*!}s6sh*NnURytky humW;*g7R+&|Ledvc- - Angular2 Select + Angular Select @@ -12,10 +12,10 @@ - +