aurelia-bootstrap-tagsinput - npm Package Compare versions

Comparing version 0.3.2 to 1.0.0

dist/amd/abp-tags-input.js

@@ -1,2 +0,2 @@
-define(['exports', 'aurelia-framework', 'jquery', 'bootstrap-tagsinput/dist/bootstrap-tagsinput'], function (exports, _aureliaFramework, _jquery) {
+define(['exports', 'aurelia-framework', 'jquery', './picker-global-options', 'bootstrap-tagsinput/dist/bootstrap-tagsinput'], function (exports, _aureliaFramework, _jquery, _pickerGlobalOptions) {
   'use strict';
@@ -66,3 +66,3 @@
 
-  var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18, _descriptor19, _descriptor20, _descriptor21;
+  var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10;
 
@@ -77,40 +77,18 @@ var AbpTagsInputCustomElement = exports.AbpTagsInputCustomElement = (_dec = (0, _aureliaFramework.inject)(Element), _dec2 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec3 = (0, _aureliaFramework.bindable)({ defaultBindingMode: _aureliaFramework.bindingMode.twoWay }), _dec(_class = (_class2 = function () {
 
-      _initDefineProp(this, 'placeholder', _descriptor3, this);
+      _initDefineProp(this, 'bootstrapVersion', _descriptor3, this);
 
-      _initDefineProp(this, 'allowDuplicates', _descriptor4, this);
+      _initDefineProp(this, 'placeholder', _descriptor4, this);
 
-      _initDefineProp(this, 'cancelConfirmKeysOnEmpty', _descriptor5, this);
+      _initDefineProp(this, 'options', _descriptor5, this);
 
-      _initDefineProp(this, 'confirmKeys', _descriptor6, this);
+      _initDefineProp(this, 'onBeforeItemAdd', _descriptor6, this);
 
-      _initDefineProp(this, 'focusClass', _descriptor7, this);
+      _initDefineProp(this, 'onBeforeItemRemove', _descriptor7, this);
 
-      _initDefineProp(this, 'freeInput', _descriptor8, this);
+      _initDefineProp(this, 'onItemAdded', _descriptor8, this);
 
-      _initDefineProp(this, 'itemValue', _descriptor9, this);
+      _initDefineProp(this, 'onItemAddedOnInit', _descriptor9, this);
 
-      _initDefineProp(this, 'itemText', _descriptor10, this);
+      _initDefineProp(this, 'onItemRemoved', _descriptor10, this);
 
-      _initDefineProp(this, 'maxTags', _descriptor11, this);
-
-      _initDefineProp(this, 'maxChars', _descriptor12, this);
-
-      _initDefineProp(this, 'onTagExists', _descriptor13, this);
-
-      _initDefineProp(this, 'tagClass', _descriptor14, this);
-
-      _initDefineProp(this, 'trimValue', _descriptor15, this);
-
-      _initDefineProp(this, 'typeahead', _descriptor16, this);
-
-      _initDefineProp(this, 'onBeforeItemAdd', _descriptor17, this);
-
-      _initDefineProp(this, 'onBeforeItemRemove', _descriptor18, this);
-
-      _initDefineProp(this, 'onItemAdded', _descriptor19, this);
-
-      _initDefineProp(this, 'onItemAddedOnInit', _descriptor20, this);
-
-      _initDefineProp(this, 'onItemRemoved', _descriptor21, this);
-
       this.events = {};
@@ -126,7 +104,12 @@ this.methods = {};
 
-      this.attachOptions();
+      var pickerOptions = this.options || {};
+      if (!this.options.tagClass) {
+        pickerOptions.tagClass = this.bootstrapVersion === 3 ? 'label label-info' : 'badge badge-info';
+      }
+
       this.applyExposeEvents();
       this.exposeMethods();
 
-      this.domElm.tagsinput(this.options);
+      pickerOptions = Object.assign({}, _pickerGlobalOptions.globalPickerOptions, pickerOptions);
+      this.domElm.tagsinput(pickerOptions);
 
@@ -140,29 +123,2 @@ this.element = {
 
-    AbpTagsInputCustomElement.prototype.attachOptions = function attachOptions() {
-      var options = {
-        allowDuplicates: this.allowDuplicates,
-        cancelConfirmKeysOnEmpty: this.cancelConfirmKeysOnEmpty,
-        confirmKeys: this.confirmKeys,
-        focusClass: this.focusClass,
-        freeInput: this.freeInput,
-        maxChars: this.maxChars,
-        maxTags: this.maxTags,
-        tagClass: this.tagClass,
-        trimValue: this.trimValue,
-        typeahead: this.typeahead
-      };
-
-      if (this.itemValue) {
-        options.itemValue = this.itemValue;
-      }
-      if (this.itemText) {
-        options.itemText = this.itemText;
-      }
-      if (this.onTagExists) {
-        options.onTagExists = this.onTagExists;
-      }
-
-      this.options = options;
-    };
-
     AbpTagsInputCustomElement.prototype.applyExposeEvents = function applyExposeEvents() {
@@ -261,78 +217,31 @@ var _this = this;
     initializer: null
-  }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [_aureliaFramework.bindable], {
+  }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'bootstrapVersion', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: function initializer() {
-      return '';
+      return _pickerGlobalOptions.globalExtraOptions.bootstrapVersion;
     }
-  }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'allowDuplicates', [_aureliaFramework.bindable], {
+  }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: function initializer() {
-      return false;
+      return '';
     }
-  }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'cancelConfirmKeysOnEmpty', [_aureliaFramework.bindable], {
+  }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'options', [_aureliaFramework.bindable], {
     enumerable: true,
-    initializer: function initializer() {
-      return false;
-    }
-  }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'confirmKeys', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: function initializer() {
-      return [13, 44];
-    }
-  }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'focusClass', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: function initializer() {
-      return 'focus';
-    }
-  }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'freeInput', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: function initializer() {
-      return true;
-    }
-  }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'itemValue', [_aureliaFramework.bindable], {
-    enumerable: true,
     initializer: null
-  }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'itemText', [_aureliaFramework.bindable], {
+  }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'maxTags', [_aureliaFramework.bindable], {
+  }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'maxChars', [_aureliaFramework.bindable], {
+  }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor13 = _applyDecoratedDescriptor(_class2.prototype, 'onTagExists', [_aureliaFramework.bindable], {
+  }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [_aureliaFramework.bindable], {
     enumerable: true,
     initializer: null
-  }), _descriptor14 = _applyDecoratedDescriptor(_class2.prototype, 'tagClass', [_aureliaFramework.bindable], {
+  }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [_aureliaFramework.bindable], {
     enumerable: true,
-    initializer: function initializer() {
-      return 'label label-info';
-    }
-  }), _descriptor15 = _applyDecoratedDescriptor(_class2.prototype, 'trimValue', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: function initializer() {
-      return false;
-    }
-  }), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'typeahead', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: function initializer() {
-      return null;
-    }
-  }), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [_aureliaFramework.bindable], {
-    enumerable: true,
     initializer: null
-  }), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: null
-  }), _descriptor19 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: null
-  }), _descriptor20 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: null
-  }), _descriptor21 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [_aureliaFramework.bindable], {
-    enumerable: true,
-    initializer: null
   })), _class2)) || _class);
 });

