fallback to use inline template

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## [2.0.3]
+### changed
+* fix critiical issue that can't html template [issue#56](https://github.com/raychenfj/ion-multi-picker/issues/56)
+
 ## [2.0.2]
 ### changed
 * fix bug that can't present the picker correctly when there is large amount of data, ref to [issue#50](https://github.com/raychenfj/ion-multi-picker/issues/50)

dist/components/multi-picker/multi-picker.html

@@ -0,0 +1,4 @@
+<div class="multi-picker-placeholder" *ngIf="placeholder && !_text">{{placeholder}}</div>
+<div class="multi-picker-text" *ngIf="!placeholder || _text">{{_text}}</div>
+<button aria-haspopup="true" type="button" [id]="id" ion-button="item-cover" [attr.aria-labelledby]="_labelId" [attr.aria-disabled]="_disabled"
+ class="item-cover"></button>

dist/components/multi-picker/multi-picker.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":3,"metadata":{"MULTI_PICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiPicker"},"multi":true},"MultiPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-multi-picker","templateUrl":"multi-picker.html","host":{"[class.multi-picke-disabled]":"_disabled","$quoted$":["[class.multi-picke-disabled]"]},"providers":[{"__symbolic":"reference","name":"MULTI_PICKER_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"cancelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiPickerColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ionCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"Form"},{"__symbolic":"reference","module":"ionic-angular","name":"Item"},{"__symbolic":"reference","module":"ionic-angular","name":"PickerController"}]}],"_click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"_keyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.space"]}]}],"open":[{"__symbolic":"method"}],"generateSequence":[{"__symbolic":"method"}],"generate":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getOptionParentValue":[{"__symbolic":"method"}],"getParentCol":[{"__symbolic":"method"}],"divyColumns":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"checkHasValue":[{"__symbolic":"method"}],"updateText":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"writeValue":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"convertObjectToString":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MULTI_PICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiPicker"},"multi":true},"MultiPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-multi-picker","templateUrl":"multi-picker.html","host":{"[class.multi-picke-disabled]":"_disabled"},"providers":[{"__symbolic":"reference","name":"MULTI_PICKER_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"cancelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiPickerColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ionCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"Form"},{"__symbolic":"reference","module":"ionic-angular","name":"Item"},{"__symbolic":"reference","module":"ionic-angular","name":"PickerController"}]}],"_click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"_keyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.space"]}]}],"open":[{"__symbolic":"method"}],"generateSequence":[{"__symbolic":"method"}],"generate":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getOptionParentValue":[{"__symbolic":"method"}],"getParentCol":[{"__symbolic":"method"}],"divyColumns":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"checkHasValue":[{"__symbolic":"method"}],"updateText":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"writeValue":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"convertObjectToString":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MULTI_PICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiPicker"},"multi":true},"MultiPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-multi-picker","template":"<div class=\"multi-picker-placeholder\" *ngIf=\"placeholder && !_text\">{{placeholder}}</div>\n <div class=\"multi-picker-text\" *ngIf=\"!placeholder || _text\">{{_text}}</div>\n <button aria-haspopup=\"true\" type=\"button\" [id]=\"id\" ion-button=\"item-cover\" [attr.aria-labelledby]=\"_labelId\" [attr.aria-disabled]=\"_disabled\" class=\"item-cover\"></button>","host":{"[class.multi-picke-disabled]":"_disabled","$quoted$":["[class.multi-picke-disabled]"]},"providers":[{"__symbolic":"reference","name":"MULTI_PICKER_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"cancelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiPickerColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ionCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"Form"},{"__symbolic":"reference","module":"ionic-angular","name":"Item"},{"__symbolic":"reference","module":"ionic-angular","name":"PickerController"}]}],"_click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"_keyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.space"]}]}],"open":[{"__symbolic":"method"}],"generateSequence":[{"__symbolic":"method"}],"generate":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getOptionParentValue":[{"__symbolic":"method"}],"getParentCol":[{"__symbolic":"method"}],"divyColumns":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"checkHasValue":[{"__symbolic":"method"}],"updateText":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"writeValue":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"convertObjectToString":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MULTI_PICKER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"MultiPicker"},"multi":true},"MultiPicker":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ion-multi-picker","template":"<div class=\"multi-picker-placeholder\" *ngIf=\"placeholder && !_text\">{{placeholder}}</div>\n <div class=\"multi-picker-text\" *ngIf=\"!placeholder || _text\">{{_text}}</div>\n <button aria-haspopup=\"true\" type=\"button\" [id]=\"id\" ion-button=\"item-cover\" [attr.aria-labelledby]=\"_labelId\" [attr.aria-disabled]=\"_disabled\" class=\"item-cover\"></button>","host":{"[class.multi-picke-disabled]":"_disabled"},"providers":[{"__symbolic":"reference","name":"MULTI_PICKER_VALUE_ACCESSOR"}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"}}]}],"members":{"cancelText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"doneText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"multiPickerColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"separator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"ionCancel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}}]],"parameters":[{"__symbolic":"reference","module":"ionic-angular","name":"Form"},{"__symbolic":"reference","module":"ionic-angular","name":"Item"},{"__symbolic":"reference","module":"ionic-angular","name":"PickerController"}]}],"_click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"_keyup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup.space"]}]}],"open":[{"__symbolic":"method"}],"generateSequence":[{"__symbolic":"method"}],"generate":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"getOptionParentValue":[{"__symbolic":"method"}],"getParentCol":[{"__symbolic":"method"}],"divyColumns":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"checkHasValue":[{"__symbolic":"method"}],"updateText":[{"__symbolic":"method"}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"writeValue":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"convertObjectToString":[{"__symbolic":"method"}]}}}}]

