From a168320c19d75e90e5447121caa66d1d6a2fbd6b Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Tue, 16 Feb 2016 08:51:09 -0500 Subject: [PATCH 1/8] Using string.match not regexp.test --- components/select/select.ts | 4 ++-- demo/components/select/single-demo.ts | 10 +--------- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/components/select/select.ts b/components/select/select.ts index dee5fdd8..f3bda477 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -514,7 +514,7 @@ export class GenericBehavior extends Behavior implements IOptionsBehavior { public filter(query:RegExp) { let options = this.actor.itemObjects - .filter(option => query.test(option.text) && + .filter(option => option.text.match(query) && (this.actor.multiple === false || (this.actor.multiple === true && this.actor.active.indexOf(option) < 0))); @@ -596,7 +596,7 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior { 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 => option.text.match(query) ); startPos = si.fillChildrenHash(optionsMap, startPos); if (children.length > 0) { diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index 1ff20ac2..ce585d02 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -16,15 +16,7 @@ export class SingleDemo { private value:any = {}; private _disabledV:string = '0'; private disabled:boolean = false; - private 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', - 'Helsinki', 'Leeds', 'Leipzig', 'Lisbon', 'Łódź', 'London', 'Kraków', 'Madrid', - 'Málaga', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Naples', 'Palermo', - 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 'Rotterdam', 'Seville', 'Sheffield', - 'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna', - 'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza']; + private 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', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon', 'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga', 'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza', 'Łódź']; private get disabledV():string { return this._disabledV; From 1237f90d3df0a64387a8afa41a0520bde5efbec1 Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Tue, 16 Feb 2016 09:12:31 -0500 Subject: [PATCH 2/8] Added stripTags to filtering values --- components/select/select.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/components/select/select.ts b/components/select/select.ts index f3bda477..d45c800a 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -514,7 +514,7 @@ export class GenericBehavior extends Behavior implements IOptionsBehavior { public filter(query:RegExp) { let options = this.actor.itemObjects - .filter(option => option.text.match(query) && + .filter(option => this.stripTags(option.text).match(query) && (this.actor.multiple === false || (this.actor.multiple === true && this.actor.active.indexOf(option) < 0))); @@ -525,6 +525,12 @@ export class GenericBehavior extends Behavior implements IOptionsBehavior { super.ensureHighlightVisible(); } } + + private stripTags(input:string) { + let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, + commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; + return input.replace(commentsAndPhpTags, '').replace(tags, ''); + } } export class ChildrenBehavior extends Behavior implements IOptionsBehavior { From 280a975ffc32647ebf2148cafe6e09f13cfcb97f Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Tue, 16 Feb 2016 09:36:00 -0500 Subject: [PATCH 3/8] Fixed line breaking on city array --- demo/components/select/single-demo.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/demo/components/select/single-demo.ts b/demo/components/select/single-demo.ts index ce585d02..3da0ad80 100644 --- a/demo/components/select/single-demo.ts +++ b/demo/components/select/single-demo.ts @@ -16,7 +16,16 @@ export class SingleDemo { private value:any = {}; private _disabledV:string = '0'; private disabled:boolean = false; - private 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', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon', 'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga', 'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza', 'Łódź']; + private 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', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon', + 'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga', + 'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', + 'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart', + 'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', + 'Zagreb', 'Zaragoza', 'Łódź']; private get disabledV():string { return this._disabledV; From 75dbb3d1dbae38454e80096cc685f6f3b4dbb458 Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Tue, 16 Feb 2016 15:45:27 -0500 Subject: [PATCH 4/8] Backed out child filter change --- 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 d45c800a..b21109c1 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -602,7 +602,7 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior { let startPos = 0; for (let si of this.actor.itemObjects) { - let children:Array = si.children.filter(option => option.text.match(query) ); + let children:Array = si.children.filter(option => query.test(option.text)); startPos = si.fillChildrenHash(optionsMap, startPos); if (children.length > 0) { From 493fbb4492674c7eb027f25ddb6a02ae399746c2 Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Wed, 17 Feb 2016 09:17:33 -0500 Subject: [PATCH 5/8] fixed highlights and slect value display --- components/select/select-pipes.ts | 26 +++++++++++++++++++++++--- components/select/select.ts | 24 ++++++++++++++---------- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 03df053a..0af9707d 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -11,12 +11,32 @@ export class HightlightPipe { let query = args[0]; - return query ? - value.replace(new RegExp(this.escapeRegexp(query), 'gi'), '$&') : - value; + if ( query ) { + let tagRE = new RegExp("<[^<>]*>", "ig"); + // get ist of tags + let tagList = value.match( tagRE ); + //Replace tags with token + let tmpValue = value.replace( tagRE, "$!$"); + //Replace search words + value = tmpValue.replace(new RegExp(this.escapeRegexp(query), 'gi'),'$&'); + //Reinsert HTML + for(let i=0;value.indexOf("$!$") > -1;i++){ + value = value.replace("$!$", tagList[i]); + } + } + return value; + // return query ? + // value.replace(new RegExp(this.escapeRegexp(query), 'gi'), ) : + // value; } private escapeRegexp(queryToEscape:string) { return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'); } } + +export function stripTags(input:string) { + let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, + commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; + return input.replace(commentsAndPhpTags, '').replace(tags, ''); +} \ No newline at end of file diff --git a/components/select/select.ts b/components/select/select.ts index b21109c1..e6b84995 100644 --- a/components/select/select.ts +++ b/components/select/select.ts @@ -12,7 +12,10 @@ import { NgStyle } from 'angular2/common'; import {SelectItem} from './select-item'; -import {HightlightPipe} from './select-pipes'; +import { + HightlightPipe, + stripTags +} from './select-pipes'; import {IOptionsBehavior} from './select-interfaces'; let optionsTemplate = ` @@ -68,7 +71,8 @@ let optionsTemplate = ` style="outline: 0;"> {{placeholder}} {{active[0].text}} + [ngClass]="{'ui-select-allow-clear': allowClear && active.length > 0}" + [innerHTML]="active[0].text"> { let el = this.element.nativeElement.querySelector('div.ui-select-container > input'); - el.focus(); - el.value = value; + if (el) { + el.focus(); + el.value = value; + } }, 0); } @@ -413,6 +419,7 @@ export class Select { if (this.multiple === true) { this.focusToInput(''); } else { + this.focusToInput( stripTags(value.text) ); this.element.nativeElement.querySelector('.ui-select-container').focus(); } } @@ -514,7 +521,7 @@ export class GenericBehavior extends Behavior implements IOptionsBehavior { public filter(query:RegExp) { let options = this.actor.itemObjects - .filter(option => this.stripTags(option.text).match(query) && + .filter(option => stripTags(option.text).match(query) && (this.actor.multiple === false || (this.actor.multiple === true && this.actor.active.indexOf(option) < 0))); @@ -526,11 +533,6 @@ export class GenericBehavior extends Behavior implements IOptionsBehavior { } } - private stripTags(input:string) { - let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, - commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; - return input.replace(commentsAndPhpTags, '').replace(tags, ''); - } } export class ChildrenBehavior extends Behavior implements IOptionsBehavior { @@ -620,3 +622,5 @@ export class ChildrenBehavior extends Behavior implements IOptionsBehavior { } } } + + From 6a1499b069642046375bd1dc86fbbb35b7261daf Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Wed, 17 Feb 2016 09:18:01 -0500 Subject: [PATCH 6/8] fixed lint errors --- components/select/select-pipes.ts | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/components/select/select-pipes.ts b/components/select/select-pipes.ts index 0af9707d..4ffb6eda 100644 --- a/components/select/select-pipes.ts +++ b/components/select/select-pipes.ts @@ -12,22 +12,19 @@ export class HightlightPipe { let query = args[0]; if ( query ) { - let tagRE = new RegExp("<[^<>]*>", "ig"); + let tagRE = new RegExp('<[^<>]*>', 'ig'); // get ist of tags let tagList = value.match( tagRE ); - //Replace tags with token - let tmpValue = value.replace( tagRE, "$!$"); - //Replace search words - value = tmpValue.replace(new RegExp(this.escapeRegexp(query), 'gi'),'$&'); - //Reinsert HTML - for(let i=0;value.indexOf("$!$") > -1;i++){ - value = value.replace("$!$", tagList[i]); + // Replace tags with token + let tmpValue = value.replace( tagRE, '$!$'); + // Replace search words + value = tmpValue.replace(new RegExp(this.escapeRegexp(query), 'gi'), '$&'); + // Reinsert HTML + for (let i = 0; value.indexOf('$!$') > -1; i++) { + value = value.replace('$!$', tagList[i]); } } return value; - // return query ? - // value.replace(new RegExp(this.escapeRegexp(query), 'gi'), ) : - // value; } private escapeRegexp(queryToEscape:string) { @@ -39,4 +36,4 @@ export function stripTags(input:string) { let tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi, commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi; return input.replace(commentsAndPhpTags, '').replace(tags, ''); -} \ No newline at end of file +} From 5a591a430fbc5e53c1119004086bb70d92a1e8e0 Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Wed, 17 Feb 2016 14:41:52 -0500 Subject: [PATCH 7/8] Added RichDemo example --- demo/components/select-section.ts | 8 +- demo/components/select/rich-demo.html | 21 ++++ demo/components/select/rich-demo.ts | 173 ++++++++++++++++++++++++++ 3 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 demo/components/select/rich-demo.html create mode 100644 demo/components/select/rich-demo.ts diff --git a/demo/components/select-section.ts b/demo/components/select-section.ts index 188aee25..6f432b14 100644 --- a/demo/components/select-section.ts +++ b/demo/components/select-section.ts @@ -6,6 +6,7 @@ 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'; let name = 'Select'; // webpack html imports @@ -26,6 +27,11 @@ let tabDesc:Array = [ 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') } ]; @@ -80,7 +86,7 @@ tabDesc.forEach(desc => { `, - directives: [SingleDemo, MultipleDemo, ChildrenDemo, TAB_DIRECTIVES, CORE_DIRECTIVES] + directives: [SingleDemo, MultipleDemo, ChildrenDemo, RichDemo, TAB_DIRECTIVES, CORE_DIRECTIVES] }) export class SelectSection { public currentHeading:string = 'Single'; diff --git a/demo/components/select/rich-demo.html b/demo/components/select/rich-demo.html new file mode 100644 index 00000000..927711e1 --- /dev/null +++ b/demo/components/select/rich-demo.html @@ -0,0 +1,21 @@ +
+

Select a color

+ + +

+ 
{{value.text}}
+
+ +
+
diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts new file mode 100644 index 00000000..7cffc11f --- /dev/null +++ b/demo/components/select/rich-demo.ts @@ -0,0 +1,173 @@ +import { + Component, + OnInit, + ViewEncapsulation +} from 'angular2/core'; +import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common'; +import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap'; + +import {SELECT_DIRECTIVES} from '../../../ng2-select'; + +// webpack html imports +let template = require('./rich-demo.html'); + +@Component({ + 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], + encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles +}) +export class RichDemo implements OnInit { + private value:any = {}; + private _disabledV:string = '0'; + private disabled:boolean = false; + private items:Array = []; + + ngOnInit() { + COLORS.forEach( c => { + this.items.push( { + id : c.hex, + text: ""+c.name+" ("+c.hex+")" + }); + }); + } + + private get disabledV():string { + return this._disabledV; + } + + private set disabledV(value:string) { + this._disabledV = value; + this.disabled = this._disabledV === '1'; + } + + private selected(value:any) { + console.log('Selected value is: ', value); + } + + private removed(value:any) { + console.log('Removed value is: ', value); + } + + private typed(value:any) { + console.log('New search input: ', value); + } + + private refreshValue(value:any) { + this.value = value; + } +} + +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': 'Teal 10', 'hex': '#A7FAE6' }, + { 'name': 'Teal 20', 'hex': '#6EEDD8' }, + { 'name': 'Teal 30', 'hex': '#41D6C3' }, + { 'name': 'Teal 40', 'hex': '#00B4A0' }, + { 'name': 'Teal 50', 'hex': '#008571' }, + { 'name': 'Teal 60', 'hex': '#006D5D' }, + { 'name': 'Teal 70', 'hex': '#005448' }, + { 'name': 'Teal 80', 'hex': '#003C32' }, + { 'name': 'Teal 90', 'hex': '#012B22' }, + { 'name': 'Teal 100', 'hex': '#000202' }, + { 'name': 'Purple 10', 'hex': '#EED2FF' }, + { 'name': 'Purple 20', 'hex': '#D7AAFF' }, + { 'name': 'Purple 30', 'hex': '#BA8FF7' }, + { 'name': 'Purple 40', 'hex': '#AF6EE8' }, + { 'name': 'Purple 50', 'hex': '#9855D4' }, + { 'name': 'Purple 60', 'hex': '#734098' }, + { 'name': 'Purple 70', 'hex': '#562F72' }, + { 'name': 'Purple 80', 'hex': '#412356' }, + { 'name': 'Purple 90', 'hex': '#311A41' }, + { 'name': 'Purple 100', 'hex': '#030103' }, + { 'name': 'Magenta 10', 'hex': '#FFD2FF' }, + { 'name': 'Magenta 20', 'hex': '#FF9EEE' }, + { 'name': 'Magenta 30', 'hex': '#FF71D4' }, + { 'name': 'Magenta 40', 'hex': '#FF3CA0' }, + { 'name': 'Magenta 50', 'hex': '#DB2780' }, + { 'name': 'Magenta 60', 'hex': '#A6266E' }, + { 'name': 'Magenta 70', 'hex': '#7C1C58' }, + { 'name': 'Magenta 80', 'hex': '#601146' }, + { 'name': 'Magenta 90', 'hex': '#3A0B2E' }, + { 'name': 'Magenta 100', 'hex': '#040102' }, + { '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': 'Orange 10', 'hex': '#FFD791' }, + { 'name': 'Orange 20', 'hex': '#FFA573' }, + { 'name': 'Orange 30', 'hex': '#FF7832' }, + { 'name': 'Orange 40', 'hex': '#FF5003' }, + { 'name': 'Orange 50', 'hex': '#D74108' }, + { 'name': 'Orange 60', 'hex': '#A53725' }, + { 'name': 'Orange 70', 'hex': '#872A0F' }, + { 'name': 'Orange 80', 'hex': '#6D120F' }, + { 'name': 'Orange 90', 'hex': '#43100B' }, + { 'name': 'Orange 100', 'hex': '#030100' }, + { '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': 'Gray 10', 'hex': '#E0E0E0' }, + { 'name': 'Gray 20', 'hex': '#C7C7C7' }, + { 'name': 'Gray 30', 'hex': '#AEAEAE' }, + { 'name': 'Gray 40', 'hex': '#959595' }, + { 'name': 'Gray 50', 'hex': '#777677' }, + { 'name': 'Gray 60', 'hex': '#5A5A5A' }, + { 'name': 'Gray 70', 'hex': '#464646' }, + { 'name': 'Gray 80', 'hex': '#323232' }, + { 'name': 'Gray 90', 'hex': '#121212' }, + { 'name': 'Gray 100', 'hex': '#000000' }, + { 'name': 'Cool-Gray 10', 'hex': '#DFE9E9' }, + { 'name': 'Cool-Gray 20', 'hex': '#C8D2D2' }, + { 'name': 'Cool-Gray 30', 'hex': '#AEB8B8' }, + { 'name': 'Cool-Gray 40', 'hex': '#959F9F' }, + { 'name': 'Cool-Gray 50', 'hex': '#6D7777' }, + { 'name': 'Cool-Gray 60', 'hex': '#586464' }, + { 'name': 'Cool-Gray 70', 'hex': '#3C4646' }, + { 'name': 'Cool-Gray 80', 'hex': '#2D3737' }, + { 'name': 'Cool-Gray 90', 'hex': '#0D1111' }, + { 'name': 'Cool-Gray 100', 'hex': '#000203' }, + { 'name': 'Warm-Gray 10', 'hex': '#E9E0E0' }, + { 'name': 'Warm-Gray 20', 'hex': '#D0C7C7' }, + { 'name': 'Warm-Gray 30', 'hex': '#B8AEAE' }, + { 'name': 'Warm-Gray 40', 'hex': '#9E9494' }, + { 'name': 'Warm-Gray 50', 'hex': '#7D7373' }, + { 'name': 'Warm-Gray 60', 'hex': '#645A5A' }, + { 'name': 'Warm-Gray 70', 'hex': '#504646' }, + { 'name': 'Warm-Gray 80', 'hex': '#3C3232' }, + { 'name': 'Warm-Gray 90', 'hex': '#1A1314' }, + { 'name': 'Warm-Gray 100', 'hex': '#030000' } +] \ No newline at end of file From 5d4387a3abb4d5d145207c06df3dae4fb835db81 Mon Sep 17 00:00:00 2001 From: Karl Bishop Date: Wed, 17 Feb 2016 14:42:04 -0500 Subject: [PATCH 8/8] lint issues --- demo/components/select/rich-demo.ts | 157 ++++++++-------------------- 1 file changed, 44 insertions(+), 113 deletions(-) diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts index 7cffc11f..677cac04 100644 --- a/demo/components/select/rich-demo.ts +++ b/demo/components/select/rich-demo.ts @@ -8,6 +8,49 @@ import {ButtonCheckbox} 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' } +]; + // webpack html imports let template = require('./rich-demo.html'); @@ -28,7 +71,7 @@ export class RichDemo implements OnInit { COLORS.forEach( c => { this.items.push( { id : c.hex, - text: ""+c.name+" ("+c.hex+")" + text: `${c.name} (${c.hex})` }); }); } @@ -59,115 +102,3 @@ export class RichDemo implements OnInit { } } -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': 'Teal 10', 'hex': '#A7FAE6' }, - { 'name': 'Teal 20', 'hex': '#6EEDD8' }, - { 'name': 'Teal 30', 'hex': '#41D6C3' }, - { 'name': 'Teal 40', 'hex': '#00B4A0' }, - { 'name': 'Teal 50', 'hex': '#008571' }, - { 'name': 'Teal 60', 'hex': '#006D5D' }, - { 'name': 'Teal 70', 'hex': '#005448' }, - { 'name': 'Teal 80', 'hex': '#003C32' }, - { 'name': 'Teal 90', 'hex': '#012B22' }, - { 'name': 'Teal 100', 'hex': '#000202' }, - { 'name': 'Purple 10', 'hex': '#EED2FF' }, - { 'name': 'Purple 20', 'hex': '#D7AAFF' }, - { 'name': 'Purple 30', 'hex': '#BA8FF7' }, - { 'name': 'Purple 40', 'hex': '#AF6EE8' }, - { 'name': 'Purple 50', 'hex': '#9855D4' }, - { 'name': 'Purple 60', 'hex': '#734098' }, - { 'name': 'Purple 70', 'hex': '#562F72' }, - { 'name': 'Purple 80', 'hex': '#412356' }, - { 'name': 'Purple 90', 'hex': '#311A41' }, - { 'name': 'Purple 100', 'hex': '#030103' }, - { 'name': 'Magenta 10', 'hex': '#FFD2FF' }, - { 'name': 'Magenta 20', 'hex': '#FF9EEE' }, - { 'name': 'Magenta 30', 'hex': '#FF71D4' }, - { 'name': 'Magenta 40', 'hex': '#FF3CA0' }, - { 'name': 'Magenta 50', 'hex': '#DB2780' }, - { 'name': 'Magenta 60', 'hex': '#A6266E' }, - { 'name': 'Magenta 70', 'hex': '#7C1C58' }, - { 'name': 'Magenta 80', 'hex': '#601146' }, - { 'name': 'Magenta 90', 'hex': '#3A0B2E' }, - { 'name': 'Magenta 100', 'hex': '#040102' }, - { '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': 'Orange 10', 'hex': '#FFD791' }, - { 'name': 'Orange 20', 'hex': '#FFA573' }, - { 'name': 'Orange 30', 'hex': '#FF7832' }, - { 'name': 'Orange 40', 'hex': '#FF5003' }, - { 'name': 'Orange 50', 'hex': '#D74108' }, - { 'name': 'Orange 60', 'hex': '#A53725' }, - { 'name': 'Orange 70', 'hex': '#872A0F' }, - { 'name': 'Orange 80', 'hex': '#6D120F' }, - { 'name': 'Orange 90', 'hex': '#43100B' }, - { 'name': 'Orange 100', 'hex': '#030100' }, - { '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': 'Gray 10', 'hex': '#E0E0E0' }, - { 'name': 'Gray 20', 'hex': '#C7C7C7' }, - { 'name': 'Gray 30', 'hex': '#AEAEAE' }, - { 'name': 'Gray 40', 'hex': '#959595' }, - { 'name': 'Gray 50', 'hex': '#777677' }, - { 'name': 'Gray 60', 'hex': '#5A5A5A' }, - { 'name': 'Gray 70', 'hex': '#464646' }, - { 'name': 'Gray 80', 'hex': '#323232' }, - { 'name': 'Gray 90', 'hex': '#121212' }, - { 'name': 'Gray 100', 'hex': '#000000' }, - { 'name': 'Cool-Gray 10', 'hex': '#DFE9E9' }, - { 'name': 'Cool-Gray 20', 'hex': '#C8D2D2' }, - { 'name': 'Cool-Gray 30', 'hex': '#AEB8B8' }, - { 'name': 'Cool-Gray 40', 'hex': '#959F9F' }, - { 'name': 'Cool-Gray 50', 'hex': '#6D7777' }, - { 'name': 'Cool-Gray 60', 'hex': '#586464' }, - { 'name': 'Cool-Gray 70', 'hex': '#3C4646' }, - { 'name': 'Cool-Gray 80', 'hex': '#2D3737' }, - { 'name': 'Cool-Gray 90', 'hex': '#0D1111' }, - { 'name': 'Cool-Gray 100', 'hex': '#000203' }, - { 'name': 'Warm-Gray 10', 'hex': '#E9E0E0' }, - { 'name': 'Warm-Gray 20', 'hex': '#D0C7C7' }, - { 'name': 'Warm-Gray 30', 'hex': '#B8AEAE' }, - { 'name': 'Warm-Gray 40', 'hex': '#9E9494' }, - { 'name': 'Warm-Gray 50', 'hex': '#7D7373' }, - { 'name': 'Warm-Gray 60', 'hex': '#645A5A' }, - { 'name': 'Warm-Gray 70', 'hex': '#504646' }, - { 'name': 'Warm-Gray 80', 'hex': '#3C3232' }, - { 'name': 'Warm-Gray 90', 'hex': '#1A1314' }, - { 'name': 'Warm-Gray 100', 'hex': '#030000' } -] \ No newline at end of file