dist/amd/index.js

@@ -1,2 +0,2 @@
-define(['exports', './abp-tags-input'], function (exports, _abpTagsInput) {
+define(['exports', './abp-tags-input', './picker-config'], function (exports, _abpTagsInput, _pickerConfig) {
   'use strict';
@@ -7,9 +7,16 @@
   });
-  exports.AbpTagsInputCustomElement = undefined;
+  exports.PickerConfig = exports.AbpTagsInputCustomElement = undefined;
   exports.configure = configure;
-  function configure(aurelia) {
+  function configure(aurelia, callback) {
     aurelia.globalResources('./abp-tags-input');
+
+    var config = new _pickerConfig.PickerConfig();
+
+    if (typeof callback === 'function') {
+      callback(config);
+    }
   }
 
   exports.AbpTagsInputCustomElement = _abpTagsInput.AbpTagsInputCustomElement;
+  exports.PickerConfig = _pickerConfig.PickerConfig;
 });

dist/commonjs/abp-tags-input.js

@@ -8,3 +8,3 @@ 'use strict';
 
-var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18, _descriptor19, _descriptor20, _descriptor21;
+var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10;
 
@@ -19,2 +19,4 @@ var _aureliaFramework = require('aurelia-framework');
 
+var _pickerGlobalOptions = require('./picker-global-options');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -75,40 +77,18 @@
 
-    _initDefineProp(this, 'placeholder', _descriptor3, this);
+    _initDefineProp(this, 'bootstrapVersion', _descriptor3, this);
 
-    _initDefineProp(this, 'allowDuplicates', _descriptor4, this);
+    _initDefineProp(this, 'placeholder', _descriptor4, this);
 
-    _initDefineProp(this, 'cancelConfirmKeysOnEmpty', _descriptor5, this);
+    _initDefineProp(this, 'options', _descriptor5, this);
 
-    _initDefineProp(this, 'confirmKeys', _descriptor6, this);
+    _initDefineProp(this, 'onBeforeItemAdd', _descriptor6, this);
 
-    _initDefineProp(this, 'focusClass', _descriptor7, this);
+    _initDefineProp(this, 'onBeforeItemRemove', _descriptor7, this);
 
-    _initDefineProp(this, 'freeInput', _descriptor8, this);
+    _initDefineProp(this, 'onItemAdded', _descriptor8, this);
 
-    _initDefineProp(this, 'itemValue', _descriptor9, this);
+    _initDefineProp(this, 'onItemAddedOnInit', _descriptor9, this);
 
-    _initDefineProp(this, 'itemText', _descriptor10, this);
+    _initDefineProp(this, 'onItemRemoved', _descriptor10, this);
 
-    _initDefineProp(this, 'maxTags', _descriptor11, this);
-
-    _initDefineProp(this, 'maxChars', _descriptor12, this);
-
-    _initDefineProp(this, 'onTagExists', _descriptor13, this);
-
-    _initDefineProp(this, 'tagClass', _descriptor14, this);
-
-    _initDefineProp(this, 'trimValue', _descriptor15, this);
-
-    _initDefineProp(this, 'typeahead', _descriptor16, this);
-
-    _initDefineProp(this, 'onBeforeItemAdd', _descriptor17, this);
-
-    _initDefineProp(this, 'onBeforeItemRemove', _descriptor18, this);
-
-    _initDefineProp(this, 'onItemAdded', _descriptor19, this);
-
-    _initDefineProp(this, 'onItemAddedOnInit', _descriptor20, this);
-
-    _initDefineProp(this, 'onItemRemoved', _descriptor21, this);
-
     this.events = {};
@@ -124,7 +104,12 @@ this.methods = {};
 
-    this.attachOptions();
+    var pickerOptions = this.options || {};
+    if (!this.options.tagClass) {
+      pickerOptions.tagClass = this.bootstrapVersion === 3 ? 'label label-info' : 'badge badge-info';
+    }
+
     this.applyExposeEvents();
     this.exposeMethods();
 
-    this.domElm.tagsinput(this.options);
+    pickerOptions = Object.assign({}, _pickerGlobalOptions.globalPickerOptions, pickerOptions);
+    this.domElm.tagsinput(pickerOptions);
 
@@ -138,29 +123,2 @@ this.element = {
 
-  AbpTagsInputCustomElement.prototype.attachOptions = function attachOptions() {
-    var options = {
-      allowDuplicates: this.allowDuplicates,
-      cancelConfirmKeysOnEmpty: this.cancelConfirmKeysOnEmpty,
-      confirmKeys: this.confirmKeys,
-      focusClass: this.focusClass,
-      freeInput: this.freeInput,
-      maxChars: this.maxChars,
-      maxTags: this.maxTags,
-      tagClass: this.tagClass,
-      trimValue: this.trimValue,
-      typeahead: this.typeahead
-    };
-
-    if (this.itemValue) {
-      options.itemValue = this.itemValue;
-    }
-    if (this.itemText) {
-      options.itemText = this.itemText;
-    }
-    if (this.onTagExists) {
-      options.onTagExists = this.onTagExists;
-    }
-
-    this.options = options;
-  };
-
   AbpTagsInputCustomElement.prototype.applyExposeEvents = function applyExposeEvents() {
@@ -259,77 +217,30 @@ var _this = this;
   initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [_aureliaFramework.bindable], {
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'bootstrapVersion', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: function initializer() {
-    return '';
+    return _pickerGlobalOptions.globalExtraOptions.bootstrapVersion;
   }
-}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'allowDuplicates', [_aureliaFramework.bindable], {
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: function initializer() {
-    return false;
+    return '';
   }
-}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'cancelConfirmKeysOnEmpty', [_aureliaFramework.bindable], {
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'options', [_aureliaFramework.bindable], {
   enumerable: true,
-  initializer: function initializer() {
-    return false;
-  }
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'confirmKeys', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: function initializer() {
-    return [13, 44];
-  }
-}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'focusClass', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: function initializer() {
-    return 'focus';
-  }
-}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'freeInput', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: function initializer() {
-    return true;
-  }
-}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'itemValue', [_aureliaFramework.bindable], {
-  enumerable: true,
   initializer: null
-}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'itemText', [_aureliaFramework.bindable], {
+}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'maxTags', [_aureliaFramework.bindable], {
+}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'maxChars', [_aureliaFramework.bindable], {
+}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor13 = _applyDecoratedDescriptor(_class2.prototype, 'onTagExists', [_aureliaFramework.bindable], {
+}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [_aureliaFramework.bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor14 = _applyDecoratedDescriptor(_class2.prototype, 'tagClass', [_aureliaFramework.bindable], {
+}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [_aureliaFramework.bindable], {
   enumerable: true,
-  initializer: function initializer() {
-    return 'label label-info';
-  }
-}), _descriptor15 = _applyDecoratedDescriptor(_class2.prototype, 'trimValue', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: function initializer() {
-    return false;
-  }
-}), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'typeahead', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: function initializer() {
-    return null;
-  }
-}), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [_aureliaFramework.bindable], {
-  enumerable: true,
   initializer: null
-}), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor19 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor20 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor21 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [_aureliaFramework.bindable], {
-  enumerable: true,
-  initializer: null
 })), _class2)) || _class);

