edit-element.html

<link rel="import" href="../bower_components/iron-input/iron-input.html"><link rel="import" href="../bower_components/iron-icons/iron-icons.html"><link rel="import" href="../bower_components/iron-icon/iron-icon.html"><dom-module id="edit-element"><template><style>
		:host {
			display: flex;
		}

		.label, editControl {
			flex-grow: 1;
			width: 30%;
		}

		</style><div class="label">{{label}}</div><editcontrol id="editControl"><input id="input" is="iron-input" bind-value="{{value}}" hidden="true"></editcontrol><div><iron-icon icon="help" title="[[helptext]]"></iron-icon></div></template></dom-module><script>
"use strict";
	var EditElement = new Polymer({
		is: 'edit-element',

		properties: {
			label: String,
			type: {
				type: String
			},
			helpText: String,

			value: {
				type: String,
				notify: true
			},

			options: {
				type: Array,
				value: function() { return []; }
			},

			setupDone: {
				type: Boolean,
				value: false
			}
		},

		// slack-channel: sjmiles 23:57 @xaratas: property change order is not guaranteed, use explicit dependencies in observers 
		observers: ['typeAndValueSet(type, value)'],
		
		typeAndValueSet: function(newType, newValue) {
			if(!this.setupDone) {
				this.setup();
				this.setupDone = true;
			}
		},

		setup: function() {
			if(this.type == "select") {
				this.asSelect(this.options, this.value);
			}
			if(this.type == "input") {
				this.asInput(this.value);
			}
			if(this.type == "text") {
				this.asText(this.options, this.value);
			}
		},

		asSelect: function(options, value) {
			var	betterSelect = new BetterSelect(options, value);
			Polymer.dom(this.$.editControl).appendChild(betterSelect);
		},
		 
		asInput: function(value) {
			this.value = value;
			this.$.input.hidden = false;
		},

		asText: function(options, value) {
			var text = "";
			// momentan ist value eine guid
			text = PoeQuestEditor.GUIDS_byDisplayName.get(value);
			var span = document.createElement("span");
			span.innerHTML = text;
			Polymer.dom(this.$.editControl).appendChild(span);
		}

	});
</script>