text: /**
   * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
   * @copyright Aimeos (aimeos.org), 2017-2018
   */
  
  
  
  Vue.component('auto-complete', {
  	template: '<input type="text" class="form-control" v-bind:name="name" v-bind:value="value" v-bind:readonly="readonly" v-bind:required="required" v-bind:tabindex="tabindex" />',
  	props: ['keys', 'name', 'value', 'readonly', 'required', 'tabindex'],
  
  	methods: {
  		create: function() {
  			var instance = $(this.$el).autocomplete({
  				source: this.keys || [],
  				change: this.select,
  				minLength: 0,
  				delay: 0
  			});
  
  			this.instance = instance;
  			this.instance.on('focus', function() {
  				instance.autocomplete("search", "");
  			});
  		},
  
  		destroy: function() {
  			if(this.instance) {
  				this.instance.off().autocomplete('destroy');
  				this.instance = null;
  			}
  		},
  
  		select: function(ev, ui) {
  			this.$emit('input', $(ev.currentTarget).val(), ui.item);
  		}
  	},
  
  	mounted: function() {
  		if(!this.readonly) {
  			this.create();
  		}
  	},
  
  	beforeDestroy: function() {
  		this.destroy();
  	}
  });
  
  
  
  Vue.component('combo-box', {
  	template: '\
  		<select required class="template" v-bind:name="name" v-bind:readonly="readonly" v-bind:tabindex="tabindex">\
  			<option v-bind:value="value">{{ label || value }}</option>\
  		</select>\
  	',
  	props: ['index', 'name', 'value', 'label', 'readonly', 'tabindex', 'getfcn'],
  
  	beforeDestroy: function() {
  		this.destroy();
  	},
  
  	methods: {
  		create: function() {
  			this.instance = $(this.$el).combobox({
  				getfcn: this.getfcn(this.index),
  				select: this.select
  			});
  			return this.instance;
  		},
  
  		destroy: function() {
  			if(this.instance) {
  				this.instance.off().combobox('destroy');
  				this.instance = null;
  			}
  			return this;
  		},
  
  		select: function(ev, ui) {
  			this.$emit('select',  {index: this.index, value: ui.item[0].value, label: ui.item[0].label});
  		}
  	},
  
  	mounted: function() {
  		if(!this.readonly) {
  			this.create();
  		}
  	},
  
  	updated : function() {
  		if(this.readonly && this.instance) {
  			return this.destroy();
  		}
  
  		if(!this.readonly && !this.instance) {
  			this.create().combobox('instance').input[0].value = this.label;
  		}
  	}
  });
  
  
  
  Vue.component('html-editor', {
  	template: '\
  		<textarea rows="6" class="form-control htmleditor" v-bind:id="id" v-bind:name="name" v-bind:value="value"\
  			v-bind:placeholder="placeholder" v-bind:readonly="readonly" v-bind:tabindex="tabindex">\
  		</textarea>',
  	props: ['id', 'name', 'value', 'placeholder', 'readonly', 'tabindex'],
  
  	beforeDestroy: function() {
  		if(this.instance) {
  			this.instance.destroy();
  			this.instance = null;
  		}
  	},
  
  	data: function() {
  		return {
  			instance: null,
  			text: null
  		};
  	},
  
  	methods: {
  		change: function() {
  			this.text = this.instance.getData();
  			this.$emit('input', this.text);
  		},
  	},
  
  	mounted: function() {
  		this.instance = CKEDITOR.replace(this.id, {
  			extraAllowedContent: 'div(*);span(*);p(*);',
  			toolbar: Aimeos.editorcfg,
  			extraPlugins: 'divarea',
  			initialData: this.value,
  			readOnly: this.readonly,
  			autoParagraph: false,
  			entities: false
  		});
  		this.instance.on('change', this.change);
  	},
  
  	watch: {
  		value: function(val, oldval) {
  			if(val !== oldval && val !== this.text ) {
  				this.instance.setData(val);
  			}
  		}
  	}
  });
  
  
  
  Vue.component('taxrates', {
  	template: '\
  		<div> \
  			<input type="hidden" v-bind:name="name" v-bind:value="payload"> \
  			<table> \
  				<tr v-for="(val, type) in taxrates" v-bind:key="type"> \
  					<td class="input-group"> \
  						<input class="form-control item-taxrate" required="required" step="0.01" type="number" v-bind:placeholder="placeholder" \
  							v-bind:readonly="readonly" v-bind:tabindex="tabindex" v-bind:value="val" v-on:input="update(type, $event.target.value)" /> \
  						<div v-if="type" class="input-group-append"><span class="input-group-text">{{ type.toUpperCase() }}</span></div> \
  					</td> \
  					<td class="actions"> \
  						<div v-if="!readonly && !type" class="dropdown"> \
  							<button class="btn act-add fa dropdown-toggle" v-bind:tabindex="tabindex" \
  								type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> \
  							</button> \
  							<div class="dropdown-menu dropdown-menu-right"> \
  								<a v-for="(rate, code) in types" class="dropdown-item" href="#" v-on:click="add(code, rate)">{{ code.toUpperCase() }}</a> \
  							</div> \
  						</div> \
  						<div v-else class="btn act-delete fa" v-on:click="remove(type)"></div> \
  					</td> \
  				</tr> \
  			</table> \
  		</div> \
  	',
  	props: ['name', 'placeholder', 'readonly', 'tabindex', 'taxrates', 'types'],
  
  	computed: {
  		payload: function() {
  			return JSON.stringify(this.taxrates);
  		}
  	},
  
  	created: function() {
  		delete this.types[''];
  	},
  
  	methods: {
  		add: function(type, val) {
  			this.$set(this.taxrates, type, val);
  		},
  
  		remove: function(type) {
  			this.$delete(this.taxrates, type);
  		},
  
  		update: function(type, val) {
  			this.$set(this.taxrates, type, val);
  		}
  	}
  });
  