dist/commonjs/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.AbpTagsInputCustomElement = undefined;
+exports.PickerConfig = exports.AbpTagsInputCustomElement = undefined;
 exports.configure = configure;
@@ -12,6 +12,15 @@
 
-function configure(aurelia) {
+var _pickerConfig = require('./picker-config');
+
+function configure(aurelia, callback) {
   aurelia.globalResources('./abp-tags-input');
+
+  var config = new _pickerConfig.PickerConfig();
+
+  if (typeof callback === 'function') {
+    callback(config);
+  }
 }
 
-exports.AbpTagsInputCustomElement = _abpTagsInput.AbpTagsInputCustomElement;
+exports.AbpTagsInputCustomElement = _abpTagsInput.AbpTagsInputCustomElement;
+exports.PickerConfig = _pickerConfig.PickerConfig;

dist/es2015/abp-tags-input.js

@@ -1,2 +0,2 @@
-var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18, _descriptor19, _descriptor20, _descriptor21;
+var _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10;
 
@@ -49,2 +49,3 @@ function _initDefineProp(target, property, descriptor, context) {
 import 'bootstrap-tagsinput/dist/bootstrap-tagsinput';
+import { globalExtraOptions, globalPickerOptions } from './picker-global-options';
 
@@ -58,40 +59,18 @@ export let AbpTagsInputCustomElement = (_dec = inject(Element), _dec2 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec3 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = (_class2 = class AbpTagsInputCustomElement {
 
-    _initDefineProp(this, 'placeholder', _descriptor3, this);
+    _initDefineProp(this, 'bootstrapVersion', _descriptor3, this);
 
-    _initDefineProp(this, 'allowDuplicates', _descriptor4, this);
+    _initDefineProp(this, 'placeholder', _descriptor4, this);
 
-    _initDefineProp(this, 'cancelConfirmKeysOnEmpty', _descriptor5, this);
+    _initDefineProp(this, 'options', _descriptor5, this);
 
-    _initDefineProp(this, 'confirmKeys', _descriptor6, this);
+    _initDefineProp(this, 'onBeforeItemAdd', _descriptor6, this);
 
-    _initDefineProp(this, 'focusClass', _descriptor7, this);
+    _initDefineProp(this, 'onBeforeItemRemove', _descriptor7, this);
 
-    _initDefineProp(this, 'freeInput', _descriptor8, this);
+    _initDefineProp(this, 'onItemAdded', _descriptor8, this);
 
-    _initDefineProp(this, 'itemValue', _descriptor9, this);
+    _initDefineProp(this, 'onItemAddedOnInit', _descriptor9, this);
 
-    _initDefineProp(this, 'itemText', _descriptor10, this);
+    _initDefineProp(this, 'onItemRemoved', _descriptor10, this);
 
-    _initDefineProp(this, 'maxTags', _descriptor11, this);
-
-    _initDefineProp(this, 'maxChars', _descriptor12, this);
-
-    _initDefineProp(this, 'onTagExists', _descriptor13, this);
-
-    _initDefineProp(this, 'tagClass', _descriptor14, this);
-
-    _initDefineProp(this, 'trimValue', _descriptor15, this);
-
-    _initDefineProp(this, 'typeahead', _descriptor16, this);
-
-    _initDefineProp(this, 'onBeforeItemAdd', _descriptor17, this);
-
-    _initDefineProp(this, 'onBeforeItemRemove', _descriptor18, this);
-
-    _initDefineProp(this, 'onItemAdded', _descriptor19, this);
-
-    _initDefineProp(this, 'onItemAddedOnInit', _descriptor20, this);
-
-    _initDefineProp(this, 'onItemRemoved', _descriptor21, this);
-
     this.events = {};
@@ -107,7 +86,12 @@ this.methods = {};
 
-    this.attachOptions();
+    let pickerOptions = this.options || {};
+    if (!this.options.tagClass) {
+      pickerOptions.tagClass = this.bootstrapVersion === 3 ? 'label label-info' : 'badge badge-info';
+    }
+
     this.applyExposeEvents();
     this.exposeMethods();
 
-    this.domElm.tagsinput(this.options);
+    pickerOptions = Object.assign({}, globalPickerOptions, pickerOptions);
+    this.domElm.tagsinput(pickerOptions);
 
@@ -121,29 +105,2 @@ this.element = {
 
-  attachOptions() {
-    let options = {
-      allowDuplicates: this.allowDuplicates,
-      cancelConfirmKeysOnEmpty: this.cancelConfirmKeysOnEmpty,
-      confirmKeys: this.confirmKeys,
-      focusClass: this.focusClass,
-      freeInput: this.freeInput,
-      maxChars: this.maxChars,
-      maxTags: this.maxTags,
-      tagClass: this.tagClass,
-      trimValue: this.trimValue,
-      typeahead: this.typeahead
-    };
-
-    if (this.itemValue) {
-      options.itemValue = this.itemValue;
-    }
-    if (this.itemText) {
-      options.itemText = this.itemText;
-    }
-    if (this.onTagExists) {
-      options.onTagExists = this.onTagExists;
-    }
-
-    this.options = options;
-  }
-
   applyExposeEvents() {
@@ -226,77 +183,30 @@ this.domElm.on('beforeItemAdd', e => {
   initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [bindable], {
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'bootstrapVersion', [bindable], {
   enumerable: true,
   initializer: function () {
-    return '';
+    return globalExtraOptions.bootstrapVersion;
   }
-}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'allowDuplicates', [bindable], {
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [bindable], {
   enumerable: true,
   initializer: function () {
-    return false;
+    return '';
   }
-}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'cancelConfirmKeysOnEmpty', [bindable], {
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'options', [bindable], {
   enumerable: true,
-  initializer: function () {
-    return false;
-  }
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'confirmKeys', [bindable], {
-  enumerable: true,
-  initializer: function () {
-    return [13, 44];
-  }
-}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'focusClass', [bindable], {
-  enumerable: true,
-  initializer: function () {
-    return 'focus';
-  }
-}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'freeInput', [bindable], {
-  enumerable: true,
-  initializer: function () {
-    return true;
-  }
-}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'itemValue', [bindable], {
-  enumerable: true,
   initializer: null
-}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'itemText', [bindable], {
+}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'maxTags', [bindable], {
+}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'maxChars', [bindable], {
+}), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor13 = _applyDecoratedDescriptor(_class2.prototype, 'onTagExists', [bindable], {
+}), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [bindable], {
   enumerable: true,
   initializer: null
-}), _descriptor14 = _applyDecoratedDescriptor(_class2.prototype, 'tagClass', [bindable], {
+}), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [bindable], {
   enumerable: true,
-  initializer: function () {
-    return 'label label-info';
-  }
-}), _descriptor15 = _applyDecoratedDescriptor(_class2.prototype, 'trimValue', [bindable], {
-  enumerable: true,
-  initializer: function () {
-    return false;
-  }
-}), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'typeahead', [bindable], {
-  enumerable: true,
-  initializer: function () {
-    return null;
-  }
-}), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [bindable], {
-  enumerable: true,
   initializer: null
-}), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor19 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor20 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [bindable], {
-  enumerable: true,
-  initializer: null
-}), _descriptor21 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [bindable], {
-  enumerable: true,
-  initializer: null
 })), _class2)) || _class);

dist/es2015/index.js

 import { AbpTagsInputCustomElement } from './abp-tags-input';
+import { PickerConfig } from './picker-config';
 
-export function configure(aurelia) {
+export function configure(aurelia, callback) {
   aurelia.globalResources('./abp-tags-input');
+
+  let config = new PickerConfig();
+
+  if (typeof callback === 'function') {
+    callback(config);
+  }
 }
 
-export { AbpTagsInputCustomElement };
+export { AbpTagsInputCustomElement, PickerConfig };

dist/system/abp-tags-input.js

 'use strict';
 
-System.register(['aurelia-framework', 'jquery', 'bootstrap-tagsinput/dist/bootstrap-tagsinput'], function (_export, _context) {
+System.register(['aurelia-framework', 'jquery', 'bootstrap-tagsinput/dist/bootstrap-tagsinput', './picker-global-options'], function (_export, _context) {
   "use strict";
 
-  var inject, bindable, bindingMode, $, _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _descriptor17, _descriptor18, _descriptor19, _descriptor20, _descriptor21, AbpTagsInputCustomElement;
+  var inject, bindable, bindingMode, $, globalExtraOptions, globalPickerOptions, _dec, _dec2, _dec3, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, AbpTagsInputCustomElement;
 
@@ -64,3 +64,6 @@ function _initDefineProp(target, property, descriptor, context) {
       $ = _jquery.default;
-    }, function (_bootstrapTagsinputDistBootstrapTagsinput) {}],
+    }, function (_bootstrapTagsinputDistBootstrapTagsinput) {}, function (_pickerGlobalOptions) {
+      globalExtraOptions = _pickerGlobalOptions.globalExtraOptions;
+      globalPickerOptions = _pickerGlobalOptions.globalPickerOptions;
+    }],
     execute: function () {
@@ -75,40 +78,18 @@ _export('AbpTagsInputCustomElement', AbpTagsInputCustomElement = (_dec = inject(Element), _dec2 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec3 = bindable({ defaultBindingMode: bindingMode.twoWay }), _dec(_class = (_class2 = function () {
 
-          _initDefineProp(this, 'placeholder', _descriptor3, this);
+          _initDefineProp(this, 'bootstrapVersion', _descriptor3, this);
 
-          _initDefineProp(this, 'allowDuplicates', _descriptor4, this);
+          _initDefineProp(this, 'placeholder', _descriptor4, this);
 
-          _initDefineProp(this, 'cancelConfirmKeysOnEmpty', _descriptor5, this);
+          _initDefineProp(this, 'options', _descriptor5, this);
 
-          _initDefineProp(this, 'confirmKeys', _descriptor6, this);
+          _initDefineProp(this, 'onBeforeItemAdd', _descriptor6, this);
 
-          _initDefineProp(this, 'focusClass', _descriptor7, this);
+          _initDefineProp(this, 'onBeforeItemRemove', _descriptor7, this);
 
-          _initDefineProp(this, 'freeInput', _descriptor8, this);
+          _initDefineProp(this, 'onItemAdded', _descriptor8, this);
 
-          _initDefineProp(this, 'itemValue', _descriptor9, this);
+          _initDefineProp(this, 'onItemAddedOnInit', _descriptor9, this);
 
-          _initDefineProp(this, 'itemText', _descriptor10, this);
+          _initDefineProp(this, 'onItemRemoved', _descriptor10, this);
 
-          _initDefineProp(this, 'maxTags', _descriptor11, this);
-
-          _initDefineProp(this, 'maxChars', _descriptor12, this);
-
-          _initDefineProp(this, 'onTagExists', _descriptor13, this);
-
-          _initDefineProp(this, 'tagClass', _descriptor14, this);
-
-          _initDefineProp(this, 'trimValue', _descriptor15, this);
-
-          _initDefineProp(this, 'typeahead', _descriptor16, this);
-
-          _initDefineProp(this, 'onBeforeItemAdd', _descriptor17, this);
-
-          _initDefineProp(this, 'onBeforeItemRemove', _descriptor18, this);
-
-          _initDefineProp(this, 'onItemAdded', _descriptor19, this);
-
-          _initDefineProp(this, 'onItemAddedOnInit', _descriptor20, this);
-
-          _initDefineProp(this, 'onItemRemoved', _descriptor21, this);
-
           this.events = {};
@@ -124,7 +105,12 @@ this.methods = {};
 
-          this.attachOptions();
+          var pickerOptions = this.options || {};
+          if (!this.options.tagClass) {
+            pickerOptions.tagClass = this.bootstrapVersion === 3 ? 'label label-info' : 'badge badge-info';
+          }
+
           this.applyExposeEvents();
           this.exposeMethods();
 
-          this.domElm.tagsinput(this.options);
+          pickerOptions = Object.assign({}, globalPickerOptions, pickerOptions);
+          this.domElm.tagsinput(pickerOptions);
 
@@ -138,29 +124,2 @@ this.element = {
 
-        AbpTagsInputCustomElement.prototype.attachOptions = function attachOptions() {
-          var options = {
-            allowDuplicates: this.allowDuplicates,
-            cancelConfirmKeysOnEmpty: this.cancelConfirmKeysOnEmpty,
-            confirmKeys: this.confirmKeys,
-            focusClass: this.focusClass,
-            freeInput: this.freeInput,
-            maxChars: this.maxChars,
-            maxTags: this.maxTags,
-            tagClass: this.tagClass,
-            trimValue: this.trimValue,
-            typeahead: this.typeahead
-          };
-
-          if (this.itemValue) {
-            options.itemValue = this.itemValue;
-          }
-          if (this.itemText) {
-            options.itemText = this.itemText;
-          }
-          if (this.onTagExists) {
-            options.onTagExists = this.onTagExists;
-          }
-
-          this.options = options;
-        };
-
         AbpTagsInputCustomElement.prototype.applyExposeEvents = function applyExposeEvents() {
@@ -259,77 +218,30 @@ var _this = this;
         initializer: null
-      }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [bindable], {
+      }), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, 'bootstrapVersion', [bindable], {
         enumerable: true,
         initializer: function initializer() {
-          return '';
+          return globalExtraOptions.bootstrapVersion;
         }
-      }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'allowDuplicates', [bindable], {
+      }), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, 'placeholder', [bindable], {
         enumerable: true,
         initializer: function initializer() {
-          return false;
+          return '';
         }
-      }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'cancelConfirmKeysOnEmpty', [bindable], {
+      }), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, 'options', [bindable], {
         enumerable: true,
-        initializer: function initializer() {
-          return false;
-        }
-      }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'confirmKeys', [bindable], {
-        enumerable: true,
-        initializer: function initializer() {
-          return [13, 44];
-        }
-      }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'focusClass', [bindable], {
-        enumerable: true,
-        initializer: function initializer() {
-          return 'focus';
-        }
-      }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'freeInput', [bindable], {
-        enumerable: true,
-        initializer: function initializer() {
-          return true;
-        }
-      }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'itemValue', [bindable], {
-        enumerable: true,
         initializer: null
-      }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'itemText', [bindable], {
+      }), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [bindable], {
         enumerable: true,
         initializer: null
-      }), _descriptor11 = _applyDecoratedDescriptor(_class2.prototype, 'maxTags', [bindable], {
+      }), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [bindable], {
         enumerable: true,
         initializer: null
-      }), _descriptor12 = _applyDecoratedDescriptor(_class2.prototype, 'maxChars', [bindable], {
+      }), _descriptor8 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [bindable], {
         enumerable: true,
         initializer: null
-      }), _descriptor13 = _applyDecoratedDescriptor(_class2.prototype, 'onTagExists', [bindable], {
+      }), _descriptor9 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [bindable], {
         enumerable: true,
         initializer: null
-      }), _descriptor14 = _applyDecoratedDescriptor(_class2.prototype, 'tagClass', [bindable], {
+      }), _descriptor10 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [bindable], {
         enumerable: true,
-        initializer: function initializer() {
-          return 'label label-info';
-        }
-      }), _descriptor15 = _applyDecoratedDescriptor(_class2.prototype, 'trimValue', [bindable], {
-        enumerable: true,
-        initializer: function initializer() {
-          return false;
-        }
-      }), _descriptor16 = _applyDecoratedDescriptor(_class2.prototype, 'typeahead', [bindable], {
-        enumerable: true,
-        initializer: function initializer() {
-          return null;
-        }
-      }), _descriptor17 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemAdd', [bindable], {
-        enumerable: true,
         initializer: null
-      }), _descriptor18 = _applyDecoratedDescriptor(_class2.prototype, 'onBeforeItemRemove', [bindable], {
-        enumerable: true,
-        initializer: null
-      }), _descriptor19 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAdded', [bindable], {
-        enumerable: true,
-        initializer: null
-      }), _descriptor20 = _applyDecoratedDescriptor(_class2.prototype, 'onItemAddedOnInit', [bindable], {
-        enumerable: true,
-        initializer: null
-      }), _descriptor21 = _applyDecoratedDescriptor(_class2.prototype, 'onItemRemoved', [bindable], {
-        enumerable: true,
-        initializer: null
       })), _class2)) || _class));