example/package.json

@@ -28,7 +28,7 @@
  "rxjs": "5.1.1",
  "sw-toolbox": "3.6.0",
  "zone.js": "^0.8.10",
- "ion-multi-picker": "^2.0.0"
+ "ion-multi-picker": "^2.0.3"
  },
  "devDependencies": {
  "@ionic/app-scripts": "1.3.7",

example/src/app/app.module.ts

@@ -5,7 +5,7 @@ import { MyApp } from './app.component';
 import { TabsPage } from '../pages/tabs/tabs';
 import { SimpleExamplePage } from '../pages/simple/simple';
 import { AdvancedExamplePage } from '../pages/advanced/advanced';
-import { MultiPickerModule } from '../../../src/index';
+import { MultiPickerModule } from 'ion-multi-picker';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';

gulpfile.js

@@ -11,6 +11,10 @@ gulp.task('del', function() {
  return del(['dist', '*.scss', '*.tgz']);
 });
 
+gulp.task('copyhtml',function(){
+ gulp.src('src/components/multi-picker/*.html').pipe(gulp.dest('dist/components/multi-picker'));
+})
+
 gulp.task('copyscss', function() {
  gulp.src('src/components/multi-picker/*.scss').pipe(gulp.dest('dist/components/multi-picker'));
 });
@@ -25,7 +29,7 @@ gulp.task('post', function(){
 
 
 gulp.task('default', function() {
- runSequence('del', 'copyscss', 'ngc', 'pack','post')
+ runSequence('del','copyhtml', 'copyscss', 'ngc', 'pack','post')
 });
 
 

package.json

@@ -82,7 +82,7 @@
  },
  "name": "ion-multi-picker",
  "description": "Ion Multi Item Picker--An Ionic2 Custom Picker Component",
- "version": "2.0.2",
+ "version": "2.0.3",
  "main": "./dist/index.js",
  "typings": "./dist/index.d.ts",
  "repository": {

src/components/multi-picker/multi-picker.ts

@@ -11,7 +11,10 @@ export const MULTI_PICKER_VALUE_ACCESSOR: any = {
 
 @Component({
  selector: 'ion-multi-picker',
- templateUrl: 'multi-picker.html',
+ // templateUrl: 'multi-picker.html',
+ template: `<div class="multi-picker-placeholder" *ngIf="placeholder && !_text">{{placeholder}}</div>
+ <div class="multi-picker-text" *ngIf="!placeholder || _text">{{_text}}</div>
+ <button aria-haspopup="true" type="button" [id]="id" ion-button="item-cover" [attr.aria-labelledby]="_labelId" [attr.aria-disabled]="_disabled" class="item-cover"></button>`,
  host: {
  '[class.multi-picke-disabled]': '_disabled'
  },