feat(settings-editor): allow setting the input width

src/elements/settings-editor/i-setting-info.ts

@@ -9,4 +9,5 @@ export interface ISettingInfo {
 	description?: string | undefined;
 	clientEditor: ClientEditor;
 	children?: ISettingInfo[] | undefined;
+	width?: string;
 }

src/elements/settings-editor/settings-editor.html

@@ -21,7 +21,7 @@ <h6 class="primary-text" click.delegate="s.toggleExpanded()">${s.info.name}</h6>
 						<button md-button="flat: true;" class="error-text" click.delegate="cancel(s)"><i class="material-icons">clear</i></button>
 						<button if.bind="showHistory" md-button="flat: true;" class="blue-text" click.delegate="history(s)"><i class="material-icons">history</i></button>
 					</div>
-					<variant-viewer else value.bind="s.value" options.bind="s.info.options" data-type.bind="s.info.clientEditor" edit.delegate="edit(s)" change.delegate="save(s)"></variant-viewer>
+					<variant-viewer else value.bind="s.value" options.bind="s.info.options" data-type.bind="s.info.clientEditor" edit.delegate="edit(s)" change.delegate="save(s)" width.bind="s.info.width"></variant-viewer>
 				</div>
 			</div>
 		</li>

src/elements/variant-viewer/variant-viewer.select.html

@@ -1,5 +1,5 @@
 <template>
-	<div style="width: 120px">
+	<div style="width: ${selectWidth || '120px'}">
 		<select md-select value.bind="value" change.delegate="change($event)">
 			<option repeat.for="o of options" model.bind="o.key">${o.value}</option>
 		</select>

src/elements/variant-viewer/variant-viewer.ts

@@ -12,6 +12,9 @@ export class VariantViewer {
 	@au.bindable
 	dataType: ClientEditor;
 
+	@au.bindable
+	selectWidth: string = "120px";
+
 	@au.bindable
 	options: ISelectOption[];