@@ -336,0 +248,0 @@

dist/system/index.js

 'use strict';
 
-System.register(['./abp-tags-input'], function (_export, _context) {
+System.register(['./abp-tags-input', './picker-config'], function (_export, _context) {
   "use strict";
 
-  var AbpTagsInputCustomElement;
-  function configure(aurelia) {
+  var AbpTagsInputCustomElement, PickerConfig;
+  function configure(aurelia, callback) {
     aurelia.globalResources('./abp-tags-input');
+
+    var config = new PickerConfig();
+
+    if (typeof callback === 'function') {
+      callback(config);
+    }
   }
@@ -16,7 +22,11 @@
       AbpTagsInputCustomElement = _abpTagsInput.AbpTagsInputCustomElement;
+    }, function (_pickerConfig) {
+      PickerConfig = _pickerConfig.PickerConfig;
     }],
     execute: function () {
       _export('AbpTagsInputCustomElement', AbpTagsInputCustomElement);
+
+      _export('PickerConfig', PickerConfig);
     }
   };
 });

package.json

 {
   "name": "aurelia-bootstrap-tagsinput",
-  "version": "0.3.2",
+  "version": "1.0.0",
   "description": "An Aurelia Custom Element for the 3rd party addon [Bootstrap Tags Input]",
@@ -13,3 +13,4 @@ "keywords": [
       "resources": [
-        "aurelia-bootstrap-tagsinput/abp-tags-input"
+        "aurelia-bootstrap-tagsinput/abp-tags-input",
+        "aurelia-bootstrap-tagsinput/picker-config"
       ]
@@ -16,0 +17,0 @@ }

README.md

@@ -8,2 +8,3 @@ # Aurelia-Bootstrap-Tagsinput
 A quick example of the code in action. Note that the value is available under the `value.bind`.
+
 ```html
@@ -13,23 +14,32 @@ <abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
 
-### Available Attributes/Options
-Every single options that are part of `Bootstrap Tags Input` are available as bindable or as regular attributes. For the complete list, please visit the official site [Bootstrap Tags Input - Options](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/#options).
-There is 2 ways to call options (with a `bind` attribute or as a regular attribute).
+### Available Options
+Every options of `Bootstrap Tags Input` can be called through `options.bind=""`. For the complete list, please visit the official site [Bootstrap Tags Input - Options](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/#options).
 
-Example
+**NOTE:** 
+The picker options can also be defined globally through `main.js` via a `config.options` configuration, see [Global Options](#globaloption)
 
+Examples
+
 _regular attribute (View)_
+
 ```html
-<abp-tags-input item-value="id" item-text="label"></abp-tags-input>
+<abp-tags-input item-value="id" options.bind="{ itemText: 'label' }"></abp-tags-input>
 ```
 
-_bind attribute (View + ViewModel)_
+_from the ViewModel_
+
 ```html
-<abp-tags-input confirm-keys.bind="tagConfirmKeys"></abp-tags-input>
+<abp-tags-input options.bind="pickerOptions"></abp-tags-input>
 ```
+
 ```javascript
 export class Example {
-    tagConfirmKeys = [13, 44];
+  pickerOptions = {
+    itemText: 'label'
+  }
 }
 ```
 
+<a name="methods"></a>
+
 ### Available Methods/Functions
@@ -43,2 +53,3 @@ Again every single methods which comes with `Bootstrap Tags Input` are available. For the complete list, please visit the official site [Bootstrap Tags Input - Functions](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/#methods).
 _View (exposing the element)_
+
 ```html
@@ -49,4 +60,7 @@ <abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
 _ViewModel (calling the method)_
+
 ```javascript
 export class Example {
+  @bindable tag;
+
   tagChanged() {
@@ -58,2 +72,4 @@ this.tag.methods.add('tag1');
 
+<a name="events"></a>
+
 ### Available Events
@@ -70,2 +86,3 @@ Every events of `Bootstrap Tags Input` are, as no surprises, available as well. For the complete list, please visit the official site [Bootstrap Tags Input - Events](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/#events).
 _View (exposing the element)_
+
 ```html
@@ -76,2 +93,3 @@ <abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
 _ViewModel (calling the onEvent trigger)_
+
 ```javascript
@@ -89,2 +107,10 @@ export class Example {
 
+### Bootstrap 4
+Since `Bootstrap` is in the middle of updating to version 4, we might as well support it. To give flexibility, an extra option (`bootstrapVersion`) was added to the config. The default is set to version 3, for more detail see [Global Options](#globaloption)
+
+Example
+```javascript
+.plugin('aurelia-bootstrap-tagsinput', config => { config.extra.bootstrapVersion = 4; });
+```
+
 ## Installation
@@ -94,5 +120,9 @@ You can run the examples or build your own by doing the following.
 ### Aurelia-CLI / Webpack
+
 ```bash
 npm install --save aurelia-bootstrap-tagsinput
 ```
+
+<a name="cli"></a>
+
 #### Aurelia-CLI
@@ -122,9 +152,16 @@ For `CLI` you will need to add (`bootstrap-tagsinput` and `aurelia-bootstrap-tagsinput`) to your `aurelia.json` file.
 
-#### Aurelia (main)
-Make the plugin available globally in your `main.js` file. Please note the exported class is `abp-tags-input`
+<a name="mainjs"></a>
 
+#### Aurelia (main.js)
+Make the plugin available globally in your `main.js` file. Please note the exported class is `abp-tags-input`.
+
+#### For WebPack only (main.js)
+
 ```javascript
-// for WebPack only, also import CSS 
-// import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';
+import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';
+```
 
+#### CLI/WebPack (main.js)
+
+```javascript
 export function configure(aurelia) {
@@ -141,3 +178,30 @@ aurelia.use
 
+<a name="globaloption"></a>
+
+### Global Options
+You can change any of the global options directly in the `main.js` through a `config` as shown below:
+
+```javascript
+export function configure(aurelia) {
+  aurelia.use
+    .standardConfiguration()
+    .developmentLogging()
+    .plugin('aurelia-bootstrap-tagsinput', config => {
+      // extra attributes, with config.extra
+      config.extra.bootstrapVersion = 4;
+
+      // or any picker options, with config.options
+      config.options.tagConfirmKeys = [13, 44]
+    });
+
+  aurelia.start().then(() => aurelia.setRoot());
+}
+```
+
 ### License
-[MIT License](https://github.com/ghiscoding/Aurelia-Bootstrap-Plugins/blob/master/LICENSE)
+[MIT License](https://github.com/ghiscoding/Aurelia-Bootstrap-Plugins/blob/master/LICENSE)
+
+### Contributions/Comments
+Contributions are welcome. This plugin was created to help the community and myself and was mainly done through my free time. If you wish to suggest something and/or want to make a PR (Pull Request), please feel free to do so. Also, please be respectful. 
+
+Finally, if you like and use this Aurelia-Bootstrap-Plugin, please click on the :star: and add it as a favorite.

src/abp-tags-input.js

 import {inject, bindable, bindingMode} from 'aurelia-framework';
 import $ from 'jquery';
 import 'bootstrap-tagsinput/dist/bootstrap-tagsinput';
-//import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';
-//import 'bootstrap-tagsinput/dist/bootstrap-tagsinput-typeahead.css';
+import {globalExtraOptions, globalPickerOptions} from './picker-global-options';
 
@@ -13,18 +12,7 @@ @inject(Element)
   // plugin own variables
+  @bindable bootstrapVersion = globalExtraOptions.bootstrapVersion;
   @bindable placeholder = '';
 
-  // options (from the View), with some defaults
-  @bindable allowDuplicates = false;
-  @bindable cancelConfirmKeysOnEmpty = false;
-  @bindable confirmKeys = [13, 44];
-  @bindable focusClass = 'focus';
-  @bindable freeInput = true;
-  @bindable itemValue;
-  @bindable itemText;
-  @bindable maxTags;
-  @bindable maxChars;
-  @bindable onTagExists;
-  @bindable tagClass = 'label label-info';
-  @bindable trimValue = false;
-  @bindable typeahead = null;
+  // picker options
+  @bindable options;
 
@@ -51,4 +39,10 @@ // events (from the View)
 
+    // Bootstrap 3 & 4 have different class names
+    //if tagClass isn't yet configured we will define the tagClass depending on the version
+    let pickerOptions = this.options || {};
+    if (!this.options.tagClass) {
+      pickerOptions.tagClass = this.bootstrapVersion === 3 ? 'label label-info' : 'badge badge-info';
+    }
+
     // create TagsInput
-    this.attachOptions();
     this.applyExposeEvents();
@@ -58,3 +52,4 @@ this.exposeMethods();
     // finally create the tagsinput with all options
-    this.domElm.tagsinput(this.options);
+    pickerOptions = Object.assign({}, globalPickerOptions, pickerOptions);
+    this.domElm.tagsinput(pickerOptions);
 
@@ -71,34 +66,2 @@ // expose the element object to the outside
   /**
-   * Initialize tagsinput options
-   */
-  attachOptions() {
-    let options = {
-      allowDuplicates: this.allowDuplicates,
-      cancelConfirmKeysOnEmpty: this.cancelConfirmKeysOnEmpty,
-      confirmKeys: this.confirmKeys,
-      focusClass: this.focusClass,
-      freeInput: this.freeInput,
-      maxChars: this.maxChars,
-      maxTags: this.maxTags,
-      tagClass: this.tagClass,
-      trimValue: this.trimValue,
-      typeahead: this.typeahead
-    };
-
-    // some of the options that have functions don't work well with defaults
-    // so we will instantiate them only if they are defined by the user
-    if (this.itemValue) {
-      options.itemValue = this.itemValue;
-    }
-    if (this.itemText) {
-      options.itemText = this.itemText;
-    }
-    if (this.onTagExists) {
-      options.onTagExists = this.onTagExists;
-    }
-
-    this.options = options;
-  }
-
-  /**
    * Apply/expose tagsinput events
@@ -105,0 +68,0 @@ * Each event has 2 ways of triggering an event (from the View as an attribute or from the ViewModel has a function call)

src/index.js

 import {AbpTagsInputCustomElement} from './abp-tags-input';
+import {PickerConfig} from './picker-config';
 
-export function configure(aurelia) {
+export function configure(aurelia, callback) {
   aurelia.globalResources('./abp-tags-input');
+
+  let config = new PickerConfig();
+
+  if (typeof callback === 'function') {
+    callback(config);
+  }
 }
 
 export {
-  AbpTagsInputCustomElement
+  AbpTagsInputCustomElement,
+  PickerConfig
 };

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

49

increased by25.64%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

196

increased by48.48%

Worsened metrics

Total package byte prevSize

246523

decreased by-2.73%

Lines of code

1441

decreased by-12.13%

No dependency changes