diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts index 796df47cc4..f0c732b8ec 100644 --- a/demo/src/app/app.component.ts +++ b/demo/src/app/app.component.ts @@ -1,28 +1,24 @@ -import { AfterContentInit, Component, ViewContainerRef } from '@angular/core'; +import { AfterContentInit, Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; - -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap'; - -let w:any = window; - -if (w && w.__theme === 'bs4') { - Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4; -} +import { isBs3 } from 'ng2-bootstrap'; @Component({ selector: 'bs-demo', templateUrl: './app.component.html' }) export class AppComponent implements AfterContentInit { - public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3; + public get isBs3(): boolean { + return isBs3(); + } + + private router: Router; - private router:Router; - public constructor(router:Router) { + public constructor(router: Router) { this.router = router; } - public ngAfterContentInit():any { - this.router.events.subscribe((event:any) => { + public ngAfterContentInit(): any { + this.router.events.subscribe((event: any) => { if (event instanceof NavigationEnd) { if (typeof PR !== 'undefined') { // google code-prettify diff --git a/demo/src/app/common/main-menu/main-menu.component.ts b/demo/src/app/common/main-menu/main-menu.component.ts index 601a5faefe..f319107548 100644 --- a/demo/src/app/common/main-menu/main-menu.component.ts +++ b/demo/src/app/common/main-menu/main-menu.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; - -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap'; +import { isBs3 } from 'ng2-bootstrap'; import { routes } from '../../app.routing'; @Component({ @@ -9,16 +8,20 @@ import { routes } from '../../app.routing'; templateUrl: './main-menu.component.html' }) export class MainMenuComponent { - public isBs3:boolean = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3; - public routes:any = routes; - public search:any = {}; - public hash:string = ''; + public get isBs3(): boolean { + return isBs3(); + } + + public routes: any = routes; + public search: any = {}; + public hash: string = ''; private router: Router; - public constructor(router:Router) { + + public constructor(router: Router) { this.router = router; - this.routes = this.routes.filter((v:any) => v.path !== '**'); - this.router.events.subscribe((event:any) => { + this.routes = this.routes.filter((v: any) => v.path !== '**'); + this.router.events.subscribe((event: any) => { if (event instanceof NavigationEnd) { this.hash = event.url; } diff --git a/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts b/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts index 00ec1a0c6d..1c01deb4f5 100644 --- a/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts +++ b/demo/src/app/components/progressbar/demos/progressbar-demo.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap'; +import { isBs3 } from 'ng2-bootstrap'; @Component({ selector: 'progressbar-demo', @@ -13,7 +13,7 @@ export class ProgressbarDemoComponent { public type: string; public stacked: any[] = []; public get isBs3(): boolean { - return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS3; + return isBs3(); } public constructor() { diff --git a/demo/src/app/components/progressbar/progressbar-section.component.ts b/demo/src/app/components/progressbar/progressbar-section.component.ts index f8f0bb8f07..a4ef6dba93 100644 --- a/demo/src/app/components/progressbar/progressbar-section.component.ts +++ b/demo/src/app/components/progressbar/progressbar-section.component.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; - -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap'; +import { isBs3 } from 'ng2-bootstrap'; // webpack html imports let doc = require('html!markdown!./docs/readme.md'); @@ -8,13 +7,11 @@ let titleDoc = require('html!markdown!./docs/title.md'); let ts = require('!!raw?lang=typescript!./demos/progressbar-demo.component.ts'); -let templates:any = { - [Ng2BootstrapTheme.BS3]: require('!!raw?lang=markup!./demos/progressbar-demo-bs3.component.html'), - [Ng2BootstrapTheme.BS4]: require('!!raw?lang=markup!./demos/progressbar-demo-bs4.component.html') +let templates: any = { + 'bs3': require('!!raw?lang=markup!./demos/progressbar-demo-bs3.component.html'), + 'bs4': require('!!raw?lang=markup!./demos/progressbar-demo-bs4.component.html') }; -let html = templates[Ng2BootstrapConfig.theme]; - @Component({ selector: 'progressbar-section', template: ` @@ -23,10 +20,12 @@ let html = templates[Ng2BootstrapConfig.theme]; ` }) export class ProgressbarSectionComponent { - public name:string = 'Progressbar'; - public src:string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar'; - public html:string = html; - public ts:string = ts; - public titleDoc:string = titleDoc; - public doc:string = doc; + public name: string = 'Progressbar'; + public src: string = 'https://github.com/valor-software/ng2-bootstrap/blob/master/components/progressbar'; + public get html(): string { + return isBs3() ? templates.bs3 : templates.bs4; + } + public ts: string = ts; + public titleDoc: string = titleDoc; + public doc: string = doc; } diff --git a/package.json b/package.json index 8324b1fb91..d2f6093b2d 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ "chokidar-cli": "1.2.0", "classlist-polyfill": "1.0.3", "codecov": "1.0.1", - "codelyzer": "^2.0.0-beta.1", + "codelyzer": "^2.0.0-beta.3", "conventional-changelog-cli": "1.2.0", "conventional-github-releaser": "1.1.3", "core-js": "2.4.1", diff --git a/src/carousel/carousel.component.ts b/src/carousel/carousel.component.ts index 40bbca54ef..15f686889c 100644 --- a/src/carousel/carousel.component.ts +++ b/src/carousel/carousel.component.ts @@ -2,7 +2,7 @@ import { Component, Input, OnDestroy } from '@angular/core'; -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../utils/ng2-bootstrap-config'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; import { SlideComponent } from './slide.component'; export enum Direction {UNKNOWN, NEXT, PREV} @@ -58,7 +58,7 @@ export class CarouselComponent implements OnDestroy { protected _interval:number; public get isBS4():boolean { - return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4; + return !isBs3(); } public ngOnDestroy():void { diff --git a/src/datepicker/daypicker.component.ts b/src/datepicker/daypicker.component.ts index f87cbd6d41..4af68982b6 100644 --- a/src/datepicker/daypicker.component.ts +++ b/src/datepicker/daypicker.component.ts @@ -1,15 +1,14 @@ import { Component, OnInit } from '@angular/core'; - -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../utils/ng2-bootstrap-config'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; import { DatePickerInnerComponent } from './datepicker-inner.component'; // write an interface for template options -const TEMPLATE_OPTIONS:any = { - [Ng2BootstrapTheme.BS4]: { +const TEMPLATE_OPTIONS: any = { + 'bs4': { ARROW_LEFT: '<', ARROW_RIGHT: '>' }, - [Ng2BootstrapTheme.BS3]: { + 'bs3': { ARROW_LEFT: ` `, @@ -81,31 +80,34 @@ const TEMPLATE_OPTIONS:any = { }) export class DayPickerComponent implements OnInit { - public labels:any[] = []; - public title:string; - public rows:any[] = []; - public weekNumbers:number[] = []; - public datePicker:DatePickerInnerComponent; - public CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2BootstrapTheme.BS3]; - - public constructor(datePicker:DatePickerInnerComponent) { + public labels: any[] = []; + public title: string; + public rows: any[] = []; + public weekNumbers: number[] = []; + public datePicker: DatePickerInnerComponent; + public CURRENT_THEME_TEMPLATE: any; + + public constructor(datePicker: DatePickerInnerComponent) { + this.CURRENT_THEME_TEMPLATE = isBs3() + ? TEMPLATE_OPTIONS.bs3 + : TEMPLATE_OPTIONS.bs4; this.datePicker = datePicker; } - public get isBS4():boolean { - return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4; + public get isBS4(): boolean { + return !isBs3(); } /*protected getDaysInMonth(year:number, month:number) { return ((month === 1) && (year % 4 === 0) && ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month]; }*/ - public ngOnInit():void { + public ngOnInit(): void { let self = this; this.datePicker.stepDay = {months: 1}; - this.datePicker.setRefreshViewHandler(function ():void { + this.datePicker.setRefreshViewHandler(function (): void { let year = this.activeDate.getFullYear(); let month = this.activeDate.getMonth(); let firstDayOfMonth = new Date(year, month, 1); @@ -120,8 +122,8 @@ export class DayPickerComponent implements OnInit { } // 42 is the number of days on a six-week calendar - let _days:Date[] = self.getDates(firstDate, 42); - let days:any[] = []; + let _days: Date[] = self.getDates(firstDate, 42); + let days: any[] = []; for (let i = 0; i < 42; i++) { let _dateObject = this.createDateObject(_days[i], this.formatDay); _dateObject.secondary = _days[i].getMonth() !== month; @@ -149,7 +151,7 @@ export class DayPickerComponent implements OnInit { } }, 'day'); - this.datePicker.setCompareHandler(function (date1:Date, date2:Date):number { + this.datePicker.setCompareHandler(function (date1: Date, date2: Date): number { let d1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()); let d2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()); return d1.getTime() - d2.getTime(); @@ -158,11 +160,11 @@ export class DayPickerComponent implements OnInit { this.datePicker.refreshView(); } - protected getDates(startDate:Date, n:number):Date[] { - let dates:Date[] = new Array(n); + protected getDates(startDate: Date, n: number): Date[] { + let dates: Date[] = new Array(n); let current = new Date(startDate.getTime()); let i = 0; - let date:Date; + let date: Date; while (i < n) { date = new Date(current.getTime()); date = this.datePicker.fixTimeZone(date); @@ -172,7 +174,7 @@ export class DayPickerComponent implements OnInit { return dates; } - protected getISO8601WeekNumber(date:Date):number { + protected getISO8601WeekNumber(date: Date): number { let checkDate = new Date(date.getTime()); // Thursday checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7)); diff --git a/src/datepicker/monthpicker.component.ts b/src/datepicker/monthpicker.component.ts index 7e8d557b62..a1f9293558 100644 --- a/src/datepicker/monthpicker.component.ts +++ b/src/datepicker/monthpicker.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../utils/ng2-bootstrap-config'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; import { DatePickerInnerComponent } from './datepicker-inner.component'; @Component({ @@ -57,7 +57,7 @@ export class MonthPickerComponent implements OnInit { } public get isBS4():boolean { - return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4; + return !isBs3(); } public ngOnInit():void { diff --git a/src/datepicker/yearpicker.component.ts b/src/datepicker/yearpicker.component.ts index cf1866b24b..a0a72b901b 100644 --- a/src/datepicker/yearpicker.component.ts +++ b/src/datepicker/yearpicker.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../utils/ng2-bootstrap-config'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; import { DatePickerInnerComponent } from './datepicker-inner.component'; @Component({ @@ -57,7 +57,7 @@ export class YearPickerComponent implements OnInit { } public get isBS4():boolean { - return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4; + return !isBs3(); } public ngOnInit():void { diff --git a/src/typeahead/typeahead-container.component.ts b/src/typeahead/typeahead-container.component.ts index de08a15fdd..16fabb6ced 100644 --- a/src/typeahead/typeahead-container.component.ts +++ b/src/typeahead/typeahead-container.component.ts @@ -1,12 +1,39 @@ -import { Component, ElementRef, TemplateRef, ViewEncapsulation } from '@angular/core'; - -import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../utils/ng2-bootstrap-config'; +import { + Component, ElementRef, TemplateRef, ViewEncapsulation +} from '@angular/core'; +import { isBs3 } from '../utils/ng2-bootstrap-config'; import { TypeaheadUtils } from './typeahead-utils'; import { TypeaheadDirective } from './typeahead.directive'; import { TypeaheadMatch } from './typeahead-match.class'; -const bs4 = ` -
+ +`, // tslint:disable-next-line - host: {'[class]': '"dropdown open"' }, + host: {'[class]': '"dropdown open"'}, encapsulation: ViewEncapsulation.None }) export class TypeaheadContainerComponent { - public parent:TypeaheadDirective; - public query:any; - public element:ElementRef; - public isFocused:boolean = false; - public top:string; - public left:string; - public display:string; - - protected _active:TypeaheadMatch; - protected _matches:TypeaheadMatch[] = []; - protected placement:string; - - public constructor(element:ElementRef) { + public parent: TypeaheadDirective; + public query: any; + public element: ElementRef; + public isFocused: boolean = false; + public top: string; + public left: string; + public display: string; + public placement: string; + + public get isBS4():boolean { + return !isBs3(); + } + + + protected _active: TypeaheadMatch; + protected _matches: TypeaheadMatch[] = []; + + public constructor(element: ElementRef) { this.element = element; } - public get matches():TypeaheadMatch[] { + public get matches(): TypeaheadMatch[] { return this._matches; } - public set matches(value:TypeaheadMatch[]) { + + public set matches(value: TypeaheadMatch[]) { this._matches = value; if (this._matches.length > 0) { @@ -98,15 +100,15 @@ export class TypeaheadContainerComponent { } } - public get itemTemplate():TemplateRef { + public get itemTemplate(): TemplateRef { return this.parent ? this.parent.typeaheadItemTemplate : undefined; } - public selectActiveMatch():void { + public selectActiveMatch(): void { this.selectMatch(this._active); } - public prevActiveMatch():void { + public prevActiveMatch(): void { let index = this.matches.indexOf(this._active); this._active = this.matches[index - 1 < 0 ? this.matches.length - 1 @@ -117,7 +119,7 @@ export class TypeaheadContainerComponent { } - public nextActiveMatch():void { + public nextActiveMatch(): void { let index = this.matches.indexOf(this._active); this._active = this.matches[index + 1 > this.matches.length - 1 ? 0 @@ -127,21 +129,21 @@ export class TypeaheadContainerComponent { } } - protected selectActive(value:TypeaheadMatch):void { + public selectActive(value: TypeaheadMatch): void { this.isFocused = true; this._active = value; } - protected hightlight(match:TypeaheadMatch, query:any):string { - let itemStr:string = match.value; - let itemStrHelper:string = (this.parent && this.parent.typeaheadLatinize + public hightlight(match: TypeaheadMatch, query: any): string { + let itemStr: string = match.value; + let itemStrHelper: string = (this.parent && this.parent.typeaheadLatinize ? TypeaheadUtils.latinize(itemStr) : itemStr).toLowerCase(); - let startIdx:number; - let tokenLen:number; + let startIdx: number; + let tokenLen: number; // Replaces the capture string with the same string inside of a "strong" tag if (typeof query === 'object') { - let queryLen:number = query.length; + let queryLen: number = query.length; for (let i = 0; i < queryLen; i += 1) { // query[i] is already latinized and lower case startIdx = itemStrHelper.indexOf(query[i]); @@ -162,15 +164,15 @@ export class TypeaheadContainerComponent { return itemStr; } - public focusLost():void { + public focusLost(): void { this.isFocused = false; } - public isActive(value:TypeaheadMatch):boolean { + public isActive(value: TypeaheadMatch): boolean { return this._active === value; } - protected selectMatch(value:TypeaheadMatch, e:Event = void 0):boolean { + public selectMatch(value: TypeaheadMatch, e: Event = void 0): boolean { if (e) { e.stopPropagation(); e.preventDefault(); diff --git a/src/utils/ng2-bootstrap-config.ts b/src/utils/ng2-bootstrap-config.ts index b7f2ba5de2..0d07aea77a 100644 --- a/src/utils/ng2-bootstrap-config.ts +++ b/src/utils/ng2-bootstrap-config.ts @@ -1,19 +1,5 @@ import { window } from './facade/browser'; -export enum Ng2BootstrapTheme {BS3 = 1, BS4 = 2} - -export class Ng2BootstrapConfig { - protected static _theme:Ng2BootstrapTheme = Ng2BootstrapTheme.BS3; - - public static get theme():Ng2BootstrapTheme { - // hack as for now - if (window.__theme === 'bs4') { - return Ng2BootstrapTheme.BS4; - } - return this._theme; - } - - public static set theme(v:Ng2BootstrapTheme) { - this._theme = v; - } +export function isBs3(): boolean { + return window.__theme !== 'bs4'; } diff --git a/yarn.lock b/yarn.lock index 25b6a12506..a2146a4405 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1420,9 +1420,9 @@ codecov@1.0.1, codecov@^1.0.1: request ">=2.42.0" urlgrey ">=0.4.0" -codelyzer@^2.0.0-beta.1: - version "2.0.0-beta.1" - resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-2.0.0-beta.1.tgz#5385f739ec782933d0d4d7b11a42510174de0bf7" +codelyzer@^2.0.0-beta.3: + version "2.0.0-beta.3" + resolved "https://registry.yarnpkg.com/codelyzer/-/codelyzer-2.0.0-beta.3.tgz#be17e73a4ccd659d6f2a863da1711b3f742762ed" dependencies: app-root-path "^2.0.1" css-selector-tokenizer "^0.7.0" @@ -4994,14 +4994,14 @@ nested-error-stacks@^2.0.0: dependencies: inherits "~2.0.1" -ngm-cli@^0.3.6: - version "0.3.6" - resolved "https://registry.yarnpkg.com/ngm-cli/-/ngm-cli-0.3.6.tgz#790a1f1b9153295973d729f542baa61cf7552ce4" +ngm-cli@^0.3.7: + version "0.3.7" + resolved "https://registry.yarnpkg.com/ngm-cli/-/ngm-cli-0.3.7.tgz#5163adcb5c53d04ba42203c813278c7f6836898e" dependencies: "@angular/compiler-cli" "^2.2.0" "@angular/tsc-wrapped" "0.4.0" awesome-typescript-loader "3.0.0-beta.9" - npm-submodules "0.3.6" + npm-submodules "0.3.7" reflect-metadata "0.1.8" rxjs "5.0.0-beta.12" zone.js "0.7.2" @@ -5168,9 +5168,9 @@ npm-run-path@^2.0.0: dependencies: path-key "^2.0.0" -npm-submodules@0.3.6: - version "0.3.6" - resolved "https://registry.yarnpkg.com/npm-submodules/-/npm-submodules-0.3.6.tgz#b03254569f3f3acf6c7cc9d52ce31cbb65fe3f00" +npm-submodules@0.3.7: + version "0.3.7" + resolved "https://registry.yarnpkg.com/npm-submodules/-/npm-submodules-0.3.7.tgz#592d73257984d7e4dfff986cd6da3c5d140c16a3" dependencies: "@angular/compiler" "^2.2.0" "@angular/core" "^2.2.0"