From ab4ad905a89fad92ff4403374fbf0388ba87e04f Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 17:51:02 -0500 Subject: [PATCH 1/8] refactor(searchbar): converting searchbar input to use a directive references #666 --- ionic/components/searchbar/searchbar.ts | 150 ++++++++++++------ .../searchbar/test/floating/index.ts | 2 +- .../searchbar/test/floating/main.html | 4 + ionic/config/directives.ts | 3 +- 4 files changed, 107 insertions(+), 52 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 29f63d85fc..54a263e1ad 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,4 +1,4 @@ -import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2'; +import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass, Directive, Host, forwardRef, ViewChild} from 'angular2/angular2'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -39,14 +39,16 @@ import {Button} from '../button/button'; '
' + '' + '
' + - '' + - '' + + '' + + '' + '
' + '', - directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button] + directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { + @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput; + /** * @private * This holds the searchbar input value used for querying @@ -77,8 +79,89 @@ export class Searchbar extends Ion { */ ngAfterViewInit() { // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - this.query = this.ngControl.value || ''; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + this.query = this.searchbarInput.value || ''; + } + + /** + * @private + * Sets the searchbar to focused and aligned left on input focus. + */ + inputFocused() { + this.isFocused = true; + this.shouldLeftAlign = true; + } + + /** + * @private + * Sets the searchbar to not focused and checks if it should align left + * based on whether there is a value in the searchbar or not on input blur. + */ + inputBlurred() { + this.isFocused = false; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; + } + + /** + * @private + * Clears the input field and triggers the control change. + */ + clearInput() { + this.searchbarInput.writeValue(''); + this.searchbarInput.onChange(''); + this.query = ''; + } + + /** + * @private + * Blurs the input field, clears the input field and removes the left align + * then calls the custom cancel function if the user passed one in. + */ + cancelSearchbar(event, query) { + this.searchbarInput.elementRef.nativeElement.blur(); + this.clearInput(); + this.shouldLeftAlign = false; + + this.cancelAction && this.cancelAction(event, query); + } +} + +@Directive({ + selector: '.searchbar-input', + host: { + '(focus)': 'inputFocused()', + '(blur)': 'inputBlurred()', + '(keyup)': 'inputChanged($event)' + } +}) +export class SearchbarInput { + /** + * @private + * This holds the searchbar input value used for querying + */ + query: string; + + constructor( + @Host() searchbar: Searchbar, + elementRef: ElementRef, + renderer: Renderer + ) { + this.searchbar = searchbar; + this.renderer = renderer; + this.elementRef = elementRef; + + if (!searchbar.ngControl) return; + + this.onChange = (_) => {}; + this.onTouched = (_) => {}; + + this.ngControl = searchbar.ngControl; + this.ngControl.valueAccessor = this; + } + + ngOnInit() { + if (this.ngControl) this.value = this.ngControl.value; + console.log(this.value); } /** @@ -86,7 +169,7 @@ export class Searchbar extends Ion { * Write a new value to the element. */ writeValue(value) { - this.query = value; + this.value = value; } /** @@ -107,52 +190,19 @@ export class Searchbar extends Ion { /** * @private - * Updates the value of the control when the searchbar input changes. + * Sets the Searchbar input to focused and aligned left on input focus. */ + inputFocused() { + this.searchbar.inputFocused(); + } + + inputBlurred() { + this.searchbar.inputBlurred(); + } + inputChanged(event) { this.writeValue(event.target.value); this.onChange(event.target.value); } - /** - * @private - * Sets the searchbar to focused and aligned left on input focus. - */ - inputFocused() { - this.isFocused = true; - this.shouldLeftAlign = true; - } - - /** - * @private - * Sets the searchbar to not focused and checks if it should align left - * based on whether there is a value in the searchbar or not on input blur. - */ - inputBlurred() { - this.isFocused = false; - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; - } - - /** - * @private - * Clears the input field and triggers the control change. - */ - clearInput(event) { - this.writeValue(''); - this.onChange(''); - } - - /** - * @private - * Blurs the input field, clears the input field and removes the left align - * then calls the custom cancel function if the user passed one in. - */ - cancelSearchbar(event, query) { - this.element = this.elementRef.nativeElement.querySelector('input'); - this.element.blur(); - this.clearInput(); - this.shouldLeftAlign = false; - - this.cancelAction && this.cancelAction(event, query); - } } diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index e375587be2..408cb474c8 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar'; directives: [FORM_DIRECTIVES] }) class E2EApp { - defaultSearch: string; + defaultSearch: string = 'filter'; customPlaceholder: string; defaultCancel: string; customCancel: string; diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index ad7b9c4be8..8824eee667 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -2,6 +2,10 @@
Search - Default
+

+ Default Search: {{ defaultSearch }} +

+
Search - Custom Placeholder
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index d6d2733dc1..89f05ac377 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -23,7 +23,7 @@ import {TextInput, TextInputElement} from '../components/text-input/text-input'; import {Label} from '../components/text-input/label'; import {Segment, SegmentButton} from '../components/segment/segment'; import {RadioGroup, RadioButton} from '../components/radio/radio'; -import {Searchbar} from '../components/searchbar/searchbar'; +import {Searchbar, SearchbarInput} from '../components/searchbar/searchbar'; import {Nav} from '../components/nav/nav'; import {NavPush, NavPop} from '../components/nav/nav-push'; import {NavRouter} from '../components/nav/nav-router'; @@ -77,6 +77,7 @@ export const IONIC_DIRECTIVES = [ // Forms Searchbar, + SearchbarInput, Segment, SegmentButton, Checkbox, From ff8169cb0a891b690dfd1f3a890c6e26c37af51b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 17:55:44 -0500 Subject: [PATCH 2/8] Merge branch 'master' into searchbar-fix # Conflicts: # ionic/components/searchbar/searchbar.ts --- gulpfile.js | 425 +++++++++--------- ionic/components.ts | 77 ++-- ionic/components/action-sheet/action-sheet.ts | 3 +- ionic/components/app/app.ts | 3 +- ionic/components/app/id.ts | 2 +- ionic/components/app/test/storage/index.ts | 3 +- ionic/components/blur/blur.ts | 2 +- ionic/components/button/button.ts | 2 +- ionic/components/checkbox/checkbox.ts | 3 +- ionic/components/checkbox/test/basic/index.ts | 3 +- ionic/components/content/content.ts | 2 +- ionic/components/icon/icon.ts | 2 +- ionic/components/ion.ts | 5 +- ionic/components/item/item-sliding-gesture.ts | 6 +- ionic/components/item/item-sliding.ts | 2 +- ionic/components/item/item.ts | 2 +- ionic/components/list/list.ts | 4 +- ionic/components/list/test/infinite/index.ts | 4 +- ionic/components/menu/menu-close.ts | 2 +- ionic/components/menu/menu-gestures.ts | 4 +- ionic/components/menu/menu-toggle.ts | 2 +- ionic/components/menu/menu-types.ts | 2 +- ionic/components/menu/menu.ts | 2 +- ionic/components/modal/modal.ts | 4 +- ionic/components/nav/nav-controller.ts | 4 +- ionic/components/nav/nav-push.ts | 2 +- ionic/components/nav/nav-router.ts | 2 +- ionic/components/nav/nav.ts | 2 +- ionic/components/nav/swipe-back.ts | 2 +- ionic/components/nav/test/basic/index.ts | 2 +- ionic/components/navbar/navbar.ts | 2 +- .../components/overlay/overlay-controller.ts | 2 +- ionic/components/overlay/overlay.ts | 2 +- ionic/components/popup/popup.ts | 4 +- ionic/components/radio/radio.ts | 3 +- ionic/components/radio/test/basic/index.ts | 2 +- ionic/components/scroll/pull-to-refresh.ts | 7 +- ionic/components/scroll/scroll.ts | 4 +- ionic/components/searchbar/searchbar.ts | 3 +- .../components/searchbar/test/basic/index.ts | 2 +- .../searchbar/test/floating/index.ts | 2 +- .../components/searchbar/test/model/index.ts | 2 +- ionic/components/segment/segment.ts | 3 +- ionic/components/segment/test/basic/index.ts | 2 +- ionic/components/segment/test/nav/index.ts | 2 +- .../show-hide-when/show-hide-when.ts | 4 +- .../show-hide-when/test/basic/index.ts | 2 +- ionic/components/slides/slides.ts | 13 +- ionic/components/slides/test/scroll/index.ts | 1 - ionic/components/tabs/tab.ts | 2 +- ionic/components/tabs/tabs.ts | 3 +- ionic/components/tabs/test/ghost/index.ts | 2 +- ionic/components/tap-click/tap-click.ts | 2 +- ionic/components/text-input/label.ts | 2 +- .../text-input/test/form-inputs/index.ts | 2 +- .../text-input/test/inline-labels/index.ts | 1 - ionic/components/text-input/text-input.ts | 3 +- ionic/components/toggle/test/basic/index.ts | 2 +- ionic/components/toggle/toggle.ts | 3 +- ionic/components/toolbar/toolbar.ts | 2 +- ionic/config/bootstrap.ts | 2 +- ionic/config/decorators.ts | 158 +------ ionic/config/decorators/app.ts | 45 ++ ionic/config/decorators/config-component.ts | 39 ++ ionic/config/decorators/page.ts | 75 ++++ ionic/config/directives.ts | 3 +- ionic/gestures/drag-gesture.ts | 4 +- ionic/gestures/gesture.ts | 4 +- ionic/gestures/slide-edge-gesture.ts | 2 +- ionic/gestures/slide-gesture.ts | 4 +- ionic/ionic.ts | 14 +- ionic/platform/storage/sql.ts | 2 +- ionic/translation/translate.ts | 2 +- ionic/translation/translate_pipe.ts | 2 +- ionic/util.ts | 4 +- ionic/util/events.ts | 2 +- ionic/util/form.ts | 2 +- ionic/util/keyboard.ts | 2 +- package.json | 7 +- scripts/build/config.js | 1 + scripts/e2e/e2e.template.html | 22 +- scripts/e2e/webpack.config.js | 37 ++ scripts/npm/ionic.webpack.config.js | 32 ++ tsconfig.json | 37 +- 84 files changed, 634 insertions(+), 534 deletions(-) create mode 100644 ionic/config/decorators/app.ts create mode 100644 ionic/config/decorators/config-component.ts create mode 100644 ionic/config/decorators/page.ts create mode 100644 scripts/e2e/webpack.config.js create mode 100644 scripts/npm/ionic.webpack.config.js diff --git a/gulpfile.js b/gulpfile.js index de01405bcb..c8474ce1d8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -12,99 +12,44 @@ var tsc = require('gulp-typescript'); var cache = require('gulp-cached'); var minimist = require('minimist'); -function getBabelOptions(moduleName, moduleType) { - return { - optional: ['es7.decorators'], - modules: moduleType || "system", - moduleIds: true, - getModuleId: function(name) { - if (moduleName == "e2e"){ - return name.replace(/^.*\/test\/[^\/]*\//, ''); - } - else if (moduleName == "demos"){ - return name.replace(/^(.*?)\//, '') - } - - return moduleName + '/' + name.split('/test').join(''); - } - } -} - -function buildDemoBundle(opts, done) { - var glob = require('glob'); - var webpack = require('webpack'); - var path = require('path'); - var _ = require('lodash'); - - var numWebpacks = 0; - var fp = 'dist/demos/'+opts.demo+'/index.js'; - if (opts.demo == 'api') { - fp = "dist/demos/**/index.js"; - } - - return glob(fp, function(err, files){ - files.forEach(function(file){ - var config = require('./scripts/demos/webpack.config.js'); - - // add our bundle entry, removing previous if necessary - // since config is cached - if (config.entry.length > 5) { - config.entry.pop(); - } - config.entry.push('./' + file); - config.output = { - filename: path.dirname(file) + '/bundle.js' - } - - // pretty sure this is a race, but it works - numWebpacks++; - webpack(config, function(err, stats){ - // var statsOptions = { - // 'colors': true, - // 'modules': true, - // 'chunks': false, - // 'exclude': ['node_modules'], - // 'errorDetails': true - // } - // console.log(stats.toString(statsOptions)); - if (--numWebpacks === 0) done(); - }) - }) - - }); -} - -var tscOptions = { - target: 'ES6', - allowNonTsExtensions: true, - isolatedModules: true, - emitDecoratorMetadata: true, - experimentalDecorators: true, - noEmitOnError: false, // ignore errors - rootDir: '.' -} -var tscReporter = { - error: function (error) { - console.error(error.message); - } -}; - var flagConfig = { string: ['port', 'version', 'ngVersion', 'animations'], boolean: ['dry-run'], alias: {'p': 'port', 'v': 'version', 'a': 'ngVersion'}, default: { port: 8000 } }; - - var flags = minimist(process.argv.slice(2), flagConfig); +var tscOptions = { + emitDecoratorMetadata: true, + experimentalDecorators: true, + target: "es5", + module: "commonjs", + declaration: true, + outDir: "dist" +} + +var tscOptionsNoTypeCheck = { + emitDecoratorMetadata: true, + experimentalDecorators: true, + target: "es5", + module: "commonjs", + isolatedModules: true +} + +var tscReporter = { + error: function (error) { + // TODO + // suppress type errors until we convert everything to TS + // console.error(error.message); + } +}; + gulp.task('build', function(done) { runSequence( + 'copy.web-animations', 'bundle', - 'e2e', - 'sass', - 'fonts', + ['e2e', 'sass', 'fonts'], done ); }) @@ -125,18 +70,7 @@ gulp.task('watch', function(done) { ], function(file) { if (file.event === "unlink") { - var basePath = file.base.substring(0, file.base.lastIndexOf("ionic/")); - var relPath = file.history[0].replace(basePath, "").replace(".ts", ".js"); - - var es6Path = basePath + "dist/src/es6/" + relPath; - var commonPath = basePath + "dist/src/es5/common/" + relPath; - var systemPath = basePath + "dist/src/es5/system/" + relPath; - - delete cache.caches.transpile[file.history[0]]; - - del([es6Path, commonPath, systemPath], function(){ - gulp.start('bundle'); - }); + deleteFile(file); } else { gulp.start('bundle'); } @@ -144,21 +78,7 @@ gulp.task('watch', function(done) { ); watch('ionic/components/*/test/**/*', function(file) { - if (file.event === "unlink") { - var paths = file.history[0].split("ionic/components/"); - var basePath = paths[0], - relPath = paths[1].split("/test").join("").replace(".ts", ".js"); - - var distPath = basePath + "dist/e2e/" + relPath; - - delete cache.caches.e2e[file.history[0]]; - - del([distPath], function(){ - gulp.start('e2e'); - }); - } else { - gulp.start('e2e'); - } + gulp.start('e2e'); }); watch('ionic/**/*.scss', function() { @@ -168,13 +88,25 @@ gulp.task('watch', function(done) { done(); } ); -}); + function deleteFile(file) { + var basePath = file.base.substring(0, file.base.lastIndexOf("ionic/")); + var relativePath = file.history[0].replace(file.base, '').replace('.ts', '.js'); + + var filePath = basePath + 'dist/' + relativePath; + var typingPath = filePath.replace('.js', '.d.ts'); + + delete cache.caches.transpile[file.history[0]]; + + del([filePath, typingPath], function(){ + gulp.start('bundle'); + }); + } +}); gulp.task('serve', function() { var connect = require('gulp-connect'); connect.server({ - root: 'dist', port: flags.port, livereload: false }); @@ -184,56 +116,74 @@ gulp.task('clean', function(done) { del(['dist/**', '!dist'], done); }); -function transpile(moduleType) { - var stream = gulp.src([ +function tsResult(options){ + return gulp.src([ 'ionic/**/*.ts', '!ionic/components/*/test/**/*', '!ionic/util/test/*' ]) - .pipe(cache('transpile', { optimizeMemory: true })) - .pipe(tsc(tscOptions, null, tscReporter)) - .on('error', function(error) { - stream.emit('end'); - }) - .pipe(gulp.dest('dist/src/es6/ionic')) - .pipe(babel(getBabelOptions('ionic', moduleType))) - .on('error', function (err) { - console.log("ERROR: " + err.message); - this.emit('end'); - }) - .pipe(gulp.dest('dist/src/es5/' + moduleType + '/ionic')) - - return stream; + .pipe(cache('transpile', { optimizeMemory: true })) + .pipe(tsc(options, undefined, tscReporter)) + .on('error', function(error) { + console.log(error.message); + this.emit('end'); + }); } - -gulp.task('transpile.system', function() { return transpile("system"); }); -gulp.task('transpile.common', function() { - // necessary for publish task, remove if we ever do incremental builds with cjs - cache.caches && delete cache.caches.transpile; - return transpile("common"); +gulp.task('transpile.no-typecheck', function(){ + return tsResult(tscOptionsNoTypeCheck) + .pipe(gulp.dest('dist')); }); -gulp.task('transpile', ['transpile.system']); -gulp.task('bundle.ionic', ['transpile'], function() { - var insert = require('gulp-insert'); - var concat = require('gulp-concat'); +gulp.task('transpile.typecheck', function(){ + var merge = require('merge2'); - var prepend = []; + var result = tsResult(tscOptions); - // force the web animations api polyfill to kick in - if (flags.animations == 'polyfill') { - prepend.push('window.Element.prototype.animate=undefined;'); - } + // merge definition and source streams + return merge([ + result.dts, + result.js + ]) + .pipe(gulp.dest('dist')); +}) - return gulp.src([ - 'node_modules/es6-shim/es6-shim.min.js', - 'dist/src/es5/system/ionic/**/*.js' - ]) - .pipe(concat('ionic.js')) - .pipe(insert.prepend(prepend.join('\n'))) - .pipe(gulp.dest('dist/js/')); - //TODO minify + sourcemaps -}); +gulp.task('transpile', ['transpile.no-typecheck']); + +gulp.task('bundle', ['transpile'], function(done){ + //TODO + // if (flags.animations == 'polyfill') { + // prepend.push('window.Element.prototype.animate=undefined;'); + // } + + var config = require('./scripts/npm/ionic.webpack.config.js'); + bundle({ + config: config, + cb: done, + stats: true + }); +}) + +function bundle(args) { + var webpack = require('webpack'); + var path = require('path'); + + var numTasks = args.numTasks ? args.numTasks : 0; + + webpack(args.config, function(err, stats){ + if (args.stats) { + var statsOptions = { + 'colors': true, + 'modules': false, + 'chunks': false, + 'exclude': ['node_module'], + 'errorDetails': true + } + console.log(stats.toString(statsOptions)); + } + + if (numTasks === 0 && args.cb) args.cb(); + }) +} gulp.task('temp.hack', function(){ var fs = require('fs'); @@ -262,17 +212,9 @@ gulp.task('temp.hack', function(){ fs.writeFileSync(file, myHackedFileThatYouLove, 'utf8'); }); -gulp.task('bundle', ['bundle.ionic'], function() { - var concat = require('gulp-concat'); - - return gulp.src(buildConfig.scripts) - .pipe(concat('ionic.bundle.js')) - .pipe(gulp.dest('dist/js')); -}) - gulp.task('tests', function() { return gulp.src('ionic/**/test/**/*.spec.ts') - .pipe(tsc(tscOptions, null, tscReporter)) + .pipe(tsc(tscOptions, undefined, tscReporter)) .pipe(babel(getBabelOptions('dist/tests'))) .pipe(rename(function(file) { var regex = new RegExp(path.sep + 'test(' + path.sep + '|$)'); @@ -281,30 +223,19 @@ gulp.task('tests', function() { .pipe(gulp.dest('dist/tests')) }) -gulp.task('e2e', function() { +gulp.task('e2e.build', function() { var gulpif = require('gulp-if'); - var lazypipe = require('lazypipe'); + var merge = require('merge2'); var _ = require('lodash'); var fs = require('fs'); var VinylFile = require('vinyl'); - var buildTest = lazypipe() - //.pipe(traceur, traceurOptions) - .pipe(tsc, tscOptions, null, tscReporter) - .pipe(babel, getBabelOptions('e2e')) - - var buildE2ETest = lazypipe() - //.pipe(traceur, traceurOptions) - .pipe(tsc, tscOptions, null, tscReporter) - .pipe(babel) - var indexTemplate = _.template( fs.readFileSync('scripts/e2e/e2e.template.html') )({ - buildConfig: buildConfig - + buildConfig: buildConfig }) - var testTemplate = _.template( fs.readFileSync('scripts/e2e/e2e.template.js') ) + var testTemplate = _.template(fs.readFileSync('scripts/e2e/e2e.template.js')); var platforms = [ 'android', @@ -312,20 +243,34 @@ gulp.task('e2e', function() { ]; // Get each test folder with gulp.src - return gulp.src(['ionic/components/*/test/*/**/*', '!ionic/components/*/test/*/**/*.spec.ts']) - .pipe(cache('e2e', { optimizeMemory: true })) - .pipe(gulpif(/e2e.ts$/, buildE2ETest())) - .pipe(gulpif(/.ts$/, buildTest())) - .on('error', function (err) { - console.log("ERROR: " + err.message); + var tsResult = gulp.src([ + 'ionic/components/*/test/*/**/*.ts', + '!ionic/components/*/test/*/**/*.spec.ts' + ]) + .pipe(cache('e2e.ts')) + .pipe(tsc(tscOptionsNoTypeCheck, undefined, tscReporter)) + .on('error', function(error) { + console.log(error.message); this.emit('end'); }) - .pipe(gulpif(/index.js$/, createIndexHTML())) //TSC changes .ts to .js - .pipe(rename(function(file) { - file.dirname = file.dirname.replace(path.sep + 'test' + path.sep, path.sep) - })) + .pipe(gulpif(/index.js$/, createIndexHTML())) .pipe(gulpif(/e2e.js$/, createPlatformTests())) - .pipe(gulp.dest('dist/e2e/')) + + var testFiles = gulp.src([ + 'ionic/components/*/test/*/**/*', + '!ionic/components/*/test/*/**/*.ts' + ]) + .pipe(cache('e2e.files')) + + return merge([ + tsResult, + testFiles + ]) + .pipe(rename(function(file) { + var sep = path.sep; + file.dirname = file.dirname.replace(sep + 'test' + sep, sep) + })) + .pipe(gulp.dest('dist/e2e/')); function createIndexHTML() { return through2.obj(function(file, enc, next) { @@ -361,30 +306,54 @@ gulp.task('e2e', function() { } }); +gulp.task('e2e.bundle', ['e2e.build'], function(done) { + var glob = require('glob'); + var webpack = require('webpack'); + var path = require('path'); + var _ = require('lodash'); + + return glob("dist/e2e/**/index.js", function(err, files){ + var numTasks = files.length; + files.forEach(function(file){ + var config = require('./scripts/e2e/webpack.config.js'); + + // add our bundle entry, removing previous if necessary + // since config is cached + if (config.entry.length > 1) { + config.entry.pop(); + } + config.entry.push('./' + file); + config.output = { + libraryTarget: 'commonjs2', + filename: path.dirname(file) + '/bundle.js' + } + + bundle({ + config: config, + numTasks: --numTasks, + stats: false, + cb: done + }); + }) + }) +}); + +gulp.task('e2e', ['e2e.bundle']); + gulp.task('sass', function() { var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); - gulp.src('ionic/ionic.ios.scss') - .pipe(sass() - .on('error', sass.logError) - ) - .pipe(autoprefixer(buildConfig.autoprefixer)) - .pipe(gulp.dest('dist/css/')); - - gulp.src('ionic/ionic.md.scss') - .pipe(sass() - .on('error', sass.logError) - ) - .pipe(autoprefixer(buildConfig.autoprefixer)) - .pipe(gulp.dest('dist/css/')); - - return gulp.src('ionic/ionic.scss') - .pipe(sass() - .on('error', sass.logError) - ) - .pipe(autoprefixer(buildConfig.autoprefixer)) - .pipe(gulp.dest('dist/css/')); + gulp.src([ + 'ionic/ionic.ios.scss', + 'ionic/ionic.md.scss', + 'ionic/ionic.scss' + ]) + .pipe(sass() + .on('error', sass.logError) + ) + .pipe(autoprefixer(buildConfig.autoprefixer)) + .pipe(gulp.dest('dist/bundles/')); }); gulp.task('fonts', function() { @@ -459,7 +428,7 @@ gulp.task('build.demos', function(){ var VinylFile = require('vinyl'); var buildTest = lazypipe() - .pipe(tsc, tscOptions, null, tscReporter) + .pipe(tsc, tscOptions, undefined, tscReporter) .pipe(babel, getBabelOptions('demos', 'common')) // .pipe(babel, getBabelOptions('demos')) @@ -525,3 +494,45 @@ gulp.task('watch:demos', function() { gulp.start('demos'); }); }); + +function buildDemoBundle(opts, done) { + var glob = require('glob'); + var webpack = require('webpack'); + var path = require('path'); + var _ = require('lodash'); + + var fp = 'dist/demos/'+opts.demo+'/index.js'; + if (opts.demo == 'api') { + fp = "dist/demos/**/index.js"; + } + + return glob(fp, function(err, files){ + var numTasks = files.length; + files.forEach(function(file){ + var config = require('./scripts/demos/webpack.config.js'); + + // add our bundle entry, removing previous if necessary + // since config is cached + if (config.entry.length > 4) { + config.entry.pop(); + } + config.entry.push('./' + file); + config.output = { + filename: path.dirname(file) + '/bundle.js' + } + + webpack(config, function(err, stats){ + // var statsOptions = { + // 'colors': true, + // 'modules': true, + // 'chunks': false, + // 'exclude': ['node_modules'], + // 'errorDetails': true + // } + // console.log(stats.toString(statsOptions)); + if (--numTasks === 0) done(); + }) + }) + + }); +} diff --git a/ionic/components.ts b/ionic/components.ts index 13fdaab7f3..832d43e319 100644 --- a/ionic/components.ts +++ b/ionic/components.ts @@ -1,39 +1,38 @@ - -export * from 'ionic/components/app/app' -export * from 'ionic/components/app/id' -export * from 'ionic/components/action-sheet/action-sheet' -export * from 'ionic/components/blur/blur' -export * from 'ionic/components/button/button' -export * from 'ionic/components/checkbox/checkbox' -export * from 'ionic/components/content/content' -export * from 'ionic/components/icon/icon' -export * from 'ionic/components/item/item' -export * from 'ionic/components/item/item-sliding' -export * from 'ionic/components/menu/menu' -export * from 'ionic/components/menu/menu-types' -export * from 'ionic/components/menu/menu-toggle' -export * from 'ionic/components/menu/menu-close' -export * from 'ionic/components/text-input/text-input' -export * from 'ionic/components/text-input/label' -export * from 'ionic/components/list/list' -export * from 'ionic/components/show-hide-when/show-hide-when' -export * from 'ionic/components/modal/modal' -export * from 'ionic/components/nav/nav' -export * from 'ionic/components/nav/nav-controller' -export * from 'ionic/components/nav/view-controller' -export * from 'ionic/components/nav/nav-push' -export * from 'ionic/components/nav/nav-router' -export * from 'ionic/components/navbar/navbar' -export * from 'ionic/components/overlay/overlay' -export * from 'ionic/components/popup/popup' -export * from 'ionic/components/slides/slides' -export * from 'ionic/components/radio/radio' -export * from 'ionic/components/scroll/scroll' -export * from 'ionic/components/scroll/pull-to-refresh' -export * from 'ionic/components/searchbar/searchbar' -export * from 'ionic/components/segment/segment' -export * from 'ionic/components/tabs/tabs' -export * from 'ionic/components/tabs/tab' -export * from 'ionic/components/tap-click/tap-click' -export * from 'ionic/components/toggle/toggle' -export * from 'ionic/components/toolbar/toolbar' +export * from './components/app/app' +export * from './components/app/id' +export * from './components/action-sheet/action-sheet' +export * from './components/blur/blur' +export * from './components/button/button' +export * from './components/checkbox/checkbox' +export * from './components/content/content' +export * from './components/icon/icon' +export * from './components/item/item' +export * from './components/item/item-sliding' +export * from './components/menu/menu' +export * from './components/menu/menu-types' +export * from './components/menu/menu-toggle' +export * from './components/menu/menu-close' +export * from './components/text-input/text-input' +export * from './components/text-input/label' +export * from './components/list/list' +export * from './components/show-hide-when/show-hide-when' +export * from './components/modal/modal' +export * from './components/nav/nav' +export * from './components/nav/nav-controller' +export * from './components/nav/view-controller' +export * from './components/nav/nav-push' +export * from './components/nav/nav-router' +export * from './components/navbar/navbar' +export * from './components/overlay/overlay' +export * from './components/popup/popup' +export * from './components/slides/slides' +export * from './components/radio/radio' +export * from './components/scroll/scroll' +export * from './components/scroll/pull-to-refresh' +export * from './components/searchbar/searchbar' +export * from './components/segment/segment' +export * from './components/tabs/tabs' +export * from './components/tabs/tab' +export * from './components/tap-click/tap-click' +export * from './components/toggle/toggle' +export * from './components/toolbar/toolbar' diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index a59d9280d8..de365a83a6 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -5,7 +5,8 @@ * @description * The ActionSheet is a modal menu with options to select based on an action. */ -import {Component, Injectable, Renderer, NgFor, NgIf} from 'angular2/angular2'; +import {Component, Injectable, Renderer} from 'angular2/core'; +import {NgFor, NgIf} from 'angular2/common'; import {OverlayController} from '../overlay/overlay-controller'; import {Config} from '../../config/config'; diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 2c2fdbab73..45b3e9597c 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -1,4 +1,5 @@ -import {Injectable, NgZone, Title} from 'angular2/angular2'; +import {Injectable, NgZone} from 'angular2/core'; +import {Title} from 'angular2/platform/browser'; import {Config} from '../../config/config'; import {ClickBlock} from '../../util/click-block'; diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts index c89f3f1f5e..3996f55228 100644 --- a/ionic/components/app/id.ts +++ b/ionic/components/app/id.ts @@ -1,4 +1,4 @@ -import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2'; +import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/core'; import {IonicApp} from './app'; diff --git a/ionic/components/app/test/storage/index.ts b/ionic/components/app/test/storage/index.ts index 1f34536d9c..0c60345a83 100644 --- a/ionic/components/app/test/storage/index.ts +++ b/ionic/components/app/test/storage/index.ts @@ -1,4 +1,5 @@ -import {Component, Control, ControlGroup} from 'angular2/angular2'; +import {Component} from 'angular2/core'; +import {Control, ControlGroup} from 'angular2/common'; import {App, Storage, LocalStorage, SqlStorage} from 'ionic/ionic'; diff --git a/ionic/components/blur/blur.ts b/ionic/components/blur/blur.ts index 928a62142f..a8e312d88a 100644 --- a/ionic/components/blur/blur.ts +++ b/ionic/components/blur/blur.ts @@ -1,4 +1,4 @@ -import {Directive, Renderer, ElementRef} from 'angular2/angular2'; +import {Directive, Renderer, ElementRef} from 'angular2/core'; /** diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index 37adca5541..8b96cb7b21 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2'; +import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/core'; import {Config} from '../../config/config'; import {Toolbar} from '../toolbar/toolbar'; diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index b752798aed..4b8307d4e1 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -1,4 +1,5 @@ -import {Component, Directive, Optional, NgControl, ElementRef} from 'angular2/angular2'; +import {Component, Directive, Optional, ElementRef} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Ion} from '../ion'; import {Form} from '../../util/form'; diff --git a/ionic/components/checkbox/test/basic/index.ts b/ionic/components/checkbox/test/basic/index.ts index 49e605090c..751eba08ea 100644 --- a/ionic/components/checkbox/test/basic/index.ts +++ b/ionic/components/checkbox/test/basic/index.ts @@ -9,7 +9,8 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; + @App({ templateUrl: 'main.html' diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index 4f3cc7c4bb..7fe59b2853 100644 --- a/ionic/components/content/content.ts +++ b/ionic/components/content/content.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Optional, NgZone} from 'angular2/angular2'; +import {Component, ElementRef, Optional, NgZone} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 44543c5c3b..28a1abb5c4 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Attribute, Renderer} from 'angular2/angular2'; +import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core'; import {Config} from '../../config/config'; diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts index fc67620d11..a92669b75b 100644 --- a/ionic/components/ion.ts +++ b/ionic/components/ion.ts @@ -1,6 +1,7 @@ +import {ElementRef} from 'angular2/core'; import {Config} from '../config/config'; -import {isArray} from 'ionic/util'; -import * as dom from 'ionic/util/dom'; +import {isArray} from '../util'; +import * as dom from '../util/dom'; /** diff --git a/ionic/components/item/item-sliding-gesture.ts b/ionic/components/item/item-sliding-gesture.ts index 06abc5aefa..502038fe0c 100644 --- a/ionic/components/item/item-sliding-gesture.ts +++ b/ionic/components/item/item-sliding-gesture.ts @@ -1,8 +1,8 @@ -import {Hammer} from 'ionic/gestures/hammer'; -import {DragGesture} from 'ionic/gestures/drag-gesture'; +import {Hammer} from '../../gestures/hammer'; +import {DragGesture} from '../../gestures/drag-gesture'; import {List} from '../list/list'; -import {CSS, raf, closest} from 'ionic/util/dom'; +import {CSS, raf, closest} from '../../util/dom'; export class ItemSlidingGesture extends DragGesture { diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts index 66d294d1df..d6688f6630 100644 --- a/ionic/components/item/item-sliding.ts +++ b/ionic/components/item/item-sliding.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Optional} from 'angular2/angular2'; +import {Component, ElementRef, Optional} from 'angular2/core'; import {List} from '../list/list'; diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index d89d9e181d..c24ad6f3e7 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -1,4 +1,4 @@ -import {Component} from 'angular2/angular2'; +import {Component} from 'angular2/core'; /** diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index 9168239397..b57e0d2e41 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -1,10 +1,10 @@ -import {Directive, ElementRef, NgZone} from 'angular2/angular2'; +import {Directive, ElementRef, NgZone} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; import {ListVirtualScroll} from './virtual'; import {ItemSlidingGesture} from '../item/item-sliding-gesture'; -import * as util from 'ionic/util'; +import * as util from '../../util'; /** * The List is a widely used interface element in almost any mobile app, and can include diff --git a/ionic/components/list/test/infinite/index.ts b/ionic/components/list/test/infinite/index.ts index ffd2f0623c..9164945f91 100644 --- a/ionic/components/list/test/infinite/index.ts +++ b/ionic/components/list/test/infinite/index.ts @@ -1,5 +1,5 @@ -import {ProtoViewRef, ViewContainerRef} from 'angular2/angular2' -import {Directive, Host, forwardRef} from 'angular2/angular2'; +import {ProtoViewRef, ViewContainerRef} from 'angular2/core' +import {Directive, Host, forwardRef} from 'angular2/core'; import {App, List} from 'ionic/ionic'; diff --git a/ionic/components/menu/menu-close.ts b/ionic/components/menu/menu-close.ts index 71ff611a66..ace10bf7f5 100644 --- a/ionic/components/menu/menu-close.ts +++ b/ionic/components/menu/menu-close.ts @@ -1,4 +1,4 @@ -import {Directive} from 'angular2/angular2'; +import {Directive} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Menu} from './menu'; diff --git a/ionic/components/menu/menu-gestures.ts b/ionic/components/menu/menu-gestures.ts index ea4f7bb0ff..851fd38274 100644 --- a/ionic/components/menu/menu-gestures.ts +++ b/ionic/components/menu/menu-gestures.ts @@ -1,9 +1,9 @@ import {Menu} from './menu'; import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture'; -import * as util from 'ionic/util'; +import * as util from '../../util'; -class MenuContentGesture extends SlideEdgeGesture { +export class MenuContentGesture extends SlideEdgeGesture { constructor(menu: Menu, targetEl: Element, options = {}) { super(targetEl, util.extend({ diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts index fb212f3f47..676717b719 100644 --- a/ionic/components/menu/menu-toggle.ts +++ b/ionic/components/menu/menu-toggle.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, Optional} from 'angular2/angular2'; +import {Directive, ElementRef, Optional} from 'angular2/core'; import {IonicApp} from '../app/app'; import {ViewController} from '../nav/view-controller'; diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts index 6396604c32..1393cbe4c1 100644 --- a/ionic/components/menu/menu-types.ts +++ b/ionic/components/menu/menu-types.ts @@ -1,5 +1,5 @@ import {Menu} from './menu'; -import {Animation} from 'ionic/animations/animation'; +import {Animation} from '../../animations/animation'; /** diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index 49e32d47b1..927767ee8b 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -1,4 +1,4 @@ -import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/angular2'; +import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/core'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 83f611447f..dc527d3902 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -1,9 +1,9 @@ -import {Injectable} from 'angular2/angular2'; +import {Injectable, Type} from 'angular2/core'; import {OverlayController} from '../overlay/overlay-controller'; import {Config} from '../../config/config'; import {Animation} from '../../animations/animation'; -import {extend} from 'ionic/util'; +import {extend} from '../../util'; /** * The Modal is a content pane that can go over the user's current page. diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 0ef0f998e5..7042c9008e 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,5 +1,5 @@ -import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/angular2'; -import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/angular2'; +import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/core'; +import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/instrumentation'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; diff --git a/ionic/components/nav/nav-push.ts b/ionic/components/nav/nav-push.ts index 0a1cbaeef9..b0e697d33c 100644 --- a/ionic/components/nav/nav-push.ts +++ b/ionic/components/nav/nav-push.ts @@ -1,4 +1,4 @@ -import {Directive, Optional} from 'angular2/angular2'; +import {Directive, Optional} from 'angular2/core'; import {NavController} from './nav-controller'; import {NavRegistry} from './nav-registry'; diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts index a7c17beac1..72f1382792 100644 --- a/ionic/components/nav/nav-router.ts +++ b/ionic/components/nav/nav-router.ts @@ -1,4 +1,4 @@ -import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/angular2'; +import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/core'; import { RouterOutlet, Router, diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 94ae9a877d..510e697a08 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/nav/swipe-back.ts b/ionic/components/nav/swipe-back.ts index 96b59168cd..3f1b29c15b 100644 --- a/ionic/components/nav/swipe-back.ts +++ b/ionic/components/nav/swipe-back.ts @@ -1,4 +1,4 @@ -import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; +import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture'; export class SwipeBackGesture extends SlideEdgeGesture { diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index 4352bc6bc0..ad60028ea3 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -1,4 +1,4 @@ -import {Component} from 'angular2/angular2'; +import {Component} from 'angular2/core'; import {App, NavController} from 'ionic/ionic'; import {Page, Config, IonicApp} from 'ionic/ionic'; import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/ionic'; diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts index 517ff91d72..e1db15b35b 100644 --- a/ionic/components/navbar/navbar.ts +++ b/ionic/components/navbar/navbar.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/angular2'; +import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/core'; import {Ion} from '../ion'; import {Icon} from '../icon/icon'; diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts index d38b150911..4435381af8 100644 --- a/ionic/components/overlay/overlay-controller.ts +++ b/ionic/components/overlay/overlay-controller.ts @@ -1,5 +1,5 @@ import {Animation} from '../../animations/animation'; -import {extend} from 'ionic/util'; +import {extend} from '../../util'; /** diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index bb708d182f..f21f461fd4 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index f2cd107d60..c5b37547fe 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -1,5 +1,5 @@ -import {FORM_DIRECTIVES, NgControl, NgControlGroup, - Component, ElementRef, Injectable, NgClass, NgIf, NgFor, Renderer} from 'angular2/angular2'; +import {Component, ElementRef, Injectable, Renderer} from 'angular2/core'; +import {NgClass, NgIf, NgFor, FORM_DIRECTIVES} from 'angular2/common'; import {OverlayController} from '../overlay/overlay-controller'; import {Config} from '../../config/config'; diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index e890b6a624..777b500056 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -1,4 +1,5 @@ -import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2'; +import {Component, Directive, ElementRef, Host, Optional, Query, QueryList} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Config} from '../../config/config'; import {Ion} from '../ion'; diff --git a/ionic/components/radio/test/basic/index.ts b/ionic/components/radio/test/basic/index.ts index a14701f71b..566d380a24 100644 --- a/ionic/components/radio/test/basic/index.ts +++ b/ionic/components/radio/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts index 2dc200cb01..bb5816234b 100644 --- a/ionic/components/scroll/pull-to-refresh.ts +++ b/ionic/components/scroll/pull-to-refresh.ts @@ -1,8 +1,9 @@ -import {Component, NgIf, NgClass, ElementRef, EventEmitter, Host} from 'angular2/angular2' +import {Component, ElementRef, EventEmitter, Host} from 'angular2/core' +import {NgIf, NgClass} from 'angular2/common'; import {Content} from '../content/content'; -import * as util from 'ionic/util'; -import {raf, ready, CSS} from 'ionic/util/dom'; +import * as util from '../../util'; +import {raf, ready, CSS} from '../../util/dom'; /** diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts index a6bcc1ae6d..ec0bf9dc54 100644 --- a/ionic/components/scroll/scroll.ts +++ b/ionic/components/scroll/scroll.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, onInit} from 'angular2/angular2'; +import {Component, ElementRef, onInit} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; @@ -6,7 +6,7 @@ import {Gesture} from '../../gestures/gesture'; import {CSS} from '../../util/dom'; import {Animation} from '../../animations/animation'; -import * as util from 'ionic/util'; +import * as util from '../../util'; /** * @name Scroll diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 54a263e1ad..3266be9e36 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,4 +1,5 @@ -import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass, Directive, Host, forwardRef, ViewChild} from 'angular2/angular2'; +import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild} from 'angular2/core'; +import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common'; import {Ion} from '../ion'; import {Config} from '../../config/config'; diff --git a/ionic/components/searchbar/test/basic/index.ts b/ionic/components/searchbar/test/basic/index.ts index fe6524bd8f..90974c444e 100644 --- a/ionic/components/searchbar/test/basic/index.ts +++ b/ionic/components/searchbar/test/basic/index.ts @@ -1,4 +1,4 @@ -import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/searchbar/searchbar'; diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index 408cb474c8..53120a6352 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/searchbar/searchbar'; diff --git a/ionic/components/searchbar/test/model/index.ts b/ionic/components/searchbar/test/model/index.ts index a240add794..9aeda952f4 100644 --- a/ionic/components/searchbar/test/model/index.ts +++ b/ionic/components/searchbar/test/model/index.ts @@ -1,4 +1,4 @@ -import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; import {SearchPipe} from 'ionic/components/searchbar/searchbar'; diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index d5793f67ff..122b045198 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -1,4 +1,5 @@ -import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2'; +import {Directive, Renderer, ElementRef, Host, Optional} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Ion} from '../ion'; import {Config} from '../../config/config'; diff --git a/ionic/components/segment/test/basic/index.ts b/ionic/components/segment/test/basic/index.ts index 635578c552..ae4873cca8 100644 --- a/ionic/components/segment/test/basic/index.ts +++ b/ionic/components/segment/test/basic/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App} from 'ionic/ionic'; diff --git a/ionic/components/segment/test/nav/index.ts b/ionic/components/segment/test/nav/index.ts index e5474d8a48..6722218006 100644 --- a/ionic/components/segment/test/nav/index.ts +++ b/ionic/components/segment/test/nav/index.ts @@ -1,4 +1,4 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2'; +import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common'; import {App, Page} from 'ionic/ionic'; diff --git a/ionic/components/show-hide-when/show-hide-when.ts b/ionic/components/show-hide-when/show-hide-when.ts index 3c150bdf25..f8c633d3ab 100644 --- a/ionic/components/show-hide-when/show-hide-when.ts +++ b/ionic/components/show-hide-when/show-hide-when.ts @@ -1,9 +1,9 @@ -import {Directive, Attribute, NgZone} from 'angular2/angular2' +import {Directive, Attribute, NgZone} from 'angular2/core' import {Platform} from '../../platform/platform'; -class DisplayWhen { +export class DisplayWhen { constructor(conditions, platform, ngZone) { this.isMatch = false; diff --git a/ionic/components/show-hide-when/test/basic/index.ts b/ionic/components/show-hide-when/test/basic/index.ts index 49e605090c..611ee2dc2a 100644 --- a/ionic/components/show-hide-when/test/basic/index.ts +++ b/ionic/components/show-hide-when/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ templateUrl: 'main.html' diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 5ec9763846..2fa2d72d70 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -1,13 +1,14 @@ -import {Directive, Component, ElementRef, Host, NgClass, EventEmitter} from 'angular2/angular2'; +import {Directive, Component, ElementRef, Host, EventEmitter} from 'angular2/core'; +import {NgClass} from 'angular2/common'; import {Ion} from '../ion'; -import {Animation} from 'ionic/animations/animation'; -import {Gesture} from 'ionic/gestures/gesture'; -import {DragGesture} from 'ionic/gestures/drag-gesture'; +import {Animation} from '../../animations/animation'; +import {Gesture} from '../../gestures/gesture'; +import {DragGesture} from '../../gestures/drag-gesture'; import {Config} from '../../config/config'; -import {dom} from 'ionic/util'; +import {dom} from '../../util'; import {CSS} from '../../util/dom'; -import * as util from 'ionic/util'; +import * as util from '../../util'; import {Swiper} from './swiper-widget'; import {Scroll} from '../scroll/scroll'; diff --git a/ionic/components/slides/test/scroll/index.ts b/ionic/components/slides/test/scroll/index.ts index d35afbe1b4..edfdcec9b6 100644 --- a/ionic/components/slides/test/scroll/index.ts +++ b/ionic/components/slides/test/scroll/index.ts @@ -1,5 +1,4 @@ import {App} from 'ionic/ionic'; -import {NgIf} from 'angular/angular'; @App({ templateUrl: 'main.html', diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 131f6e7005..2ae8f7b364 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,4 +1,4 @@ -import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index fa160401ff..8ef6c6716f 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -1,4 +1,5 @@ -import {Directive, ElementRef, Optional, Host, NgFor, NgIf, forwardRef, ViewContainerRef} from 'angular2/angular2'; +import {Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef} from 'angular2/core'; +import {NgFor, NgIf} from 'angular2/common'; import {Ion} from '../ion'; import {Attr} from '../app/id'; diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts index cb31731976..a4816bb487 100644 --- a/ionic/components/tabs/test/ghost/index.ts +++ b/ionic/components/tabs/test/ghost/index.ts @@ -1,6 +1,6 @@ import {App, Page, NavController, Tab} from 'ionic/ionic'; -import {ContentChild, QueryList, ViewChildren} from 'angular2/angular2'; +import {ContentChild, QueryList, ViewChildren} from 'angular2/core'; // // Tab 1 diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts index 6b85bc268e..03155645fd 100644 --- a/ionic/components/tap-click/tap-click.ts +++ b/ionic/components/tap-click/tap-click.ts @@ -1,4 +1,4 @@ -import {Injectable, NgZone} from 'angular2/angular2'; +import {Injectable, NgZone} from 'angular2/core'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; diff --git a/ionic/components/text-input/label.ts b/ionic/components/text-input/label.ts index 507f69e3d7..01146d5052 100644 --- a/ionic/components/text-input/label.ts +++ b/ionic/components/text-input/label.ts @@ -1,4 +1,4 @@ -import {Directive, Optional, ElementRef, Renderer} from 'angular2/angular2'; +import {Directive, Optional, ElementRef, Renderer} from 'angular2/core'; import {Config} from '../../config/config'; import {TextInput} from './text-input'; diff --git a/ionic/components/text-input/test/form-inputs/index.ts b/ionic/components/text-input/test/form-inputs/index.ts index 1eb3f9b37f..9d55a29d72 100644 --- a/ionic/components/text-input/test/form-inputs/index.ts +++ b/ionic/components/text-input/test/form-inputs/index.ts @@ -1,5 +1,5 @@ import {App} from 'ionic/ionic'; -import {FormBuilder, Validators} from 'angular2/angular2'; +import {FormBuilder, Validators} from 'angular2/common'; @App({ diff --git a/ionic/components/text-input/test/inline-labels/index.ts b/ionic/components/text-input/test/inline-labels/index.ts index 261c4ab4ca..a9bdbc8a78 100644 --- a/ionic/components/text-input/test/inline-labels/index.ts +++ b/ionic/components/text-input/test/inline-labels/index.ts @@ -7,7 +7,6 @@ import {App} from 'ionic/ionic'; class E2EApp { submit(ev) { - debugger } } diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts index 48543eea0c..c2500f0608 100644 --- a/ionic/components/text-input/text-input.ts +++ b/ionic/components/text-input/text-input.ts @@ -1,4 +1,5 @@ -import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute, NgControl} from 'angular2/angular2'; +import {Component, Directive, Attribute, forwardRef, Host, Optional, ElementRef, Renderer} from 'angular2/core'; +import {NgIf, NgControl} from 'angular2/common'; import {NavController} from '../nav/nav-controller'; import {Config} from '../../config/config'; diff --git a/ionic/components/toggle/test/basic/index.ts b/ionic/components/toggle/test/basic/index.ts index dde96c875f..1d8c6a59c3 100644 --- a/ionic/components/toggle/test/basic/index.ts +++ b/ionic/components/toggle/test/basic/index.ts @@ -9,7 +9,7 @@ import { NgControlName, NgFormModel, FormBuilder -} from 'angular2/angular2'; +} from 'angular2/common'; @App({ templateUrl: 'main.html' diff --git a/ionic/components/toggle/toggle.ts b/ionic/components/toggle/toggle.ts index e5de92d6c8..b278bdccb6 100644 --- a/ionic/components/toggle/toggle.ts +++ b/ionic/components/toggle/toggle.ts @@ -1,4 +1,5 @@ -import {Component, Directive, ElementRef, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2'; +import {Component, Directive, ElementRef, Host, Optional, Inject, forwardRef} from 'angular2/core'; +import {NgControl} from 'angular2/common'; import {Form} from '../../util/form'; import {Config} from '../../config/config'; diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index f6cd4f608b..4f59f7d9f8 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList} from 'angular2/angular2'; +import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList} from 'angular2/core'; import {Ion} from '../ion'; import {Config} from '../../config/config'; diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts index 94bd377a13..e4d284bf6a 100644 --- a/ionic/config/bootstrap.ts +++ b/ionic/config/bootstrap.ts @@ -1,4 +1,4 @@ -import {bootstrap, provide} from 'angular2/angular2'; +import {provide, Provider} from 'angular2/core'; import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router'; import {HTTP_PROVIDERS} from 'angular2/http'; diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index dd62170b11..d084e2db3c 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -1,155 +1,3 @@ -import {Component, bootstrap} from 'angular2/angular2' - -import {TapClick} from '../components/tap-click/tap-click'; -import {pascalCaseToDashCase} from '../util/util'; -import {ionicProviders} from './bootstrap'; -import {IONIC_DIRECTIVES} from './directives'; - - -/** - * _For more information on how pages are created, see the [NavController API - * reference](../../components/nav/NavController/#creating_pages)._ - * - * The Page decorator indicates that the decorated class is an Ionic - * navigation component, meaning it can be navigated to using a NavController. - * - * Pages have all [IONIC_DIRECTIVES](../IONIC_DIRECTIVES/), which include - * all Ionic components and directives, as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html) - * and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html), - * already provided to them, so you only need to supply custom components and - * directives to your pages: - * - * ```ts - * @Page({ - * template: ` - * - * ` - * directives: [MyCustomDirective] - * }) - * class MyPage {} - * ``` - * Here [Checkbox](../../../components/checkbox/Checkbox/) will load because - * it is in IONIC_DIRECTIVES, so there is no need to add it to the `directives` - * array. - * - * For custom components that use Ionic components, you will need to include - * IONIC_DIRECTIVES in the `directives` array: - * - * ```ts - * import {IONIC_DIRECTIVES} from 'ionic/ionic'; - * @Component({ - * selector: 'my-component' - * template: `
- * - *
`, - * directives: [IONIC_DIRECTIVES] - * }) - * class MyCustomCheckbox {} - *``` - * Alternatively, you could: - * ```ts - * import {Checkbox, Icon} from 'ionic/ionic' - * ``` - * along with any other components and add them individually: - * ``` - * @Component({ - * ... - * directives: [Checkbox, Icon] - * }) - * ``` - * However, using IONIC_DIRECTIVES will always *Just Work* with no - * performance overhead, so there is really no reason to not always use it. - * - * Pages have their content automatically wrapped in ``, so although - * you may see these tags if you inspect your markup, you don't need to include - * them in your templates. - */ -export function Page(config={}) { - return function(cls) { - config.selector = 'ion-page'; - config.directives = config.directives ? config.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES; - config.host = config.host || {}; - config.host['[hidden]'] = '_hidden'; - config.host['[class.tab-subpage]'] = '_tabSubPage'; - var annotations = Reflect.getMetadata('annotations', cls) || []; - annotations.push(new Component(config)); - Reflect.defineMetadata('annotations', annotations, cls); - return cls; - } -} - -/** - * @private - */ -export function ConfigComponent(config) { - return function(cls) { - var annotations = Reflect.getMetadata('annotations', cls) || []; - annotations.push(new Component(appendConfig(cls, config))); - Reflect.defineMetadata('annotations', annotations, cls); - return cls; - } -} - -/** - * @private - */ -function appendConfig(cls, config) { - config.host = config.host || {}; - - cls.defaultInputs = config.defaultInputs || {}; - - config.inputs = config.inputs || []; - - for (let prop in cls.defaultInputs) { - // add the property to the component "inputs" - config.inputs.push(prop); - - // set the component "hostProperties", so the instance's - // input value will be used to set the element's attribute - config.host['[attr.' + pascalCaseToDashCase(prop) + ']'] = prop; - } - - cls.delegates = config.delegates; - - return config; -} - -/** -* @ngdoc service -* @name App -* @module ionic -* @param {object} [config] - the app's [../Config](Config) object -* @param {string} [template] - the template to use for the app root -* @param {string} [templateUrl] - a relative URL pointing to the template to use for the app root -* @description -* App is an Ionic decorator that bootstraps an application. It can be passed a number of arguments, that act as global config variables for the app. -*/ -export function App(args={}) { - - return function(cls) { - // get current annotations - let annotations = Reflect.getMetadata('annotations', cls) || []; - - args.selector = 'ion-app'; - - // auto add Ionic directives - args.directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES; - - // if no template was provided, default so it has a root - if (!args.templateUrl && !args.template) { - args.template = ''; - } - - // create @Component - annotations.push(new Component(args)); - - // redefine with added annotations - Reflect.defineMetadata('annotations', annotations, cls); - - bootstrap(cls, ionicProviders(args)).then(appRef => { - appRef.injector.get(TapClick); - }); - - return cls; - } -} +export * from './decorators/config-component' +export * from './decorators/app' +export * from './decorators/page' diff --git a/ionic/config/decorators/app.ts b/ionic/config/decorators/app.ts new file mode 100644 index 0000000000..e30ab8776b --- /dev/null +++ b/ionic/config/decorators/app.ts @@ -0,0 +1,45 @@ +import {Component} from 'angular2/core'; +import {bootstrap} from 'angular2/platform/browser'; +import {TapClick} from '../../components/tap-click/tap-click'; +import {ionicProviders} from '../bootstrap'; +import {IONIC_DIRECTIVES} from '../directives'; + +/** +* @ngdoc service +* @name App +* @module ionic +* @param {object} [config] - the app's [../Config](Config) object +* @param {string} [template] - the template to use for the app root +* @param {string} [templateUrl] - a relative URL pointing to the template to use for the app root +* @description +* App is an Ionic decorator that bootstraps an application. It can be passed a number of arguments, that act as global config variables for the app. +*/ +export function App(args={}) { + + return function(cls) { + // get current annotations + let annotations = Reflect.getMetadata('annotations', cls) || []; + + args.selector = 'ion-app'; + + // auto add Ionic directives + args.directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES; + + // if no template was provided, default so it has a root + if (!args.templateUrl && !args.template) { + args.template = ''; + } + + // create @Component + annotations.push(new Component(args)); + + // redefine with added annotations + Reflect.defineMetadata('annotations', annotations, cls); + + bootstrap(cls, ionicProviders(args)).then(appRef => { + appRef.injector.get(TapClick); + }); + + return cls; + } +} diff --git a/ionic/config/decorators/config-component.ts b/ionic/config/decorators/config-component.ts new file mode 100644 index 0000000000..f24a13f656 --- /dev/null +++ b/ionic/config/decorators/config-component.ts @@ -0,0 +1,39 @@ +import {Component} from 'angular2/core' +import {pascalCaseToDashCase} from '../../util/util'; + + +/** + * @private + */ +export function ConfigComponent(config) { + return function(cls) { + var annotations = Reflect.getMetadata('annotations', cls) || []; + annotations.push(new Component(appendConfig(cls, config))); + Reflect.defineMetadata('annotations', annotations, cls); + return cls; + } +} + +/** + * @private + */ +function appendConfig(cls, config) { + config.host = config.host || {}; + + cls.defaultInputs = config.defaultInputs || {}; + + config.inputs = config.inputs || []; + + for (let prop in cls.defaultInputs) { + // add the property to the component "inputs" + config.inputs.push(prop); + + // set the component "hostProperties", so the instance's + // input value will be used to set the element's attribute + config.host['[attr.' + pascalCaseToDashCase(prop) + ']'] = prop; + } + + cls.delegates = config.delegates; + + return config; +} diff --git a/ionic/config/decorators/page.ts b/ionic/config/decorators/page.ts new file mode 100644 index 0000000000..0ac5448876 --- /dev/null +++ b/ionic/config/decorators/page.ts @@ -0,0 +1,75 @@ +import {Component} from 'angular2/core' +import {IONIC_DIRECTIVES} from '../directives'; + + +/** + * _For more information on how pages are created, see the [NavController API + * reference](../../components/nav/NavController/#creating_pages)._ + * + * The Page decorator indicates that the decorated class is an Ionic + * navigation component, meaning it can be navigated to using a NavController. + * + * Pages have all [IONIC_DIRECTIVES](../IONIC_DIRECTIVES/), which include + * all Ionic components and directives, as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html) + * and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html), + * already provided to them, so you only need to supply custom components and + * directives to your pages: + * + * ```ts + * @Page({ + * template: ` + * + * ` + * directives: [MyCustomDirective] + * }) + * class MyPage {} + * ``` + * Here [Checkbox](../../../components/checkbox/Checkbox/) will load because + * it is in IONIC_DIRECTIVES, so there is no need to add it to the `directives` + * array. + * + * For custom components that use Ionic components, you will need to include + * IONIC_DIRECTIVES in the `directives` array: + * + * ```ts + * import {IONIC_DIRECTIVES} from 'ionic/ionic'; + * @Component({ + * selector: 'my-component' + * template: `
+ * + *
`, + * directives: [IONIC_DIRECTIVES] + * }) + * class MyCustomCheckbox {} + *``` + * Alternatively, you could: + * ```ts + * import {Checkbox, Icon} from 'ionic/ionic' + * ``` + * along with any other components and add them individually: + * ``` + * @Component({ + * ... + * directives: [Checkbox, Icon] + * }) + * ``` + * However, using IONIC_DIRECTIVES will always *Just Work* with no + * performance overhead, so there is really no reason to not always use it. + * + * Pages have their content automatically wrapped in ``, so although + * you may see these tags if you inspect your markup, you don't need to include + * them in your templates. + */ +export function Page(config={}) { + return function(cls) { + config.selector = 'ion-page'; + config.directives = config.directives ? config.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES; + config.host = config.host || {}; + config.host['[hidden]'] = '_hidden'; + config.host['[class.tab-subpage]'] = '_tabSubPage'; + var annotations = Reflect.getMetadata('annotations', cls) || []; + annotations.push(new Component(config)); + Reflect.defineMetadata('annotations', annotations, cls); + return cls; + } +} diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts index 89f05ac377..d3baa82477 100644 --- a/ionic/config/directives.ts +++ b/ionic/config/directives.ts @@ -1,4 +1,5 @@ -import {CORE_DIRECTIVES, FORM_DIRECTIVES, forwardRef} from 'angular2/angular2' +import {forwardRef, Type} from 'angular2/core'; +import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common'; import {OverlayNav} from '../components/overlay/overlay'; import {Menu} from '../components/menu/menu'; diff --git a/ionic/gestures/drag-gesture.ts b/ionic/gestures/drag-gesture.ts index e62502fe03..40ab5957ac 100644 --- a/ionic/gestures/drag-gesture.ts +++ b/ionic/gestures/drag-gesture.ts @@ -1,5 +1,5 @@ -import {Gesture} from 'ionic/gestures/gesture'; -import * as util from 'ionic/util'; +import {Gesture} from './gesture'; +import * as util from '../util'; export class DragGesture extends Gesture { diff --git a/ionic/gestures/gesture.ts b/ionic/gestures/gesture.ts index dee0186f8f..49397cc817 100644 --- a/ionic/gestures/gesture.ts +++ b/ionic/gestures/gesture.ts @@ -1,5 +1,5 @@ -import * as util from 'ionic/util'; -import {Hammer} from 'ionic/gestures/hammer'; +import * as util from '../util'; +import {Hammer} from './hammer'; /** * A gesture recognizer class. diff --git a/ionic/gestures/slide-edge-gesture.ts b/ionic/gestures/slide-edge-gesture.ts index 60f8571d8b..e8ce058c33 100644 --- a/ionic/gestures/slide-edge-gesture.ts +++ b/ionic/gestures/slide-edge-gesture.ts @@ -1,4 +1,4 @@ -import {SlideGesture} from 'ionic/gestures/slide-gesture'; +import {SlideGesture} from './slide-gesture'; import {defaults} from '../util/util'; import {windowDimensions} from '../util/dom'; diff --git a/ionic/gestures/slide-gesture.ts b/ionic/gestures/slide-gesture.ts index 4e4ff5d40f..b8ffea98a3 100644 --- a/ionic/gestures/slide-gesture.ts +++ b/ionic/gestures/slide-gesture.ts @@ -1,5 +1,5 @@ -import {DragGesture} from 'ionic/gestures/drag-gesture'; -import * as util from 'ionic/util'; +import {DragGesture} from './drag-gesture'; +import * as util from '../util'; export class SlideGesture extends DragGesture { constructor(element, opts = {}) { diff --git a/ionic/ionic.ts b/ionic/ionic.ts index a50cc8f8c3..8b2f658203 100644 --- a/ionic/ionic.ts +++ b/ionic/ionic.ts @@ -1,14 +1,12 @@ export * from './config/bootstrap' export * from './config/config' -export * from './config/modes' export * from './config/decorators' export * from './config/directives' export * from './components' export * from './platform/platform' -export * from './platform/registry' export * from './platform/storage' export * from './util/click-block' @@ -16,9 +14,15 @@ export * from './util/events' export * from './util/keyboard' export * from './animations/animation' -export * from './animations/builtins' -export * from './animations/ios-transition' -export * from './animations/md-transition' + export * from './translation/translate' export * from './translation/translate_pipe' + +// these modules don't export anything +import './config/modes' +import './platform/registry' +import './animations/builtins' +import './animations/ios-transition' +import './animations/md-transition' + diff --git a/ionic/platform/storage/sql.ts b/ionic/platform/storage/sql.ts index 15d1397498..52f684be5b 100644 --- a/ionic/platform/storage/sql.ts +++ b/ionic/platform/storage/sql.ts @@ -1,6 +1,6 @@ import {StorageEngine} from './storage'; -import * as util from 'ionic/util'; +import * as util from '../../util'; const DB_NAME = '__ionicstorage'; diff --git a/ionic/translation/translate.ts b/ionic/translation/translate.ts index 83c64ea780..eb65e4ac91 100644 --- a/ionic/translation/translate.ts +++ b/ionic/translation/translate.ts @@ -1,4 +1,4 @@ -import {Injectable} from 'angular2/angular2'; +import {Injectable} from 'angular2/core'; /** * @private diff --git a/ionic/translation/translate_pipe.ts b/ionic/translation/translate_pipe.ts index 5a56529a02..a9c4be777f 100644 --- a/ionic/translation/translate_pipe.ts +++ b/ionic/translation/translate_pipe.ts @@ -1,4 +1,4 @@ -import {Injectable, Pipe, PipeTransform} from 'angular2/angular2'; +import {Injectable, Pipe, PipeTransform} from 'angular2/core'; import {Translate} from './translate'; diff --git a/ionic/util.ts b/ionic/util.ts index 52c9a82307..5139b33d3d 100644 --- a/ionic/util.ts +++ b/ionic/util.ts @@ -1,4 +1,4 @@ -import * as domUtil from 'ionic/util/dom' +import * as domUtil from './util/dom' export const dom = domUtil -export * from 'ionic/util/util' +export * from './util/util' diff --git a/ionic/util/events.ts b/ionic/util/events.ts index 7a38ef22d6..7e00d1d117 100644 --- a/ionic/util/events.ts +++ b/ionic/util/events.ts @@ -1,4 +1,4 @@ -import {Injectable} from 'angular2/angular2'; +import {Injectable} from 'angular2/core'; /** * Events is a pub/sub style event system for sending and responding to application-level diff --git a/ionic/util/form.ts b/ionic/util/form.ts index 7c87a8c727..69cf65e1d3 100644 --- a/ionic/util/form.ts +++ b/ionic/util/form.ts @@ -1,4 +1,4 @@ -import {Injectable} from 'angular2/angular2'; +import {Injectable} from 'angular2/core'; /** diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts index 7eebcf5154..8c3509ce02 100644 --- a/ionic/util/keyboard.ts +++ b/ionic/util/keyboard.ts @@ -1,4 +1,4 @@ -import {Injectable, NgZone} from 'angular2/angular2'; +import {Injectable, NgZone} from 'angular2/core'; import {Config} from '../config/config'; import {Form} from './form'; diff --git a/package.json b/package.json index 5b4c6ca255..790ef7ee21 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "gulp-rename": "~1.2.0", "gulp-sass": "^2.0.4", "gulp-shell": "^0.4.0", - "gulp-typescript": "^2.7.7", + "gulp-typescript": "^2.9.2", "gulp-util": "^3.0.6", "gulp-watch": "^4.2.4", "html-entities": "^1.1.3", @@ -64,6 +64,7 @@ "karma-jasmine": "^0.3.5", "lazypipe": "^0.2.3", "lunr": "^0.5.12", + "merge2": "^0.3.6", "minimist": "^1.1.3", "mkdirp": "^0.5.1", "node-html-encoder": "0.0.2", @@ -73,9 +74,9 @@ "semver": "^5.0.1", "serve-static": "^1.9.2", "source-map-support": "^0.2.10", - "systemjs": "0.18.10", + "systemjs": "0.19.6", "through2": "^0.6.3", - "typescript": "1.6.2", + "typescript": "^1.7.3", "vinyl": "^0.4.6", "webpack": "^1.12.2", "yargs": "^3.6.0" diff --git a/scripts/build/config.js b/scripts/build/config.js index 77a8847b00..8450ef1787 100644 --- a/scripts/build/config.js +++ b/scripts/build/config.js @@ -17,6 +17,7 @@ module.exports = { 'node_modules/angular2/bundles/angular2.dev.js', 'node_modules/angular2/bundles/router.dev.js', 'node_modules/angular2/bundles/http.dev.js', + 'node_modules/es6-shim/es6-shim.min.js', 'dist/js/ionic.js', 'scripts/resources/web-animations-js/web-animations.min.js' ], diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html index badf2c6fff..532202ce07 100644 --- a/scripts/e2e/e2e.template.html +++ b/scripts/e2e/e2e.template.html @@ -5,8 +5,12 @@ - - + + + + + + - diff --git a/scripts/e2e/webpack.config.js b/scripts/e2e/webpack.config.js new file mode 100644 index 0000000000..6aaf432697 --- /dev/null +++ b/scripts/e2e/webpack.config.js @@ -0,0 +1,37 @@ +module.exports = { + entry: [ + "web-animations.min" + ], + externals: [ + { + 'ionic/ionic': { + commonjs2: 'ionic/ionic' + }, + 'angular2/core': { + commonjs2: ['angular2', 'core'] + }, + 'angular2/common': { + commonjs2: ['angular2', 'common'] + }, + 'angular2/router' : { + commonjs2: ['angular2', 'router'] + }, + 'angular2/http': { + commonjs2: ['angular2', 'http'] + }, + 'angular2/platform/browser': { + commonjs2: ['angular2', 'platform', 'browser'] + }, + 'angular2/instrumentation': { + commonjs2: ['angular2', 'instrumentation'] + }, + } + ], + module: { + loaders: [{ test: /\.ts$/, loader: "awesome-typescript-loader" }] + }, + resolve: { + alias: {'web-animations.min': './dist/js/web-animations.min'}, + extensions: ["", ".js", ".ts"] + } +}; diff --git a/scripts/npm/ionic.webpack.config.js b/scripts/npm/ionic.webpack.config.js new file mode 100644 index 0000000000..0a0b60a249 --- /dev/null +++ b/scripts/npm/ionic.webpack.config.js @@ -0,0 +1,32 @@ +module.exports = { + entry: [ + "./dist/ionic.js" + ], + output: { + path: 'dist/bundles', + filename: 'ionic.js', + libraryTarget: 'commonjs2' + }, + externals: [ + { + 'angular2/core': { + commonjs2: ['angular2', 'core'] + }, + 'angular2/common': { + commonjs2: ['angular2', 'common'] + }, + 'angular2/router' : { + commonjs2: ['angular2', 'router'] + }, + 'angular2/http': { + commonjs2: ['angular2', 'http'] + }, + 'angular2/platform/browser': { + commonjs2: ['angular2', 'platform', 'browser'] + }, + 'angular2/instrumentation': { + commonjs2: ['angular2', 'instrumentation'] + }, + } + ] +}; diff --git a/tsconfig.json b/tsconfig.json index 05eae2f076..308d102a5d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,23 +1,18 @@ { - "version": "1.5.0", - "compilerOptions": { - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "target": "es6", - "module": "system", - "declaration": true - }, - "fileGlobs": [ - "./ionic/**/*.ts", - "!./node_modules/**", - "!./scripts/**", - "!./dist/**", - "!./tmp/**" - ], - "compileOnSave" : false, - "buildOnSave": false, - "exclude": [ - "node_modules", - "ionic" - ] + "compilerOptions": { + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "target": "es5", + "module": "commonjs", + "declaration": true, + "outDir": "dist" + }, + "files": [ + "ionic/ionic.ts" + ], + "compileOnSave" : false, + "buildOnSave": false, + "exclude": [ + "node_modules" + ] } From f545e3ba40a72fb1bf8a15625f83c3af576aa036 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 18:10:07 -0500 Subject: [PATCH 3/8] fixing merge conflict that I missed --- gulpfile.js | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index a03e81593d..17f5f03475 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -136,35 +136,6 @@ gulp.task('transpile.no-typecheck', function(){ gulp.task('transpile.typecheck', function(){ var merge = require('merge2'); -<<<<<<< HEAD - - var result = tsResult(tscOptions); - - // merge definition and source streams - return merge([ - result.dts, - result.js - ]) - .pipe(gulp.dest('dist')); -}) - -gulp.task('transpile', ['transpile.no-typecheck']); - -gulp.task('bundle', ['transpile'], function(done){ - //TODO - // if (flags.animations == 'polyfill') { - // prepend.push('window.Element.prototype.animate=undefined;'); - // } - - var config = require('./scripts/npm/ionic.webpack.config.js'); - bundle({ - config: config, - cb: done, - stats: true - }); -}) - -======= var result = tsResult(tscOptions); @@ -199,7 +170,6 @@ gulp.task('bundle', ['transpile'], function(done){ } }) ->>>>>>> master function bundle(args) { var webpack = require('webpack'); var path = require('path'); From b8ad42c7979f64db1277f7f8f6fa029733c6dfc3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 10 Dec 2015 18:52:19 -0500 Subject: [PATCH 4/8] refactor(searchbar): changed Cancel button to show by default MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Renamed some searchbar input properties. Fixed the cancel button showing when it wasn’t focused. --- ionic/components/searchbar/searchbar.ios.scss | 9 ++- ionic/components/searchbar/searchbar.ts | 58 ++++++++++--------- .../searchbar/test/floating/main.html | 8 +-- 3 files changed, 41 insertions(+), 34 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ios.scss b/ionic/components/searchbar/searchbar.ios.scss index 34b9e549a6..9c7ebe4b9b 100644 --- a/ionic/components/searchbar/searchbar.ios.scss +++ b/ionic/components/searchbar/searchbar.ios.scss @@ -121,6 +121,12 @@ ion-searchbar { .searchbar-input { padding-left: 30px; } +} + +// Searchbar Focused +// ----------------------------------------- + +.searchbar-focused { .searchbar-ios-cancel { transform: translateX(0); flex: 0 0 auto; @@ -129,7 +135,6 @@ ion-searchbar { } } - // Searchbar in Toolbar // ----------------------------------------- @@ -148,7 +153,7 @@ ion-searchbar { } } - .searchbar-left-aligned .searchbar-ios-cancel { + .searchbar-focused .searchbar-ios-cancel { padding-left: 8px; } diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index 3266be9e36..df3fd32908 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -19,43 +19,38 @@ import {Button} from '../button/button'; * ``` * * @property [placeholder] - sets input placeholder to value passed in - * @property [show-cancel] - shows the cancel button based on boolean value passed in - * @property [cancel-text] - sets the cancel button text to the value passed in + * @property [hide-cancel-button] - hides the cancel button + * @property [cancel-button-text] - sets the cancel button text to the value passed in * @property [cancel-action] - the function that gets called by clicking the cancel button * @see {@link /docs/v2/components#search Search Component Docs} */ @ConfigComponent({ selector: 'ion-searchbar', + inputs: [ + 'cancelAction', + 'hideCancelButton', + 'cancelButtonText' + ], defaultInputs: { - 'showCancel': false, - 'cancelText': 'Cancel', 'placeholder': 'Search' }, - inputs: ['cancelAction'], host: { '[class.searchbar-left-aligned]': 'shouldLeftAlign', '[class.searchbar-focused]': 'isFocused', }, template: '
' + - '' + + '' + '
' + - '' + - '' + + '' + + '' + '
' + - '', + '', directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput; - /** - * @private - * This holds the searchbar input value used for querying - */ - query: string; - constructor( elementRef: ElementRef, config: Config, @@ -71,17 +66,31 @@ export class Searchbar extends Ion { this.ngControl = ngControl; this.ngControl.valueAccessor = this; + + this.ngControl.value = this.ngControl.value || ''; + } + + /** + * @private + * On Initialization check for hideCancelButton + */ + ngOnInit() { + let hideCancelButton = this.hideCancelButton; + if (typeof hideCancelButton === 'string') { + this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true'); + } + console.log(this.cancelButtonText); + console.log(this.hideCancelButton); } /** * @private * After the view has initialized check if the searchbar has a value - * and then store that value in query */ ngAfterViewInit() { + console.log("testing"); // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; - this.query = this.searchbarInput.value || ''; + this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; } /** @@ -110,7 +119,6 @@ export class Searchbar extends Ion { clearInput() { this.searchbarInput.writeValue(''); this.searchbarInput.onChange(''); - this.query = ''; } /** @@ -118,12 +126,12 @@ export class Searchbar extends Ion { * Blurs the input field, clears the input field and removes the left align * then calls the custom cancel function if the user passed one in. */ - cancelSearchbar(event, query) { + cancelSearchbar(event, value) { this.searchbarInput.elementRef.nativeElement.blur(); this.clearInput(); this.shouldLeftAlign = false; - this.cancelAction && this.cancelAction(event, query); + this.cancelAction && this.cancelAction(event, value); } } @@ -136,12 +144,6 @@ export class Searchbar extends Ion { } }) export class SearchbarInput { - /** - * @private - * This holds the searchbar input value used for querying - */ - query: string; - constructor( @Host() searchbar: Searchbar, elementRef: ElementRef, diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index 8824eee667..2c312e7f2d 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -9,14 +9,14 @@
Search - Custom Placeholder
-
Search - Default Cancel Button
- +
Search - Hide Cancel Button
+
Search - Custom Cancel Button Danger
- +
Search - Custom Cancel Action
- +
Clicked custom action with input = {{customCancelAction}} From dfa36baeb94dc5529507561f0cb976fa76a4c217 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 12 Dec 2015 14:43:24 -0500 Subject: [PATCH 5/8] refactor(searchbar): searchbar updates --- ionic/components/searchbar/searchbar.ts | 34 ++++++++++++++++--------- 1 file changed, 22 insertions(+), 12 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index df3fd32908..d18283d9a6 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -1,4 +1,4 @@ -import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild} from 'angular2/core'; +import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core'; import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common'; import {Ion} from '../ion'; @@ -40,16 +40,17 @@ import {Button} from '../button/button'; }, template: '
' + - '' + + '' + '
' + - '' + - '' + + '' + + '' + '
' + '', directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { @ViewChild(forwardRef(() => SearchbarInput)) searchbarInput; + query: string; constructor( elementRef: ElementRef, @@ -67,7 +68,7 @@ export class Searchbar extends Ion { this.ngControl = ngControl; this.ngControl.valueAccessor = this; - this.ngControl.value = this.ngControl.value || ''; + this.query = ''; } /** @@ -79,8 +80,6 @@ export class Searchbar extends Ion { if (typeof hideCancelButton === 'string') { this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true'); } - console.log(this.cancelButtonText); - console.log(this.hideCancelButton); } /** @@ -88,9 +87,7 @@ export class Searchbar extends Ion { * After the view has initialized check if the searchbar has a value */ ngAfterViewInit() { - console.log("testing"); - // If the user passes in a value to the model we should left align - this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != ''; + this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != ''; } /** @@ -133,6 +130,14 @@ export class Searchbar extends Ion { this.cancelAction && this.cancelAction(event, value); } + + /** + * @private + * Clears the input field and triggers the control change. + */ + updateQuery(value) { + this.query = value; + } } @Directive({ @@ -144,6 +149,8 @@ export class Searchbar extends Ion { } }) export class SearchbarInput { + @Output() input: EventEmitter = new EventEmitter(); + constructor( @Host() searchbar: Searchbar, elementRef: ElementRef, @@ -163,8 +170,7 @@ export class SearchbarInput { } ngOnInit() { - if (this.ngControl) this.value = this.ngControl.value; - console.log(this.value); + } /** @@ -173,6 +179,9 @@ export class SearchbarInput { */ writeValue(value) { this.value = value; + if (typeof value === 'string') { + this.searchbar.updateQuery(value); + } } /** @@ -206,6 +215,7 @@ export class SearchbarInput { inputChanged(event) { this.writeValue(event.target.value); this.onChange(event.target.value); + this.input.emit(null); } } From 9c9df6c380bb32dd2e31c75cee3d5cab63a80810 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 12 Dec 2015 14:59:23 -0500 Subject: [PATCH 6/8] refactor(searchbar): update default inputs references #666 --- ionic/components/searchbar/searchbar.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index fa939a136c..bc8cea3cca 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -29,11 +29,9 @@ import {Button} from '../button/button'; inputs: [ 'cancelAction', 'hideCancelButton', - 'cancelButtonText' + 'cancelButtonText', + 'placeholder' ], - defaultInputs: { - 'placeholder': 'Search' - }, host: { '[class.searchbar-left-aligned]': 'shouldLeftAlign', '[class.searchbar-focused]': 'isFocused', @@ -45,7 +43,7 @@ import {Button} from '../button/button'; '' + '' + '
' + - '', + '', directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)] }) export class Searchbar extends Ion { @@ -73,13 +71,16 @@ export class Searchbar extends Ion { /** * @private - * On Initialization check for hideCancelButton + * On Initialization check for attributes */ ngOnInit() { let hideCancelButton = this.hideCancelButton; if (typeof hideCancelButton === 'string') { this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true'); } + + this.cancelButtonText = this.cancelButtonText || 'Cancel'; + this.placeholder = this.placeholder || 'Search'; } /** From 23288931d67e4c19a6c8a7aa9a36eff3d84f3241 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 12 Dec 2015 15:05:34 -0500 Subject: [PATCH 7/8] refactor(searchbar): fix searchbar attribute names and update API docs references #666 --- ionic/components/searchbar/searchbar.ts | 6 +++--- ionic/components/searchbar/test/toolbar/main.html | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index bc8cea3cca..cab25ea493 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -18,9 +18,9 @@ import {Button} from '../button/button'; * * ``` * - * @property [placeholder] - sets input placeholder to value passed in - * @property [hideCancelButton] - hides the cancel button - * @property [cancelButtonText] - sets the cancel button text to the value passed in + * @property [placeholder] - (default: 'Search') Sets input placeholder to value passed in + * @property [hideCancelButton] - (default: false) Hides the cancel button + * @property [cancelButtonText] - (default: 'Cancel') sets the cancel button text to the value passed in * @property [cancelAction] - the function that gets called by clicking the cancel button * @see {@link /docs/v2/components#search Search Component Docs} */ diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html index fd431d1e16..30683770b0 100644 --- a/ionic/components/searchbar/test/toolbar/main.html +++ b/ionic/components/searchbar/test/toolbar/main.html @@ -5,22 +5,22 @@
Search - Default Toolbar
- +
Search - Primary Toolbar
- +
Search - Danger Toolbar
- +
Search - Light Toolbar
- + From 227be2c87478c8aa71b60b7126edb42f9e9c273b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Sat, 12 Dec 2015 15:30:40 -0500 Subject: [PATCH 8/8] fix(searchbar): emit input event to searchbar which now triggers the input on clear closes #666 --- ionic/components/searchbar/searchbar.ts | 21 ++++++++++++------- .../searchbar/test/floating/index.ts | 4 ++-- .../searchbar/test/floating/main.html | 2 +- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index cab25ea493..c7930141b3 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -32,6 +32,7 @@ import {Button} from '../button/button'; 'cancelButtonText', 'placeholder' ], + outputs: ['input'], host: { '[class.searchbar-left-aligned]': 'shouldLeftAlign', '[class.searchbar-focused]': 'isFocused', @@ -60,6 +61,8 @@ export class Searchbar extends Ion { this.renderer = renderer; this.elementRef = elementRef; + this.input = new EventEmitter('input'); + // If there is no control then we shouldn't do anything if (!ngControl) return; @@ -134,10 +137,11 @@ export class Searchbar extends Ion { /** * @private - * Clears the input field and triggers the control change. + * Updates the value of query */ updateQuery(value) { this.query = value; + this.input.next(value); } } @@ -150,8 +154,6 @@ export class Searchbar extends Ion { } }) export class SearchbarInput { - @Output() input: EventEmitter = new EventEmitter(); - constructor( @Host() searchbar: Searchbar, elementRef: ElementRef, @@ -170,10 +172,6 @@ export class SearchbarInput { this.ngControl.valueAccessor = this; } - ngOnInit() { - - } - /** * @private * Write a new value to the element. @@ -209,14 +207,21 @@ export class SearchbarInput { this.searchbar.inputFocused(); } + /** + * @private + * Calls the Searchbar function to blur + */ inputBlurred() { this.searchbar.inputBlurred(); } + /** + * @private + * Update the Searchbar input value + */ inputChanged(event) { this.writeValue(event.target.value); this.onChange(event.target.value); - this.input.emit(null); } } diff --git a/ionic/components/searchbar/test/floating/index.ts b/ionic/components/searchbar/test/floating/index.ts index 53120a6352..3f2606d06d 100644 --- a/ionic/components/searchbar/test/floating/index.ts +++ b/ionic/components/searchbar/test/floating/index.ts @@ -25,11 +25,11 @@ class E2EApp { this.clickedCustomAction = true; } - triggerInput() { + triggerInput(ev) { // The defaultSearch doesn't get updated before this function is called // so we have to wrap it in a timeout setTimeout(() => { - console.log(this.defaultSearch); + console.log("Triggered input", this.defaultSearch); }); } } diff --git a/ionic/components/searchbar/test/floating/main.html b/ionic/components/searchbar/test/floating/main.html index 9c0543a55b..54a5199fef 100644 --- a/ionic/components/searchbar/test/floating/main.html +++ b/ionic/components/searchbar/test/floating/main.html @@ -1,6 +1,6 @@
Search - Default
- +

Default Search: {{ defaultSearch }}