x-input.js

/*

	Model-driven single-value input widgets.
	Written by Cosmin Apreutesei. Public Domain.

WIDGETS

	checkbox
	radiogroup
	textedit
	textarea
	passedit
	spinedit
	tagsedit
	placeedit
	googlemaps
	slider
	calendar
	date_dropdown
	dateedit
	timepicker
	timeofdayedit
	richedit
	image
	sql_editor
	chart
	mu
	switcher
	input
	form

*/

/* ---------------------------------------------------------------------------
// row widget mixin
// ---------------------------------------------------------------------------
publishes:
	e.nav
	e.nav_id
	e.row
implements:
	do_update
calls:
	do_update_row([row])
--------------------------------------------------------------------------- */

function row_widget(e, enabled_without_nav) {

	selectable_widget(e)
	contained_widget(e)
	serializable_widget(e)

	e.isinput = true // auto-focused when tabs items are changed.

	e.do_update = function() {
		let row = e.row
		e.xoff()
		e.disable('no_nav', !enabled_without_nav)
		e.readonly = e.nav && !e.nav.can_change_val(row)
		e.xon()
		e.do_update_row(row)
	}

	function row_changed() {
		e.update()
	}

	function bind_nav(nav, on) {
		if (!e.bound)
			return
		if (!nav)
			return
		nav.on('focused_row_changed', row_changed, on)
		nav.on('focused_row_state_changed', row_changed, on)
		nav.on('focused_row_cell_state_changed', row_changed, on)
		nav.on('display_vals_changed', row_changed, on)
		nav.on('reset', row_changed, on)
		nav.on('col_text_changed', row_changed, on)
		nav.on('col_info_changed', row_changed, on)
		e.fire('bind_nav', nav, on)
	}

	e.set_nav = function(nav1, nav0) {
		assert(nav1 != e)
		bind_nav(nav0, false)
		bind_nav(nav1, true)
	}
	e.prop('nav', {store: 'var', private: true})
	e.prop('nav_id', {store: 'var', bind_id: 'nav', type: 'nav', attr: true})

	e.property('row', () => e.nav && e.nav.focused_row)

	e.val = function(col) {
		return e.nav && e.nav.cell_val(e.row, col)
	}

}

/* ---------------------------------------------------------------------------
// val widget mixin
// ---------------------------------------------------------------------------
publishes:
	e.nav
	e.nav_id
	e.col
	e.field
	e.row
	e.val
	e.input_val
	e.error
	e.modified
	e.set_val(v, ev)
	e.reset_val(v, ev)
	e.display_val_for()
implements:
	e.do_update([opt])
calls:
	e.do_update_val(val, ev)
	e.do_update_errors(errors, ev)
	e.do_error_tooltip_check()
	e.to_val(v) -> v
	e.from_val(v) -> v
--------------------------------------------------------------------------- */

function val_widget(e, enabled_without_nav, show_error_tooltip) {

	selectable_widget(e)
	contained_widget(e)
	serializable_widget(e)

	e.isinput = true // auto-focused when tabs items are changed.

	// nav dynamic binding ----------------------------------------------------

	function bind_field(on) {
		assert(!(on && !e.bound))
		assert(e.owns_field != null) // can't call this before init().
		let field0 = e.field
		let field1 = on && e.nav && e.nav.all_fields[e.col] || null
		if (field0 == field1)
			return
		if (field0)
			e.fire('bind_field', false)
		e.field = field1
		if (field1)
			e.fire('bind_field', true)
	}

	function val_changed() {
		bind_field(true)
		e.update()
	}

	function nav_reset() {
		bind_field(true)
		e.update()
	}

	function col_attr_changed() {
		e.update()
	}

	e.do_update_val = noop

	function cell_state_changed(row, field, changes, ev) {
		if (e.updating)
			return
		bind_field(true)
		if (changes.input_val) {
			e.do_update_val(changes.input_val[0], ev)
			e.class('modified', e.nav.cell_modified(row, field))
			e.fire('input_val_changed', changes.input_val[0], ev)
		}
		if (changes.errors) {
			e.invalid = e.nav.cell_has_errors(row, field)
			e.class('invalid', e.invalid)
			e.do_update_errors(changes.errors[0], ev)
		}
		// state_changed events are only fired in standalone mode!
		if (e.owns_field)
			e.fire('state_changed', changes)
	}

	function bind_nav(nav, col, on) {
		if (on && !e.bound)
			return
		if (!(nav && col != null))
			return
		nav.on('focused_row_changed', val_changed, on)
		nav.on('focused_row_cell_state_changed_for_'+col, cell_state_changed, on)
		nav.on('display_vals_changed_for_'+col, val_changed, on)
		nav.on('reset', nav_reset, on)
		nav.on('col_text_changed_for_'+col, col_attr_changed, on)
		nav.on('col_info_changed_for_'+col, col_attr_changed, on)
		bind_field(on)
	}

	let field_opt
	let init = e.init
	e.init = function() {
		if (!e.nav && !e.nav_id && !e.col) { // standalone mode.
			field_opt = e.field || {}
			field_opt.type = or(field_opt.type, e.field_type)
			e.owns_field = true
		} else {
			e.owns_field = false
		}
		init()
	}

	e.on('bind', function val_widget_bind(on) {
		if (e.owns_field) {
			if (on) {
				let nav = global_val_nav()
				let field = nav.add_field(field_opt)
				if (initial_val !== undefined)
					nav.set_cell_val(nav.all_rows[0], field, initial_val)
				initial_val = undefined
				e.xoff()
				e.nav = nav
				e.col = field.name
				e.xon()
			} else {
				let nav = e.nav
				let field = e.field
				e.xoff()
				e.nav = null
				e.col = null
				e.xon()
				nav.remove_field(field)
			}
		} else {
			bind_nav(e.nav, e.col, on)
		}
	})

	function set_nav_col(nav1, nav0, col1, col0) {
		bind_nav(nav0, col0, false)
		bind_nav(nav1, col1, true)
	}

	e.set_nav = function(nav1, nav0) {
		assert(nav1 != e)
		set_nav_col(nav1, nav0, e.col, e.col)
	}
	e.prop('nav', {store: 'var', private: true})
	e.prop('nav_id' , {store: 'var', bind_id: 'nav', type: 'nav'})

	e.set_col = function(col1, col0) {
		set_nav_col(e.nav, e.nav, col1, col0)
	}
	e.prop('col', {store: 'var', type: 'col', col_nav: () => e.nav})

	// model ------------------------------------------------------------------

	e.to_val   = function(v) { return v; }
	e.from_val = function(v) { return v; }

	e.property('row', () => e.nav && e.nav.focused_row)

	function get_val() {
		let row = e.row
		return row && e.field ? e.from_val(e.nav.cell_val(row, e.field)) : null
	}
	function get_input_val() {
		let row = e.row
		return row && e.field ? e.from_val(e.nav.cell_input_val(row, e.field)) : null
	}

	e.reset_val = function(v, ev) {
		v = e.to_val(v)
		if (v === undefined)
			v = null
		if (e.row && e.field)
			e.nav.reset_cell_val(e.row, e.field, v, ev)
	}

	let initial_val
	e.set_val = function(v, ev) {
		v = e.to_val(v)
		if (v === undefined)
			v = null
		if (e.field && e.row)
			e.nav.set_cell_val(e.row, e.field, v, ev)
		else
			initial_val = v
	}
	e.property('val', get_val, e.set_val)
	e.property('input_val', get_input_val)

	e.property('errors',
		function() {
			let row = e.row
			return row && e.field ? e.nav.cell_errors(row, e.field) : undefined
		},
		function(errors) {
			if (e.row && e.field) {
				e.nav.begin_set_state(e.row)
				e.nav.set_cell_state(e.col, 'errors', errors)
				e.nav.end_set_state()
			}
		},
	)

	e.property('modified', function() {
		let row = e.row
		return row && e.field ? e.nav.cell_modified(row, e.field) : false
	})

	e.placeholder_display_val = function() {
		return div({class: 'x-input-placeholder'})
	}

	e.display_val_for = function(v) {
		if (!e.row || !e.field)
			return e.placeholder_display_val()
		return e.nav.cell_display_val_for(e.row, e.field, v)
	}

	// view -------------------------------------------------------------------

	e.prop('readonly', {store: 'var', type: 'bool', attr: true, default: false})

	e.do_update = function() {
		let row = e.row
		let field = e.field
		let readonly = e.nav && !e.nav.can_change_val(row, field)
		e.xoff()
		e.disable('read_only', readonly && !e.set_readonly)
		e.readonly = readonly
		e.xon()

		bind_field(true)
		e.do_update_val(e.input_val)
		e.class('modified', e.nav && row && field && e.nav.cell_modified(row, field))
		e.invalid = e.nav && row && field && e.nav.cell_has_errors(row, field)
		e.class('invalid', e.invalid)
		e.do_update_errors(e.errors)
	}

	e.do_error_tooltip_check = function() {
		return e.invalid && !e.hasclass('picker')
			&& (e.hasfocus || e.hovered)
	}

	e.do_update_errors = function(errors) {
		if (show_error_tooltip === false)
			return
		if (!e.error_tooltip) {
			if (!e.invalid)
				return // don't create it until needed.
			e.error_tooltip = tooltip({kind: 'error', target: e,
				check: e.do_error_tooltip_check})
		}
		if (e.invalid) {
			e.error_tooltip.text = errors
				.filter(err => !err.passed)
				.map(err => err.message)
				.ul({class: 'x-error-list'}, true)
		}
		e.error_tooltip.update()
	}

}

// ---------------------------------------------------------------------------
// button
// ---------------------------------------------------------------------------

component('x-button', 'Input', function(e) {

	row_widget(e, true)
	focusable_widget(e)
	editable_widget(e)

	let html_text = unsafe_html(e.html)
	e.clear()

	e.icon_box = span({class: 'x-button-icon'})
	e.text_box = span({class: 'x-button-text'})
	e.icon_box.hidden = true
	e.add(e.icon_box, e.text_box)

	e.prop('href', {store:'var', attr: true})
	e.set_href = function(s) {
		if (s) {
			if (!e.link) { // make a link for google bot to follow.
				let noscript = tag('noscript')
				e.add(noscript)
				e.link = tag('a')
				e.link.set(TC(e.text))
				e.link.title = e.title
				noscript.set(e.link)
			}
			e.link.href = s
		} else if (e.link) {
			e.link.href = null
		}
	}

	e.format_text = function(s) {
		let row = e.row
		if (!row) return s
		return render_string(s, e.nav.serialize_row_vals(row))
	}

	function update_text() {
		s = e.format_text(e.text)
		e.text_box.set(s, 'pre-wrap')
		e.class('text-empty', !s)
		if (e.link)
			e.link.set(TC(s))
	}

	e.set_text = function(s) {
		e.update()
	}
	e.prop('text', {store: 'var', default: 'OK', slot: 'lang'})

	e.do_after('init', function() {
		if (html_text != null && html_text != e.text) {
			e.xoff()
			e.text = html_text
			e.xon()
		} else {
			e.set_text(e.text) // set default
		}
	})

	e.set_icon = function(v) {
		if (isstr(v))
			e.icon_box.attr('class', 'x-button-icon '+v)
		else
			e.icon_box.set(v)
		e.icon_box.hidden = !v
	}
	e.prop('icon', {store: 'var', type: 'icon'})
	e.prop('load_spin', {store: 'var', attr: true})

	e.prop('primary', {store: 'var', type: 'bool', attr: true})
	e.prop('bare'   , {store: 'var', type: 'bool', attr: true})
	e.prop('danger' , {store: 'var', type: 'bool', attr: true})
	e.prop('confirm', {store: 'var', attr: true})

	e.activate = function() {
		if (e.effectively_hidden || e.effectively_disabled)
			return
		if (e.confirm)
			if (!confirm(e.confirm))
				return
		if (e.href) {
			exec(e.href)
			return
		}
		// action can be set directly or can be a global with a maching name.
		if (e.action)
			e.action()
		let action_name = e.action_name || (e.id && e.id+'_action')
		let action = window[action_name]
		if (action)
			action.call(e)
		e.fire('activate')
	}

	function set_active(on) {
		e.class('active', on)
		e.fire('active', on)
		if (!on)
			e.activate()
	}

	e.on('keydown', function keydown(key, shift, ctrl) {
		if (e.widget_editing) {
			if (key == 'Enter') {
				if (ctrl) {
					e.text_box.insert_at_caret('<br>')
					return
				} else {
					e.widget_editing = false
					return false
				}
			}
			return
		}
		if (key == ' ' || key == 'Enter') {
			set_active(true)
			return false
		}
	})

	e.on('keyup', function keyup(key) {
		if (e.hasclass('active')) {
			// ^^ always match keyups with keydowns otherwise we might catch
			// a keyup from someone else's keydown, eg. a dropdown menu item
			// could've been selected by pressing Enter which closed the menu
			// and focused this button back and that Enter's keyup got here.
			if (key == ' ' || key == 'Enter') {
				set_active(false)
			}
			return false
		}
	})

	e.on('pointerdown', function(ev) {
		if (e.widget_editing)
			return
		e.focus()
		set_active(true)
		return this.capture_pointer(ev, null, function() {
			set_active(false)
		})
	})

	// widget editing ---------------------------------------------------------

	e.set_widget_editing = function(v) {
		e.text_box.contenteditable = v
		if (!v)
			e.text = e.text_box.innerText
	}

	e.on('pointerdown', function(ev) {
		if (e.widget_editing && ev.target != e.text_box) {
			e.text_box.focus()
			e.text_box.select_all()
			return this.capture_pointer(ev)
		}
	})

	function prevent_bubbling(ev) {
		if (e.widget_editing)
			ev.stopPropagation()
	}
	e.text_box.on('pointerdown', prevent_bubbling)
	e.text_box.on('click', prevent_bubbling)

	e.text_box.on('blur', function() {
		e.widget_editing = false
	})

	// ajax notifications -----------------------------------------------------

	e.on('load', function(ev, ...args) {
		e.disable('loading', ev != 'done')
		let s = e.load_spin
		if (s) {
			s = repl(s, '', true) // html attr
			s = repl(s, true, 'fa-spin')
			s = repl(s, 'reverse', 'fa-spin fa-spin-reverse')
			e.icon_box.class(s, ev == 'start')
		}
	})

	e.load = function(url, success, fail, opt) {
		return get(url, success, fail, assign({notify: e}, opt))
	}

	e.post = function(url, upload, success, fail, opt) {
		return post(url, upload, success, fail, assign({notify: e}, opt))
	}

	// "drawing attention" animation ------------------------------------------

	e.draw_attention = function() {
		if (e.disabled)
			return
		e.style.animation = 'none'
		raf(function() { e.style.animation = 'x-attention .5s' })
	}

	// row changing -----------------------------------------------------------

	e.do_update_row = function(row) {
		e.disabled = e.nav && !row
		update_text()
	}

})

/* ---------------------------------------------------------------------------
// input-box widget mixin
// ---------------------------------------------------------------------------
features:
	- layout with focus-box and info-box underneath.
	- optional (animated) inner label.
	- optional info button tied to the focus-box vs info-box underneath.
publishes:
	e.label
	e.nolabel
	e.align
	e.mode
	e.info
	e.infomode
calls:
	add_info_button()
	add_info_box()
	create_label_placeholder()
--------------------------------------------------------------------------- */

function input_widget(e) {

	e.class('x-input-widget')

	e.prop('label'   , {store: 'var', slot: 'lang', attr: true})
	e.prop('nolabel' , {store: 'var', type: 'bool', attr: true})
	e.prop('align'   , {store: 'var', type: 'enum', enum_values: ['left', 'right'], default: 'left', attr: true})
	e.prop('mode'    , {store: 'var', type: 'enum', enum_values: ['default', 'inline'], default: 'default', attr: true})
	e.prop('info'    , {store: 'var', slot: 'lang', attr: true})
	e.prop('infomode', {store: 'var', slot: 'lang', type: 'enum', enum_values: ['under', 'button', 'hidden'], attr: true, default: 'under'})
	e.prop('field_type', {store: 'var', attr: true, internal: true})

	e.add_info_button = e.add // stub
	e.add_info_box = e.add // stub

	function update_info() {
		let info = e.info || (e.field && e.field.info)

		if (info && e.infomode == 'button' && !e.info_button) {
			e.info_button = button({
				classes: 'x-input-info-button',
				icon: 'fa fa-info-circle',
				text: '',
				focusable: false,
			})
			e.info_tooltip = tooltip({
				kind: 'info',
				side: 'bottom',
				align: 'end',
			})
			e.info_tooltip.on('click', function() {
				this.close()
			})
			e.info_button.action = function() {
				if (e.info_tooltip.target) {
					e.info_tooltip.target = null
				} else {
					e.info_tooltip.target = e.info_button
				}
			}
			e.add_info_button(e.info_button)
		}
		if (e.info_button) {
			e.info_tooltip.text = info
			e.info_button.hidden = !(e.infomode == 'button' && !!info)
		}

		if (info && e.infomode == 'under' && !e.info_box) {
			e.info_box = div({class: 'x-input-info'})
			e.add_info_box(e.info_box)
		}
		if (e.info_box) {
			e.info_box.set(info)
			e.info_box.hidden = !(e.infomode == 'under' && !!info)
		}

	}

	e.create_label_placeholder = function() {
		return div({class: 'x-input-placeholder'})
	}

	e.caption = function() {
		return e.label || e.attr('label') || (e.field && e.field.text) || null
	}

	e.set_label = function() {
		e.update()
		e.fire('caption_changed')
	}

	e.do_after('do_update', function() {
		update_info()
		let s = !e.nolabel && (e.label || e.attr('label') || (e.field && e.field.text)) || null
		if (s != null && e.field && e.field.not_null && e.label_show_star != false)
			s = s + ' *'
		e.class('with-label', !!s)
		e.label_box.set(!e.nolabel ? s || e.create_label_placeholder() : null)
	})

	e.on('keydown', function(key, shift, ctrl) {

		if (key == 'F1') {
			if (e.info_button)
				e.info_button.activate()
			return false
		}

		if (ctrl && key == 's') {
			if (e.nav)
				e.nav.save()
			return false
		}

	})

	e.on('pointerdown', function(ev) {
		let fe = e.focusables()[0]
		if (fe && ev.target != fe) {
			fe.focus()
			// preventDefault() is to avoid focusing back the target.
			// at the same time we don't want to prevent other 'pointerdown'
			// handlers so we're not just returning false.
			ev.preventDefault()
		}
	})

}

// ---------------------------------------------------------------------------
// checkbox
// ---------------------------------------------------------------------------

component('x-checkbox', 'Input', function(e) {

	focusable_widget(e)
	editable_widget(e)
	val_widget(e)
	input_widget(e)

	e.class('x-markbox')

	e.checked_val = true
	e.unchecked_val = false

	e.label_show_star = false
	e.icon_box = span({class: 'x-markbox-icon x-checkbox-icon far fa-square'})
	e.label_box = span({class: 'x-markbox-label x-checkbox-label'})
	e.focus_box = div({class: 'x-focus-box'}, e.icon_box, e.label_box)
	e.add(e.focus_box)

	e.add_info_button = function(btn) {
		btn.attr('bare', true)
		e.add(btn)
	}

	function update_icon() {
		let ie = e.icon_box
		ie.class('fa far fa-square fa-check-square fa-toggle-on fa-toggle-off', false)
		if (e.button_style == 'toggle')
			ie.classes = 'fa fa-toggle-'+(e.checked ? 'on' : 'off')
		else
			ie.classes = e.checked ? 'fa fa-check-square' : 'far fa-square'
	}

	e.set_button_style = update_icon
	e.prop('button_style', {store: 'var', type: 'enum', enum_values: ['checkbox', 'toggle'], default: 'checkbox', attr: true})

	// model

	e.get_checked = function() {
		return e.input_val === e.checked_val
	}
	e.set_checked = function(v, ev) {
		e.set_val(v ? e.checked_val : e.unchecked_val, ev)
	}
	e.prop('checked', {private: true})

	// view

	e.do_update_val = function(v) {
		let c = e.checked
		e.class('checked', c)
		update_icon()
		e.class('no-field', !e.field)
	}

	// controller

	e.toggle = function(ev) {
		e.set_checked(!e.checked, ev)
	}

	e.on('pointerdown', function(ev) {
		if (e.widget_editing)
			return
		ev.preventDefault() // prevent accidental selection by double-clicking.
		e.focus()
	})

	function click(ev) {
		if (e.widget_editing)
			return
		e.toggle({input: e})
		return false
	}

	e.icon_box.on('click', click)
	e.label_box.on('click', click)

	e.on('keydown', function(key, shift, ctrl) {
		if (e.widget_editing) {
			if (key == 'Enter') {
				if (ctrl)
					e.label_box.insert_at_caret('<br>')
				else
					e.widget_editing = false
				return false
			}
			return
		}
		if (key == 'Enter' || key == ' ') {
			e.toggle({input: e})
			return false
		}
		if (key == 'Delete' && e.input_val != null) {
			e.set_val(null, {input: e})
			return false
		}
	})

	// widget editing ---------------------------------------------------------

	e.set_widget_editing = function(on) {
		e.label_box.contenteditable = on
		if (!on) {
			e.label = e.label_box.innerText
			if (window.xmodule)
				xmodule.save()
		}
	}

	e.on('pointerdown', function(ev) {
		if (e.widget_editing && ev.target != e.label_box)
			return this.capture_pointer(ev, null, function() {
				e.label_box.focus()
				e.label_box.select_all()
			})
	})

	function prevent_bubbling(ev) {
		if (e.widget_editing && !ev.ctrlKey)
			ev.stopPropagation()
	}
	e.label_box.on('pointerdown', prevent_bubbling)
	e.label_box.on('click', prevent_bubbling)

	e.label_box.on('blur', function() {
		e.widget_editing = false
	})

})

// ---------------------------------------------------------------------------
// radiogroup
// ---------------------------------------------------------------------------

component('x-radiogroup', 'Input', function(e) {

	val_widget(e)

	e.set_items = function(items) {
		for (let item of items) {
			if (isstr(item) || isnode(item))
				item = {text: item}
			let radio_box = span({class: 'x-markbox-icon x-radio-icon far fa-circle'})
			let text_box = span({class: 'x-markbox-label x-radio-label'})
			text_box.set(item.text)
			let idiv = div({class: 'x-widget x-markbox x-radio-item', tabindex: 0},
				radio_box, text_box)
			idiv.attr('align', e.align)
			idiv.item = item
			idiv.on('click', idiv_click)
			idiv.on('keydown', idiv_keydown)
			e.add(idiv)
		}
	}
	e.prop('items', {store: 'var', default: []})

	e.set_align = function(align) {
		for (let idiv of e.children)
			idiv.attr('align', align)
	}
	e.prop('align', {store: 'var', type: 'enum', enum_values: ['left', 'right'], default: 'left', attr: true})

	let sel_item

	e.do_update_val = function(i) {
		if (sel_item) {
			sel_item.class('selected', false)
			sel_item.at[0].class('fa-dot-circle', false)
			sel_item.at[0].class('fa-circle', true)
		}
		sel_item = i != null ? e.at[i] : null
		if (sel_item) {
			sel_item.class('selected', true)
			sel_item.at[0].class('fa-dot-circle', true)
			sel_item.at[0].class('fa-circle', false)
		}
	}

	function select_item(item) {
		e.set_val(item.index, {input: e})
		item.focus()
	}

	function idiv_click() {
		select_item(this)
		return false
	}

	function idiv_keydown(key) {
		if (key == ' ' || key == 'Enter') {
			select_item(this)
			return false
		}
		if (key == 'ArrowUp' || key == 'ArrowDown') {
			let item = e.focused_element
			let next_item = item
				&& (key == 'ArrowUp' ? (item.prev || e.last) : (item.next || e.first))
			if (next_item)
				select_item(next_item)
			return false
		}
	}

})

// ---------------------------------------------------------------------------
// editbox/dropdown
// ---------------------------------------------------------------------------

function editbox_widget(e, opt) {

	let has_input  = or(opt && opt.input , true)
	let has_picker = or(opt && opt.picker, false)

	val_widget(e)
	input_widget(e)
	stylable_widget(e)

	e.props.mode.enum_values = ['default', 'inline', 'wrap', 'fixed']

	e.class('x-editbox')
	e.class('x-dropdown', has_picker)

	if (has_input)
		e.input = tag(opt && opt.input_tag || 'input', {
			autocomplete: 'off',
			class: 'x-editbox-input',
		})
	else
		e.val_box = div({class: 'x-editbox-input x-editbox-value'})

	focusable_widget(e, e.input)

	e.label_box = div({class: 'x-editbox-label'})
	e.focus_box = div({class: 'x-focus-box'}, e.input || e.val_box, e.label_box)
	e.add(e.focus_box)

	function do_update_state(s) {
		;(e.input || e.val_box).class('empty', s == '')
		e.label_box.class('empty', s == '')
	}

	e.from_text = function(s) {
		return e.field.from_text(s)
	}

	e.to_text = function(v) {
		if (!e.field)
			return ''
		if (v == null)
			return ''
		return e.field.to_text(v)
	}

	e.do_update_val = function(v, ev) {
		if (e.input) {
			if (ev && ev.input == e && ev.typing)
				return
			let s = e.to_text(v)
			let maxlen = e.field && e.field.maxlen
			e.input.value = s.slice(0, maxlen)
			do_update_state(s)
		} else {
			let dval = e.picker && e.picker.dropdown_display_val
			let text = dval && dval(v)
			if (text == null)
				text = e.display_val_for(v)
			e.val_box.set(text)
			do_update_state(text)
		}
	}

	if (e.input) {

		e.set_readonly = function(v) {
			e.input.bool_attr('readonly', v || null)
		}

		e.input.on('input', function() {
			let v = e.input.value
			e.set_val(e.from_text(v), {input: e, typing: true})
			do_update_state(v)
		})

		e.on('bind_field', function(on) {
			e.input.attr('maxlength', on ? e.field.maxlen : null)
			bind_spicker(on)
		})

		e.on('keydown', function(key, shift, ctrl) {
			if (key == 'Escape' && !e.hasclass('grid-editor')) {
				if (e.field && e.row) {
					e.nav.revert_cell(e.row, e.field, {input: e})
					return false
				}
			}
		})

	}

	// suggestion picker ------------------------------------------------------

	e.prop('spicker_w', {store: 'var', type: 'number', text: 'Suggestion Picker Width'})

	e.create_spicker = noop // stub

	function bind_spicker(on) {
		assert(!(on && !e.bound))
		if (on) {
			e.spicker = e.create_spicker({
				id: e.id ? e.id + '.spicker' : null,
				dropdown: e,
				nav: e.nav,
				col: e.col,
				can_select_widget: false,
				focusable: false,
			})
			if (!e.spicker)
				return
			e.spicker.class('picker', true)
			e.spicker.bind(true)
			e.spicker.on('val_picked', spicker_val_picked)
		} else if (e.spicker) {
			e.spicker.popup(false)
			e.spicker.bind(false)
			e.spicker = null
		}
		document.on('pointerdown'     , document_pointerdown, on)
		document.on('rightpointerdown', document_pointerdown, on)
		document.on('stopped_event'   , document_stopped_event, on)
		e.input.on('keydown', keydown_for_spicker, on)
	}

	e.set_spicker_isopen = function(open) {
		if (e.spicker_isopen == open)
			return
		if (!e.spicker)
			return
		e.class('open spicker_open', open)
		if (open) {
			e.spicker_cancel_val = e.input_val
			e.spicker.min_w = e.rect().w
			if (e.spicker_w)
				e.spicker.auto_w = false
			e.spicker.w = e.spicker_w
			e.spicker.hidden = false
			e.spicker.popup(e, 'bottom', e.align)
		} else {
			e.spicker_cancel_val = null
			e.spicker.hidden = true
		}
	}

	e.open_spicker   = function() { e.set_spicker_isopen(true) }
	e.close_spicker  = function() { e.set_spicker_isopen(false) }
	e.cancel_spicker = function(ev) {
		if (e.spicker_isopen)
			e.set_val(e.spicker_cancel_val, ev)
		e.close_spicker()
	}

	e.property('spicker_isopen', () => e.hasclass('spicker_open'), e.set_spicker_isopen)

	function spicker_val_picked(ev) {
		if (ev && ev.input == e.spicker)
			e.close_spicker()
	}

	function keydown_for_spicker(key) {
		if ((key == 'ArrowDown' || key == 'ArrowUp') && e.isopen) {
			e.spicker.pick_near_val(key == 'ArrowDown' ? 1 : -1, {input: e})
			return false
		}
		if (key == 'Enter') {
			e.close_spicker()
			// don't return false so that grid can exit edit mode.
		}
		if (key == 'Escape') {
			e.close_spicker()
			// don't return false so that grid can exit edit mode.
		}
	}

	// clicking outside the picker closes the picker.
	function document_pointerdown(ev) {
		if (e.positionally_contains(ev.target)) // clicked inside the editbox.
			return
		if (e.spicker.positionally_contains(ev.target)) // clicked inside the picker.
			return
		e.close_spicker()
	}

	// clicking outside the picker closes the picker, even if the click did something.
	function document_stopped_event(ev) {
		if (ev.type.ends('pointerdown'))
			document_pointerdown(ev)
	}

	// copy-to-clipboard button -----------------------------------------------

	e.set_copy = function(v) {
		if (v && !e.copy_button) {
			e.copy_button = button({
				classes: 'x-editbox-copy-to-clipboard-button',
				icon: 'far fa-clipboard',
				text: '',
				bare: true,
				focusable: false,
				title: S('copy_to_clipboard', 'Copy to clipboard'),
				action: function() {
					copy_to_clipboard(e.to_text(e.input_val), function() {
						notify(S('copied_to_clipboard',
							'{0} copied to clipboard', e.field.text), 'info')
					})
				},
			})
			e.focus_box.add(e.copy_button)
		} else if (!v && e.copy_button) {
			e.copy_button.remove()
			e.copy_button = null
		}
	}

	e.prop('copy', {store: 'var', type: 'bool', attr: true})

	// more button ------------------------------------------------------------

	e.set_more_action = function(action) {
		if (!e.more_button && action) {
			e.more_button = div({class: 'x-editbox-more-button x-dropdown-more-button fa fa-ellipsis-h'})
			e.add(e.more_button)
			e.more_button.on('pointerdown', function(ev) {
				return this.capture_pointer(ev, null, function() {
					e.more_action()
					return false
				})
			})
		} else if (e.more_button && !action) {
			e.more_button.remove()
			e.more_button = null
		}
	}
	e.prop('more_action', {store: 'var', private: true})

	// grid editor protocol ---------------------------------------------------

	if (e.input) {

		e.input.on('blur', function() {
			e.close_spicker()
			e.fire('lost_focus')
		})

		let editor_state

		function update_editor_state(moved_forward, i0, i1) {
			i0 = or(i0, e.input.selectionStart)
			i1 = or(i1, e.input.selectionEnd)
			let anchor_left =
				e.input.selectionDirection != 'none'
					? e.input.selectionDirection == 'forward'
					: (moved_forward || e.align == 'left')
			let imax = e.input.value.length
			let leftmost  = i0 == 0
			let rightmost = (i1 == imax || i1 == -1)
			if (anchor_left) {
				if (rightmost) {
					if (i0 == i1)
						i0 = -1
					i1 = -1
				}
			} else {
				i0 = i0 - imax - 1
				i1 = i1 - imax - 1
				if (leftmost) {
					if (i0 == 1)
						i1 = 0
					i0 = 0
				}
			}
			editor_state = [i0, i1]
		}

		e.input.on('keydown', function(key, shift, ctrl) {
			// NOTE: we capture Ctrl+A on keydown because the user might
			// depress Ctrl first and when we get the 'a' Ctrl is not pressed.
			if (key == 'a' && ctrl)
				update_editor_state(null, 0, -1)
		})

		e.input.on('keyup', function(key, shift, ctrl) {
			if (key == 'ArrowLeft' || key == 'ArrowRight')
				update_editor_state(key == 'ArrowRight')
		})

		e.editor_state = function(s) {
			if (s) {
				let i0 = e.input.selectionStart
				let i1 = e.input.selectionEnd
				let imax = e.input.value.length
				let leftmost  = i0 == 0
				let rightmost = i1 == imax
				if (s == 'left')
					return i0 == i1 && leftmost && 'left'
				else if (s == 'right')
					return i0 == i1 && rightmost && 'right'
				else if (s == 'all_selected')
					return leftmost && rightmost
			} else {
				if (!editor_state)
					update_editor_state()
				return editor_state
			}
		}

		e.enter_editor = function(s) {
			if (!s)
				return
			if (s == 'select_all')
				s = [0, -1]
			else if (s == 'left')
				s = [0, 0]
			else if (s == 'right')
				s = [-1, -1]
			editor_state = s
			let [i0, i1] = s
			let imax = e.input.value.length
			if (i0 < 0) i0 = imax + i0 + 1
			if (i1 < 0) i1 = imax + i1 + 1
			e.input.select_range(i0, i1)
		}

		e.set_text_min_w = function(w) {
			e.focus_box.min_w = w
		}

	}

	// dropdown ---------------------------------------------------------------

	if (has_picker) {

		e.prop('picker_w', {store: 'var', type: 'number', text: 'Picker Width'})

		e.do_after('init', function() {
			if (e.create_dropdown_button) {
				e.dropdown_button = e.create_dropdown_button()
			} else {
				e.dropdown_button = span({class: 'x-dropdown-button fa fa-caret-down'})
				e.dropdown_button.set_open = function(open) {
					this.switch_class('fa-caret-down', 'fa-caret-up', open)
				}
			}
			e.focus_box.insert(e.align == 'right' ? 0 : null, e.dropdown_button)
		})

		e.set_align = function(align) {
			if (!e.dropdown_button)
				return
			if (align == 'right' == e.dropdown_button.index == 0)
				e.dropdown_button.index = align == 'right' ? 0 : null
		}

		let inh_set_nav = e.set_nav
		e.set_nav = function(v, v0) {
			inh_set_nav(v, v0)
			if (e.picker)
				e.picker.nav = v
		}

		let inh_set_col = e.set_col
		e.set_col = function(v, v0) {
			inh_set_col(v, v0)
			if (e.picker)
				e.picker.col = v
		}

		function popup_picker(show) {
			e.picker.show(show)
			e.picker.popup(e, 'bottom', e.align == 'right' ? 'end' : 'start')
		}

		function bind_picker(on) {
			if (!e.create_picker)
				return
			assert(!(on && !e.bound))
			if (on) {
				assert(!e.picker)
				e.picker = e.create_picker({
					id: e.id ? e.id + '.picker' : null,
					dropdown: e,
					nav: e.nav,
					col: e.col,
					can_select_widget: false,
				})
				e.picker.class('picker', true)
				e.picker.on('val_picked', picker_val_picked)
				e.picker.on('keydown'   , picker_keydown)
				popup_picker(false)
			} else if (e.picker) {
				e.picker.popup(false)
				e.picker = null
			}
			document.on('pointerdown'     , document_pointerdown, on)
			document.on('rightpointerdown', document_pointerdown, on)
			document.on('stopped_event'   , document_stopped_event, on)
		}

		e.on('bind_field', function(on) {
			if (!on)
				e.close()
			bind_picker(on)
		})

		// val updating

		let do_error_tooltip_check = e.do_error_tooltip_check
		e.do_error_tooltip_check = function() {
			return do_error_tooltip_check() || (e.invalid && e.isopen)
		}

		// opening & closing the picker

		e.set_open = function(open, focus) {
			if (e.isopen != open) {
				e.class('open', open)
				e.dropdown_button.switch_class('down', 'up', open)
				if (e.dropdown_button.set_open)
					e.dropdown_button.set_open(open)
				if (open) {
					e.cancel_val = e.input_val
					e.picker.min_w = e.rect().w
					if (e.picker_w)
						e.picker.auto_w = false
					e.picker.w = e.picker_w
					popup_picker(true)
					e.fire('opened')
					e.picker.fire('dropdown_opened')
				} else {
					e.cancel_val = null
					popup_picker(false)
					e.fire('closed')
					if (e.picker)
						e.picker.fire('dropdown_closed')
					if (!focus)
						e.fire('lost_focus') // grid editor protocol
				}
			}
			if (focus) {
				e.focus()
				if (e.input)
					e.input.select_range(0, -1)
			}
		}

		function picker_val_picked(ev) {
			e.close(!(ev && ev.input == e))
		}

		// focusing

		let inh_focus = e.focus
		let focusing_picker
		e.focus = function() {
			if (e.isopen) {
				focusing_picker = true // focusout barrier.
				e.picker.focus()
				focusing_picker = false
			} else
				inh_focus.call(this)
		}

		// clicking outside the picker closes the picker.
		function document_pointerdown(ev) {
			if (e.positionally_contains(ev.target)) // clicked inside the dropdown.
				return
			if (e.picker.positionally_contains(ev.target)) // clicked inside the picker.
				return
			e.close()
		}

		// clicking outside the picker closes the picker, even if the click did something.
		function document_stopped_event(ev) {
			if (ev.type.ends('pointerdown'))
				document_pointerdown(ev)
		}

		e.on('focusout', function(ev) {
			// prevent dropdown's focusout from bubbling to the parent when opening the picker.
			if (focusing_picker)
				return false
			e.fire('lost_focus') // grid editor protocol
		})

		// scrolling through values with the wheel with the picker closed.

		e.on('wheel', function(ev, dy) {
			e.picker.pick_near_val(dy, {input: e})
			return false
		})

		// cancelling on hitting Escape.

		function picker_keydown(key) {
			if (key == 'Escape') {
				e.cancel()
			}
		}

		if (!has_input) {

			// use the entire surface of the dropdown for toggling.
			e.on('pointerdown', function() {
				e.toggle(true)
				return false
			})

			e.on('keypress', function(c) {
				if (e.picker.quicksearch) {
					e.picker.quicksearch(c)
					return false
				}
			})

			e.on('keydown', function(key) {

				if (key == 'ArrowDown' || key == 'ArrowUp') {
					if (!e.hasclass('grid-editor')) {
						e.set_open(true, false, true)
						e.picker.pick_near_val(key == 'ArrowDown' ? 1 : -1, {input: e})
						return false
					}
				}

				if (key == 'Delete' && e.input_val != null) {
					e.set_val(null, {input: e})
					return false
				}

			})

		} else {

			// use the entire surface of the dropdown to close the popup.
			e.on('pointerdown', function(ev) {
				// clos dropdown but prevent selecting the text if clicked on it.
				let on_input = ev.target == e.input
				e.close(!on_input)
			})

		}

		// keyboard & mouse binding

		e.on('keydown', function(key) {
			if (key == 'Enter' || (!has_input && key == ' ')) {
				e.toggle(true)
				return false
			}
		})

	} else {

		e.set_open = noop

	}

	e.property('isopen',
		function() {
			return e.hasclass('open')
		},
		function(open) {
			e.set_open(open, true)
		}
	)

	e.open   = function(focus) { e.set_open(true, focus) }
	e.close  = function(focus) { e.set_open(false, focus) }
	e.toggle = function(focus) { e.set_open(!e.isopen, focus) }
	e.cancel = function() {
		if (e.isopen)
			e.set_val(e.cancel_val, {input: this})
		e.close(true)
	}

}

// ---------------------------------------------------------------------------
// textedit
// ---------------------------------------------------------------------------

component('x-textedit', 'Input', function(e) {
	editbox_widget(e)
})

// ---------------------------------------------------------------------------
// textarea
// ---------------------------------------------------------------------------

component('x-textarea', 'Input', function(e) {
	editbox_widget(e, {input_tag: 'textarea'})
	e.do_after('init', function() {
		e.input.rows = e.rows
		e.input.cols = e.cols
	})
})

// ---------------------------------------------------------------------------
// passedit
// ---------------------------------------------------------------------------

component('x-passedit', 'Input', function(e) {

	editbox_widget(e)
	e.input.attr('type', 'password')

	e.view_password_button = button({
		classes: 'x-passedit-eye-icon',
		icon: 'far fa-eye-slash',
		text: '',
		bare: true,
		focusable: false,
		title: S('view_password', 'View password'),
	})
	e.focus_box.add(e.view_password_button)

	e.view_password_button.on('active', function(on) {
		let s1 = e.input.selectionStart
		let s2 = e.input.selectionEnd
		e.input.attr('type', on ? null : 'password')
		this.icon = 'far fa-eye' + (on ? '' : '-slash')
		if (!on) {
			runafter(0, function() {
				e.input.selectionStart = s1
				e.input.selectionEnd   = s2
			})
		}
	})

})

// ---------------------------------------------------------------------------
// spinedit
// ---------------------------------------------------------------------------

component('x-spinedit', 'Input', function(e) {

	e.props.align = {default: 'right'}
	e.props.field_type = {default: 'number'}

	editbox_widget(e)

	e.prop('button_style'    , {store: 'var', type: 'enum', enum_values: ['plus-minus', 'up-down', 'left-right'], default: 'plus-minus', attr: true})
	e.prop('button_placement', {store: 'var', type: 'enum', enum_values: ['each-side', 'left', 'right'], default: 'each-side', attr: true})

	e.up   = div({class: 'x-spinedit-button fa'})
	e.down = div({class: 'x-spinedit-button fa'})

	let inh_do_update = e.do_update
	e.do_update = function() {

		inh_do_update()

		let bs = e.button_style
		let bp = e.button_placement

		bp = bp || (bs == 'up-down' && 'left' || 'each-side')

		e.up  .remove()
		e.down.remove()

		e.up  .class('fa-plus'       , bs == 'plus-minus')
		e.down.class('fa-minus'      , bs == 'plus-minus')
		e.up  .class('fa-caret-up'   , bs == 'up-down')
		e.down.class('fa-caret-down' , bs == 'up-down')
		e.up  .class('fa-caret-right', bs == 'left-right')
		e.down.class('fa-caret-left' , bs == 'left-right')

		e.up  .class('left right leftmost rightmost', false)
		e.down.class('left right leftmost rightmost', false)

		if (bp == 'each-side') {
			e.focus_box.insert(0, e.down)
			e.focus_box.add(e.up)
			e.down.class('left  leftmost')
			e.up  .class('right rightmost')
		} else if (bp == 'right') {
			e.focus_box.add(e.down, e.up)
			e.down.class('right')
			e.up  .class('right rightmost')
		} else if (bp == 'left') {
			e.focus_box.insert(0, e.down, e.up)
			e.down.class('left leftmost')
			e.up  .class('left')
		}

	}

	let multiple = () => or(1 / 10 ** (e.field.decimals || 0), 1)

	// controller

	function increment_val(increment) {
		let v = e.input_val + increment
		let r = v % multiple()
		e.set_val(v - r, {input: e})
		e.input.select_range(0, -1)
	}

	e.input.on('wheel', function(ev, dy) {
		increment_val(dy)
		return false
	})

	// increment buttons click

	let increment
	function increment_val_again() {
		if (!e.matches(':active'))
			return // prevent infinite loop if mouse capture fails.
		let v = e.input_val + increment
		let r = v % multiple()
		e.set_val(v - r, {input: e})
		e.input.select_range(0, -1)
		increment_timer(.1)
	}
	let increment_timer = timer(increment_val_again)
	function add_events(button, sign) {
		button.on('pointerdown', function(ev) {
			e.input.focus()
			increment = multiple() * sign
			increment_val_again()
			increment_timer(.5)
			return this.capture_pointer(ev, null, function() {
				increment_timer()
				return false
			})
		})
	}
	add_events(e.up  , 1)
	add_events(e.down, -1)

	e.on('keydown', function(key) {
		if (key == 'ArrowDown' || key == 'ArrowUp') {
			let inc = (key == 'ArrowDown' ? 1 : -1) * multiple()
			increment_val(inc)
			return false
		}
	})

})

// ---------------------------------------------------------------------------
// tagsedit
// ---------------------------------------------------------------------------

component('x-tagsedit', 'Input', function(e) {

	e.class('x-editbox')

	e.props.field_type = {default: 'tags'}

	val_widget(e)
	input_widget(e)

	let S_expand = S('expand', 'expand') + ' (Enter)'
	let S_condense = S('condense', 'condense') + ' (Enter)'

	e.input = tag('input', {class: 'x-editbox-input x-tagsedit-input'})
	e.label_box = div({class: 'x-editbox-label x-tagsedit-label'})
	e.expand_button = div({class: 'x-tagsedit-button-expand fa fa-caret-down',
		title: S_expand,
	})
	e.tags_box = div({class: 'x-tagsedit-tags-box'})
	e.focus_box = div({class: 'x-focus-box'}, e.input, e.label_box, e.tags_box, e.expand_button)
	e.add(e.focus_box)

	e.prop('format', {store: 'var', type: 'enum', enum_values: ['names', 'json'], default: 'json', attr: true})

	function input_val_slice() {
		let v = e.input_val
		if (v == null)
			return []
		else if (e.format == 'names')
			return v.names()
		else
			return v.slice()
	}

	function set_val(v, ev) {
		if (!v.length)
			v = null
		else if (e.format == 'names')
			v = v.remove_duplicates().join(' ')
		e.set_val(v, ev)
	}

	function update_tags() {

		let v = input_val_slice()
		let empty = !v.length

		if (empty && e.expanded) {
			e.expanded = false
			return
		}

		e.tags_box.clear()
		if (v) {
			for (let tag of v) {
				let s = T(tag).textContent
				let xb = div({
					class: 'x-tagsedit-tag-xbutton fa fa-times',
					title: S('remove', 'remove {0}', s),
				})
				let tag_e = div({
					class: 'x-tagsedit-tag',
					title: S('edit', 'edit {0}', s),
				}, tag, xb)
				xb.on('pointerdown', tag_xbutton_pointerdown)
				tag_e.on('pointerdown', tag_pointerdown)
				e.tags_box.add(tag_e)
			}
		}

		if (e.expanded) {
			e.bubble.content.add(e.tags_box)
			e.bubble.popup()
		} else {
			e.focus_box.insert(2, e.tags_box)
		}

		e.class('empty', empty)
	}

	e.do_update_val = function(v, ev) {
		let by_user = ev && ev.input == e
		update_tags()
		if (empty && by_user)
			e.input.focus()
		else
			e.input.value = null

		e.input.attr('maxlength', e.field ? e.field.maxlen : null)
	}

	// expanded bubble.

	e.set_expanded = function(expanded) {
		if (!input_val_slice().length)
			expanded = false
		e.class('expanded', expanded)
		e.expand_button.switch_class('fa-caret-down', 'fa-caret-up', expanded)
		if (expanded && !e.bubble)
			e.bubble = tooltip({classes: 'x-tagsedit-bubble', target: e,
					side: 'top', align: 'left'})
		update_tags()
		if (e.bubble)
			e.bubble.hidden = !expanded
		e.expand_button.title = expanded ? S_condense : S_expand
	}
	e.prop('expanded', {store: 'var', private: true})

	e.expand_button.on('pointerdown', function(ev) {
		e.expanded = !e.expanded
	})

	// controller

	function tag_pointerdown() {
		let v = input_val_slice()
		let tag = v.remove(this.index)
		set_val(v, {input: e})
		e.input.value = tag
		e.focus()
		e.input.select()
		return false
	}

	function tag_xbutton_pointerdown() {
		let v = input_val_slice()
		v.remove(this.parent.index)
		set_val(v, {input: e})
		return false
	}

	focusable_widget(e, e.input)

	e.input.on('blur', function() {
		e.expanded = false
	})

	e.on('pointerdown', function(ev) {
		if (ev.target == e.input)
			return
		e.focus()
		return false
	})

	e.input.on('keydown', function(key, shift, ctrl) {
		if (key == 'Enter') {
			let s = e.input.value
			if (s) {
				s = s.trim()
				if (s) {
					let v = input_val_slice()
					v.push(s)
					set_val(v, {input: e})
				}
				e.input.value = null
			} else {
				e.expanded = !e.expanded
			}
			return false
		}
		if (key == 'Backspace' && !e.input.value) {
			set_val(input_val_slice().slice(0, -1), {input: e})
			return false
		}
	})

	// grid editor protocol

	e.input.on('blur', function() {
		e.fire('lost_focus')
	})

	e.set_text_min_w = function(w) {
		// TODO:
	}

})

// ---------------------------------------------------------------------------
// google maps APIs wrappers
// ---------------------------------------------------------------------------

{
	let api_key
	let autocomplete_service
	let session_token, token_expire_time
	let token_duration = 2 * 60  // google says it's "a few minutes"...

	function google_maps_iframe(place_id) {
		let iframe_src = place_id => place_id
			? ('https://www.google.com/maps/embed/v1/place?key='+api_key+'&q=place_id:'+place_id) : ''
		let iframe = tag('iframe', {
			frameborder: 0,
			scrolling: 'no',
			src: iframe_src(place_id),
			allowfullscreen: '',
		})
		iframe.goto_place = function(place_id) {
			iframe.src = iframe_src(place_id)
		}
		return iframe
	}

	/* TODO: finish this...
	function google_maps_wrap_map(e) {
		let map = new google.maps.Map(e, {
			center: { lat: -34.397, lng: 150.644 },
			zoom: 8,
		})

		map.goto_place = function(place_id) {
			if (!place.geometry) {
				return;
			}
			if (place.geometry.viewport) {
				map.fitBounds(place.geometry.viewport);
			} else {
				map.setCenter(place.geometry.location);
				map.setZoom(17)
			}
			// Set the position of the marker using the place ID and location.
			marker.setPlace({
			placeId: place.place_id,
			location: place.geometry.location,
			});
			marker.setVisible(true);
			infowindowContent.children.namedItem("place-name").textContent = place.name;
			infowindowContent.children.namedItem("place-id").textContent =
			place.place_id;
			infowindowContent.children.namedItem("place-address").textContent =
			place.formatted_address;
			infowindow.open(map, marker);

		}
	}
	*/

	function suggest_address(s, callback) {

		if (!autocomplete_service)
			return

		function get_places(places, status) {
			let pss = google.maps.places.PlacesServiceStatus
			if (status == pss.ZERO_RESULTS)
				notify(S('google_maps_address_not_found', 'Address not found on Google Maps'), 'search')
			if (status != pss.OK && status != pss.ZERO_RESULTS)
				notify(S('google_maps_error', 'Google Maps error: {0}', status))
			callback(places)
		}

		let now = time()
		if (!session_token || token_expire_time < now) {
			session_token = new google.maps.places.AutocompleteSessionToken()
			token_expire_time = now + token_duration
		}

		autocomplete_service.getPlacePredictions({input: s, sessionToken: session_token}, get_places)
	}

	function _google_places_api_loaded() {
		autocomplete_service = new google.maps.places.AutocompleteService()
		document.fire('google_places_api_loaded')
	}

	init_google_places_api = function(_api_key) {
		api_key = _api_key
		document.head.add(tag('script', {
			defer: '',
			src: 'https://maps.googleapis.com/maps/api/js?key='+api_key+'&libraries=places&callback=_google_places_api_loaded'
		}))
		init_google_places_api = noop // call-once
	}

}

// ---------------------------------------------------------------------------
// placeedit widget with autocomplete via google places api
// ---------------------------------------------------------------------------

component('x-placeedit', 'Input', function(e) {

	e.props.field_type = {default: 'place'}

	editbox_widget(e)

	e.pin_ct = span()
	e.add(e.pin_ct)

	e.create_picker = function(opt) {

		let lb = listbox(assign_opt({
			val_col: 0,
			display_col: 0,
			format_item: format_item,
		}, opt))

		return lb
	}

	function format_item(addr) {
		return addr.description
	}

	function suggested_addresses_changed(places) {
		places = places || []
		e.picker.items = places.map(function(p) {
			return {
				description: p.description,
				place_id: p.place_id,
				types: p.types,
			}
		})
		e.isopen = !!places.length
	}

	e.property('place_id', function() {
		return isobject(e.val) && e.val.place_id || null
	})

	e.from_text = function(s) { return s ? s : null }
	e.to_text = function(v) { return (isobject(v) ? v.description : v) || '' }

	e.override('do_update_val', function(inherited, v, ev) {
		inherited.call(this, v, ev)
		let pin = e.field && e.field.format_pin(v)
		e.pin_ct.set(pin)
		if (e.val && !e.place_id)
			pin.title = S('find_place', 'Find this place on Google Maps')
		if (ev && ev.input == e && ev.typing) {
			if (v)
				suggest_address(v, suggested_addresses_changed)
			else
				suggested_addresses_changed()
		}
	})

	e.pin_ct.on('pointerdown', function() {
		if (e.val && !e.place_id) {
			suggest_address(e.val, suggested_addresses_changed)
			return false
		}
	})

})

// ---------------------------------------------------------------------------
// google maps widget
// ---------------------------------------------------------------------------

component('x-googlemaps', 'Input', function(e) {

	e.props.field_type = {default: 'place'}

	val_widget(e)

	e.classes = 'fa fa-map-marked-alt'

	e.map = google_maps_iframe()
	e.map.class('x-googlemaps-iframe')
	e.add(e.map)

	e.override('do_update_val', function(inherited, v, ev) {
		inherited.call(this, v, ev)
		let place_id = isobject(v) && v.place_id || null
		e.map.goto_place(place_id)
		e.map.class('empty', !place_id)
	})

})

// ---------------------------------------------------------------------------
// slider
// ---------------------------------------------------------------------------

component('x-slider', 'Input', function(e) {

	e.props.field_type = {default: 'number'}

	focusable_widget(e)

	e.prop('from', {store: 'var', default: 0})
	e.prop('to', {store: 'var', default: 1})

	e.val_fill = div({class: 'x-slider-fill x-slider-value-fill'})
	e.range_fill = div({class: 'x-slider-fill x-slider-range-fill'})
	e.input_thumb = div({class: 'x-slider-thumb x-slider-input-thumb'})
	e.val_thumb = div({class: 'x-slider-thumb x-slider-value-thumb'})
	e.add(e.range_fill, e.val_fill, e.val_thumb, e.input_thumb)

	// model

	val_widget(e)

	let inh_do_update = e.do_update
	e.do_update = function() {
		inh_do_update()
		e.class('animated', false) // TODO: decide when to animate!
	}

	function progress_for(v) {
		return clamp(lerp(v, e.from, e.to, 0, 1), 0, 1)
	}

	function cmin() { return max(or(e.field && e.field.min, -1/0), e.from) }
	function cmax() { return min(or(e.field && e.field.max, 1/0), e.to) }

	let multiple = () => or(1 / 10 ** e.field.decimals, 1)

	e.set_progress = function(p, ev) {
		let v = lerp(p, 0, 1, e.from, e.to)
		if (e.field.decimals != null)
			v = floor(v / multiple() + .5) * multiple()
		e.set_val(clamp(v, cmin(), cmax()), ev)
	}

	e.property('progress',
		function() {
			return progress_for(e.input_val)
		},
		e.set_progress,
	)

	// view

	function update_thumb(thumb, p, show) {
		thumb.hidden = !show
		thumb.style.left = (p * 100)+'%'
	}

	function update_fill(fill, p1, p2) {
		fill.style.left  = (p1 * 100)+'%'
		fill.style.width = ((p2 - p1) * 100)+'%'
	}

	e.do_update_val = function(v) {
		let input_p = progress_for(v)
		let val_p = progress_for(e.input_val)
		let diff = input_p != val_p
		update_thumb(e.val_thumb, val_p, diff)
		update_thumb(e.input_thumb, input_p)
		e.val_thumb.class('different', diff)
		e.input_thumb.class('different', diff)
		let p1 = progress_for(cmin())
		let p2 = progress_for(cmax())
		update_fill(e.val_fill, max(p1, 0), min(p2, val_p))
		update_fill(e.range_fill, p1, p2)
	}

	// controller

	e.input_thumb.on('pointerdown', function(ev) {
		e.focus()
		let r = e.input_thumb.rect()
		let hit_x = ev.clientX - (r.x + r.w / 2)
		return this.capture_pointer(ev, function(ev, mx, my) {
			let r = e.rect()
			e.set_progress((mx - r.x - hit_x) / r.w, {input: e})
			return false
		})
	})

	e.on('pointerdown', function(ev) {
		let r = e.rect()
		e.set_progress((ev.clientX - r.x) / r.w, {input: e})
	})

	e.on('keydown', function(key, shift) {
		let d
		switch (key) {
			case 'ArrowLeft'  : d =  -.1; break
			case 'ArrowRight' : d =   .1; break
			case 'ArrowUp'    : d =  -.1; break
			case 'ArrowDown'  : d =   .1; break
			case 'PageUp'     : d =  -.5; break
			case 'PageDown'   : d =   .5; break
			case 'Home'       : d = -1/0; break
			case 'End'        : d =  1/0; break
		}
		if (d) {
			e.set_progress(e.progress + d * (shift ? .1 : 1), {input: e})
			return false
		}
	})

	e.inspect_fields = [

		{name: 'from', type: 'number'},
		{name: 'to', type: 'number'},
		{name: 'decimals', type: 'number'},

		{name: 'grid_area'},
		{name: 'tabIndex', type: 'number'},

	]

})

// ---------------------------------------------------------------------------
// calendar widget
// ---------------------------------------------------------------------------

component('x-calendar', 'Input', function(e) {

	val_widget(e)
	focusable_widget(e)

	function format_month(v) {
		return div({class: 'x-calendar-month-box'},
			span({class: 'x-calendar-month-num'}, v),
			span({class: 'x-calendar-month-name'}, month_name(time(0, v), 'short', lang()))
		)
	}

	e.sel_day = div({class: 'x-calendar-sel-day'})
	e.sel_day_suffix = div({class: 'x-calendar-sel-day-suffix'})

	e.sel_month = list_dropdown({
		classes: 'x-calendar-sel-month',
		picker_classes: 'x-calendar-sel-month-picker',
		items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
		field: {
			format: format_month,
			not_null: true,
		},
		val_col: 0,
		item_field: {
			format: format_month,
		},
	})

	e.sel_year = spinedit({
		classes: 'x-calendar-sel-year',
		field: {
			// MySQL range for DATETIME
			min: 1000,
			max: 9999,
			not_null: true,
		},
		button_style: 'left-right',
	})

	e.sel_hour = spinedit({
		classes: 'x-calendar-sel-hms',
		field: {
			min: 0,
			max: 24,
			not_null: true,
		},
		button_style: 'up-down',
		button_placement: 'none',
	})

	e.sel_minute = spinedit({
		classes: 'x-calendar-sel-hms',
		field: {
			min: 0,
			max: 60,
			not_null: true,
		},
		button_style: 'up-down',
		button_placement: 'none',
	})

	e.sel_second = spinedit({
		classes: 'x-calendar-sel-hms',
		field: {
			min: 0,
			max: 60,
			not_null: true,
		},
		button_style: 'up-down',
		button_placement: 'none',
	})

	e.header = div({class: 'x-calendar-header'},
		div({class: 'x-calendar-sel-day-box'}, e.sel_day, e.sel_day_suffix), e.sel_month, e.sel_year)

	e.weekview = tag('table', {class: 'x-calendar-weekview x-focusable-items',
		tabindex: 0})

	e.date_box = div({class: 'x-calendar-date-box'}, e.header, e.weekview)
	e.time_box = span({class: 'x-calendar-time-box'},
		e.sel_hour, ':', e.sel_minute, span(0, ':'), e.sel_second)

	e.add(e.date_box, e.time_box)

	e.on('bind_field', function(on) {
		if (on) {
			e.time_box.hidden = !(e.field.has_time || false)
			for (let ce of [e.time_box.last.prev, e.time_box.last])
				ce.hidden = !(e.field.has_seconds || false)
		}
	})

	e.on('focus', function() {
		e.weekview.focus()
	})

	function as_ts(v) {
		return e.field && e.field.to_time ? e.field.to_time(v) : v
	}

	function daytime(t) {
		return t != null ? t - day(t) : null
	}

	function as_dt(t) {
		return e.field.from_time ? e.field.from_time(t) : t
	}

	function update_sel_day(t) {
		if (t != null) {
			let n = floor(1 + days(t - month(t)))
			e.sel_day.set(n)
			let day_suffixes = ['', 'st', 'nd', 'rd']
			e.sel_day_suffix.set(lang() == 'en' ?
				(n < 11 || n > 13) && day_suffixes[n % 10] || 'th' : '')
		} else {
			e.sel_day.html = ''
			e.sel_day_suffix.html = ''
		}
		e.sel_day.bool_attr('disabled', t == null || null)
	}

	let start_week

	let glue_week = window.week
	function week(t, offset) {
		return glue_week(t, offset, country())
	}

	function focused_month(t) {
		return month(week(t, 2))
	}

	function update_weekview(new_start_week, sel_t) {

		let weeks = 6
		let sel_d = day(sel_t)
		let sel_m = month(sel_d)
		let cur_m = focused_month(new_start_week)

		update_sel_day(sel_d)

		if (start_week == new_start_week) {
			for (let td of e.weekview.$('td'))
				td.class('focused selected', false)
			for (let td of e.weekview.$('td'))
				if (td.day == sel_d)
					td.class('focused selected', true)
			return
		}

		start_week = new_start_week
		e.weekview.clear()
		let d = start_week
		let cur_d = day(time())
		for (let week = 0; week <= weeks; week++) {
			let tr = tag('tr')
			for (let weekday = 0; weekday < 7; weekday++) {
				if (!week) {
					let th = tag('th', {class: 'x-calendar-weekday'},
						d != null ? weekday_name(day(d, weekday), 'short', lang()) : '???')
					tr.add(th)
				} else {
					let s, n
					if (d != null) {
						let m = month(d)
						s = d == cur_d ? ' today' : ''
						s = s + (m == cur_m ? ' current-month' : '')
						s = s + (d == sel_d ? ' focused selected' : '')
						n = floor(1 + days(d - m))
					} else {
						s = ''
						n = '??'
					}
					let td = tag('td', {class: 'x-calendar-day x-item'+s}, n)
					td.day = d
					tr.add(td)
					d = day(d, 1)
				}
			}
			e.weekview.add(tr)
		}

	}

	function update_ym(t) {
		e.sel_month.reset_val(month_of(t))
		e.sel_year .reset_val( year_of(t))
	}

	function update_hms(t) {
		e.sel_hour.val = hours_of(t)
		e.sel_minute.val = minutes_of(t)
		e.sel_second.val = seconds_of(t)
	}

	function update_view(t) {
		let ct = or(t, time()) // calendar view time
		update_weekview(week(month(ct)), t)
		update_ym(ct)
		update_hms(t)
	}

	e.do_update_val = function(v, ev) {
		assert(e.bound)
		if (ev && ev.input == e)
			return
		let t = as_ts(v) // selected time
		update_view(t)
	}

	// controller

	function set_ts(t, update_view_too, val_picked) {
		e.set_val(as_dt(t), {input: e, val_picked: val_picked})
		if (update_view_too)
			update_view(t)
	}

	e.weekview.on('pointerdown', function(ev) {
		let d = ev.target.day
		if (d == null)
			return
		e.sel_month.close()
		e.focus()
		update_weekview(start_week, d)
		update_ym(d)
		return this.capture_pointer(ev, null, function() {
			set_ts(d + daytime(as_ts(e.input_val)), null, true)
			e.fire('val_picked') // picker protocol
			return false
		})
	})

	e.sel_month.on('input_val_changed', function(v, ev) {
		if (!(ev && ev.input))
			return
		let t = as_ts(e.input_val)
		let ct
		if (t != null) {
			t = set_month(t, v)
			ct = week(month(t))
			set_ts(t)
		} else {
			let y = e.sel_year.input_val
			let m = v
			ct = y != null && m != null ? week(time(y, m)) : null
		}
		update_weekview(ct, t)
	})

	e.sel_year.on('input_val_changed', function(v, ev) {
		if (!(ev && ev.input))
			return
		let t = as_ts(e.input_val)
		if (t != null) {
			t = set_year(t, v)
			ct = week(month(t))
			set_ts(t)
		} else {
			let y = v
			let m = e.sel_month.input_val
			ct = y != null && m != null ? week(time(y, m)) : null
		}
		update_weekview(ct, t)
	})

	e.sel_hour.on('input_val_changed', function(v, ev) {
		if (!(ev && ev.input))
			return
		let t = as_ts(e.input_val)
		if (t != null) {
			t = set_hours(t, v)
			set_ts(t)
		}
	})

	e.sel_minute.on('input_val_changed', function(v, ev) {
		if (!(ev && ev.input))
			return
		let t = as_ts(e.input_val)
		if (t != null) {
			t = set_minutes(t, v)
			set_ts(t)
		}
	})

	e.sel_second.on('input_val_changed', function(v, ev) {
		if (!(ev && ev.input))
			return
		let t = as_ts(e.input_val)
		if (t != null) {
			t = set_seconds(t, v)
			set_ts(t)
		}
	})

	e.weekview.on('wheel', function(ev, dy) {
		let t = as_ts(e.input_val)
		let ct = or(week(start_week, dy), week(month(or(t, time()))))
		update_weekview(ct, t)
		update_ym(focused_month(ct))
		return false
	})

	e.weekview.on('keydown', function(key, shift) {
		let d, m
		switch (key) {
			case 'ArrowLeft'  : d = -1; break
			case 'ArrowRight' : d =  1; break
			case 'ArrowUp'    : d = -7; break
			case 'ArrowDown'  : d =  7; break
			case 'PageUp'     : m = -1; break
			case 'PageDown'   : m =  1; break
		}
		let t = as_ts(e.input_val)
		if (d) {
			let dt = daytime(t) || 0
			set_ts(or(day(t, d), day(time())) + dt, true)
			return false
		}
		if (m) {
			let dt = t != null ? t - month(t) : 0
			set_ts(or(month(t, m), month(time())) + dt, true)
			return false
		}
		if (key == 'Home') {
			let dt = daytime(t) || 0
			set_ts((shift ? year(or(t, time())) : month(or(t, time()))) + dt, true)
			return false
		}
		if (key == 'End') {
			let dt = daytime(t) || 0
			set_ts((day(shift ? year(or(t, time()), 1) : month(or(t, time()), 1), -1)) + dt, true)
			return false
		}
		if (key == 'Enter') {
			e.fire('val_picked', {input: e}) // picker protocol
			return false
		}
	})

	function pick_on_enter(key) {
		if (key == 'Enter') {
			e.fire('val_picked', {input: e}) // picker protocol
			return false
		}
	}
	e.weekview  .on('keydown', pick_on_enter)
	e.sel_month .on('keydown', pick_on_enter)
	e.sel_year  .on('keydown', pick_on_enter)
	e.sel_hour  .on('keydown', pick_on_enter)
	e.sel_minute.on('keydown', pick_on_enter)
	e.sel_second.on('keydown', pick_on_enter)


	e.pick_near_val = function(delta, ev) {
		let dt = daytime(as_ts(e.input_val)) || 0
		set_ts(day(or(as_ts(e.input_val), time()), delta) + dt)
		e.fire('val_picked', ev)
	}

	e.on('dropdown_opened', function() {
		update_view(as_ts(e.input_val))
	})

})

// ---------------------------------------------------------------------------
// date dropdown
// ---------------------------------------------------------------------------

component('x-date-dropdown', 'Input', function(e) {
	e.create_picker = calendar
	e.props.field_type = {default: 'date'}
	editbox_widget(e, {input: false, picker: true})
})

// ---------------------------------------------------------------------------
// date edit
// ---------------------------------------------------------------------------

component('x-dateedit', 'Input', function(e) {

	editbox_widget(e, {picker: true})

	e.create_picker = calendar

	e.calendar_button = button({
		classes: 'x-dateedit-calendar-button',
		icon: 'far fa-calendar-alt',
		text: '',
		bare: true,
		focusable: false,
		title: S('button_pick_from_calendar', 'Pick from calendar'),
	})

	e.calendar_button.on('activate', function() {
		e.toggle(true)
	})

	e.calendar_button.set_open = noop

	e.create_dropdown_button = function() {
		return e.calendar_button
	}

})

component('x-timepicker', 'Input', function(e) {

	val_widget(e)
	focusable_widget(e)

	let hh = t => t && t.slice(0, 2)
	let mm = t => t && t.slice(3, 5)
	let ss = t => t && t.slice(6, 8)

	e.cancel_button = button({
		classes: 'x-timepicker-button-cancel',
		cancel: true,
		text: S('cancel', 'Cancel'),
		action: function() {
			e.dropdown.cancel()
		},
	})

	e.set_button = button({
		text: S('set', 'Set'),
		classes: 'x-timepicker-button-set',
		primary: true,
		action: function() {
			e.fire('val_picked') // picker protocol
		},
	})

	e.on('bind_field', function(on) {
		if (!on) return

		e.clear()

		function gen_sel(classes, max, step) {
			let a = []
			for (let i = 0; i < max; i += step)
				a.push(i.base(10, 2))
			return listbox({
				classes: 'x-timepicker-sel ' + classes,
				items: a,
				max_h: 200,
				val_col: 0,
			})
		}

		e.sel_h = gen_sel('x-timepicker-sel-h', 24, or(e.field.hour_step  , 1))
		e.sel_m = gen_sel('x-timepicker-sel-m', 60, or(e.field.minute_step, 1))
		e.sel_s = gen_sel('x-timepicker-sel-s', 60, or(e.field.second_step, 1))

		let hh = div({class: 'x-timepicker-heading x-timepicker-heading-h'}, S('hour'  , 'Hour'))
		let hm = div({class: 'x-timepicker-heading x-timepicker-heading-m'}, S('minute', 'Minute'))
		let hs = div({class: 'x-timepicker-heading x-timepicker-heading-s'}, S('second', 'Second'))

		e.bool_attr('has_seconds', e.field.has_seconds || null)

		function set_val(_, ev) {
			if (!(ev && ev.input))
				return // called by update_view()
			let h = e.sel_h.input_val || '00'
			let m = e.sel_m.input_val || '00'
			let s = e.sel_s.input_val || '00'
			let t = h != null && m != null && s != null ? h + ':' + m + ':' + s : null
			e.set_val(t, {input: e})
		}
		e.sel_h.on('input_val_changed', set_val)
		e.sel_m.on('input_val_changed', set_val)
		e.sel_s.on('input_val_changed', set_val)

		e.add(
			hh, hm, hs,
			e.sel_h, e.sel_m, e.sel_s,
			e.cancel_button, e.set_button
		)
	})

	function update_view(t) {
		e.sel_h.reset_val(hh(t))
		e.sel_m.reset_val(mm(t))
		e.sel_s.reset_val(ss(t))
		e.sel_h.scroll_to_focused_cell(true)
		e.sel_m.scroll_to_focused_cell(true)
		e.sel_s.scroll_to_focused_cell(true)
	}

	e.do_update_val = function(v, ev) {
		assert(e.bound)
		if (ev && ev.input == e)
			return // called by set_val()
		update_view(v)
	}

	e.on('dropdown_opened', function() {
		update_view(e.input_val)
		runafter(0, () => e.sel_h.focus())
	})

})

// ---------------------------------------------------------------------------
// time-of-day edit
// ---------------------------------------------------------------------------

component('x-timeofdayedit', 'Input', function(e) {

	editbox_widget(e, {picker: true})

	e.create_picker = timepicker

	e.timepicker_button = button({
		classes: 'x-timeofdayedit-timepicker-button',
		icon: 'fa fa-clock',
		text: '',
		bare: true,
		focusable: false,
		title: S('button_pick_from_time_picker', 'Pick from time picker'),
	})

	e.timepicker_button.on('activate', function() {
		e.toggle(true)
	})

	e.timepicker_button.set_open = noop

	e.create_dropdown_button = function() {
		return e.timepicker_button
	}

})

// ---------------------------------------------------------------------------
// richedit
// ---------------------------------------------------------------------------

component('x-richedit', 'Input', function(e) {

	e.content_box = div({class: 'x-richtext-content'})
	e.focus_box = div({class: 'x-focus-box'}, e.content_box)
	e.add(e.focus_box)

	val_widget(e)
	editable_widget(e)
	richtext_widget_editing(e)

	e.do_update_val = function(v, ev) {
		if (ev && ev.input == e)
			return
		e.content_box.html = v
	}

	e.on('content_changed', function() {
		let v = e.content_box.html
		e.set_val(v ? v : null, {input: e})
	})

	e.on('bind', function(on) {
		if (on)
			e.editing = true
	})

})

// ---------------------------------------------------------------------------
// image
// ---------------------------------------------------------------------------

component('x-image', 'Input', function(e) {

	e.title = ''
	e.class('empty fa fa-camera')

	row_widget(e)

	// believe it or not, `src=''` is the only way to remove the border.
	e.img1 = tag('img', {class: 'x-image-img', src: ''})
	e.img2 = tag('img', {class: 'x-image-img', src: ''})
	e.next_img = tag('img', {class: 'x-image-img', src: ''})
	e.prev_img = tag('img', {class: 'x-image-img', src: ''})

	e.overlay = div({class: 'x-image-overlay'})

	e.upload_btn = div({class: 'x-image-button x-image-upload-button fa fa-cloud-upload-alt', title: S('upload_image', 'Upload image')})
	e.download_btn = div({class: 'x-image-button x-image-download-button fa fa-file-download', title: S('download_image', 'Download image')})
	e.buttons = span(0, e.upload_btn, e.download_btn)
	e.file_input = tag('input', {type: 'file', style: 'display: none'})
	e.overlay.add(e.buttons, e.file_input)

	e.add(e.img1, e.img2, e.overlay)

	function img_load(ev) {
		e.class('empty fa fa-camera', false)
		e.overlay.class('transparent', true)
		e.download_btn.bool_attr('disabled', null)
		e.title = S('image', 'Image')
		let img1 = e.img1
		let img2 = e.img2
		img1.style['z-index'] = 1
		img2.style['z-index'] = 0
		img1.class('loaded', true)
		img2.class('loaded', false)
		e.img1 = img2
		e.img2 = img1
		e.img1.hidden = false
		e.img2.hidden = false
	}
	e.img1.on('load', img_load)
	e.img2.on('load', img_load)

	function img_error(ev) {
		e.img1.hidden = true
		e.img2.hidden = true
		e.class('empty fa fa-camera', true)
		e.overlay.class('transparent', false)
		e.download_btn.bool_attr('disabled', true)
		e.title = S('no_image', 'No image')
	}
	e.img1.on('error', img_error)
	e.img2.on('error', img_error)

	e.format_url = function(vals, purpose) {
		return (purpose == 'upload' && e.upload_url_format || e.url_format || '').subst(vals)
	}

	function format_url(purpose) {
		let vals = e.row && e.nav.serialize_row_vals(e.row)
		return vals && e.format_url(vals, purpose)
	}

	e.do_update_row = function() {
		e.bool_attr('disabled', e.disabled || null)
		e.img1.attr('src', format_url() || '')
		e.img1.class('loaded', false)
		e.upload_btn.hidden = e.disabled || !e.allow_upload
		e.download_btn.hidden = e.disabled || !e.allow_download
	}

	e.prop('url_format'        , {store: 'var', attr: true})
	e.prop('upload_url_format' , {store: 'var', attr: true})
	e.prop('allow_upload'      , {store: 'var', type: 'bool', default: true, attr: true})
	e.prop('allow_download'    , {store: 'var', type: 'bool', default: true, attr: true})

	// upload/download error notifications

	e.notify = function(type, message, ...args) {
		notify(message, type)
		e.fire('notify', type, message, ...args)
	}

	// upload

	let upload_req
	e.upload = function(file) {
		if (upload_req)
			upload_req.abort()
		let reader = new FileReader()
		reader.onload = function(ev) {
			let file_contents = ev.target.result
			upload_req = ajax({
				url: format_url('upload'),
				upload: file_contents,
				headers: {
					'content-type': file.type,
					'content-disposition': 'attachment; filename="' + file.name + '"',
				},
				success: function() {
					e.update()
				},
				fail: function(type, status, message, body) {
					let err = this.error_message(type, status, message, body)
					if (err)
						e.notify('error', err, body)
				},
				done: function() {
					upload_req = null
				},
				upload_progress: function(p) {
					// TODO:
				},
			})
		}
		reader.readAsArrayBuffer(file)
	}

	e.overlay.on('dragenter', return_false)
	e.overlay.on('dragover', return_false)

	e.overlay.on('drop', function(ev) {
		if (!e.allow_upload)
			return false
		let files = ev.dataTransfer && ev.dataTransfer.files
		if (files && files.length)
			e.upload(files[0])
		return false
	})

	e.upload_btn.on('click', function() {
		e.file_input.click()
	})

	e.file_input.on('change', function() {
		if (this.files && this.files.length) {
			e.upload(this.files[0])
			// reset value or we won't get another change event for the same file.
			this.value = ''
		}
	})

	// download

	e.download_btn.on('click', function() {
		let href = format_url()
		let name = url(href).segments.last
		let link = tag('a', {href: href, download: name, style: 'display: none'})
		e.add(link)
		link.click()
		link.remove()
	})

})

// ---------------------------------------------------------------------------
// mustache row
// ---------------------------------------------------------------------------

component('x-mu-row', 'Input', function(e) {

	assert(e.at[0] && e.at[0].tag == 'script',
		'mustache widget is missing the <script> tag')

	e.template_string = e.at[0].html

	row_widget(e)

	e.do_update_row = function(row) {
		let vals = row && e.nav.serialize_row_vals(row)
		return e.render(vals)
	}

})

// ---------------------------------------------------------------------------
// sql editor
// ---------------------------------------------------------------------------

component('x-sql-editor', 'Input', function(e) {

	val_widget(e)

	e.do_update_val = function(v, ev) {
		e.editor.getSession().setValue(v || '')
	}

	e.do_update_errors = function(errors, ev) {
		// TODO
	}

	e.on('bind', function(on) {
		if (on) {
			e.editor = ace.edit(e, {
					mode: 'ace/mode/mysql',
					highlightActiveLine: false,
					printMargin: false,
					displayIndentGuides: false,
					tabSize: 3,
					enableBasicAutocompletion: true,
				})
			//sql_editor_ct.on('blur'            , exit_widget_editing, on)
			//sql_editor_ct.on('raw:pointerdown' , prevent_bubbling, on)
			//sql_editor_ct.on('raw:pointerup'   , prevent_bubbling, on)
			//sql_editor_ct.on('raw:click'       , prevent_bubbling, on)
			//sql_editor_ct.on('raw:contextmenu' , prevent_bubbling, on)
			e.do_update_val(e.val)
			//sql_editor.getSession().getValue()
		} else {
			e.editor.destroy()
			e.editor = null
		}
	})

})

// ---------------------------------------------------------------------------
// chart
// ---------------------------------------------------------------------------

component('x-chart', 'Input', function(e) {

	contained_widget(e)
	serializable_widget(e)
	selectable_widget(e)

	// model ------------------------------------------------------------------

	function compute_step_and_range(wanted_n, min_sum, max_sum, scale_base, scales) {
		scale_base = scale_base || 10
		scales = scales || [1, 2, 2.5, 5]
		let d = max_sum - min_sum
		let min_scale_exp = floor((d ? logbase(d, scale_base) : 0) - 2)
		let max_scale_exp = floor((d ? logbase(d, scale_base) : 0) + 2)
		let n0, step
		for (let scale_exp = min_scale_exp; scale_exp <= max_scale_exp; scale_exp++) {
			for (let scale of scales) {
				let step1 = scale_base ** scale_exp * scale
				let n = d / step1
				if (n0 == null || abs(n - wanted_n) < n0) {
					n0 = n
					step = step1
				}
			}
		}
		min_sum = floor (min_sum / step) * step
		max_sum = ceil  (max_sum / step) * step
		return [step, min_sum, max_sum]
	}

	function compute_sums(sum_def, row_group) {
		let agg = sum_def.agg
		let fi = sum_def.field.val_index
		let n
		let i = 0
		if (agg == 'sum' || agg == 'avg') {
			n = 0
			for (let row of row_group)
				if (row[fi] != null) {
					n += row[fi]
					i++
				}
			if (i && agg == 'avg')
				n /= i
		} else if (agg == 'min') {
			n = 1/0
			for (let row of row_group)
				if (row[fi] != null) {
					n = min(n, row[fi])
					i++
				}
		} else if (agg == 'max') {
			n = -1/0
			for (let row of row_group)
				if (row[fi] != null) {
					n = max(n, row[fi])
					i++
				}
		}
		if (i)
			row_group.sum = n
	}

	let sum_defs, group_cols, all_split_groups

	function reset_model() {
		sum_defs = null
		group_cols = null
		all_split_groups = null
	}

	function update_model() {

		reset_model()

		if (!e.nav) return
		if (e.sum_cols == null) return
		if (e.group_cols == null) return

		// parse `sum_cols`: `COL1[/AVG|MIN|MAX|SUM][..COL2]`.
		// the `..` operator ties two line graphs together into a closed shape.
		let tied_back = false
		for (let col of e.sum_cols.replaceAll('..', '.. ').names()) {
			let tied = col.includes('..')
			col = col.replace('..', '')
			let agg = 'avg'; col.replace(/\/[^\/]+$/, k => { agg = k; return '' })
			let fld = e.nav.optfld(col)
			if (fld) { // it's enough for one sum_col to be valid.
				sum_defs = sum_defs || []
				sum_defs.push({field: fld, tied: tied, tied_back: tied_back, agg: agg})
			}
			tied_back = fld ? tied : false
		}
		if (!sum_defs) return

		// parse `group_cols`: `COL[/OFFSET][/UNIT][/FREQ]`.
		group_cols = []
		let range_defs = obj()
		for (let col of e.group_cols.trim().split(/\s+/)) {
			let freq, offset, unit
			col = col.replace(/\/[^\/]+$/, k => { freq   = k.substring(1).num(); return '' })
			col = col.replace(/\/[^\/]+$/, k => { unit   = k.substring(1); return '' })
			col = col.replace(/\/[^\/]+$/, k => { offset = k.substring(1).num(); return '' })
			let fld = e.nav.optfld(col)
			if (!fld) {
				reset_model()
				return // all group_cols must be valid.
			}
			group_cols.push(col)
			if (freq != null || offset != null || unit != null) {
				range_defs[col] = {
					freq   : freq,
					offset : offset,
					unit   : unit,
				}
			}
		}

		// group rows and compute the sums on each group.
		// all_split_groups : [split_group1, ...]   split groups (cgs) => superimposed graphs.
		// split_group      : [row_group1, ...]     row groups (xgs) => one graph of sum points.
		// row_group        : [row1, ...]           each row group => one sum point.
		all_split_groups = []
		for (let sum_def of sum_defs) {

			let split_groups = e.nav.row_groups({
				col_groups : (e.split_cols ? e.split_cols+'>' : '') + group_cols,
				range_defs : range_defs,
				rows       : e.nav.rows,
			})

			if (!e.split_cols)
				split_groups = [split_groups]

			for (let split_group of split_groups) {

				for (let row_group of split_group)
					compute_sums(sum_def, row_group)

				split_group.tied_back = sum_def.tied_back
				split_group.tied = sum_def.tied
			}

			all_split_groups.extend(split_groups)
		}

		return true
	}

	// compute label for a sum point.
	function sum_label(cls, text, sum) {
		let sum_fld = sum_defs[0].field
		let a = []
		if (text)
			a.push(text)
		a.push(e.nav.cell_display_val_for(null, sum_fld, sum))
		return a.join_nodes(tag('br'), cls && div({class: cls}))
	}

	function val_text(val) {
		let val_fld = e.nav.fld(group_cols[0]) // TODO: only works for single-col groups!
		let s = e.nav.cell_display_val_for(null, val_fld, val)
		return isnode(s) ? s.textContent : s
	}

	function pie_slices() {
		if (!update_model()) return
		let groups = all_split_groups[0] // TODO: draw multiple pies for each split group

		let slices = []
		slices.total = 0
		for (let group of groups) {
			let slice = {}
			let sum = group.sum
			slice.sum = sum
			slice.label = sum_label('x-chart-label', group.text, sum)
			slices.push(slice)
			slices.total += sum
		}

		// sum small slices into a single "other" slice.
		let big_slices = []
		let other_slice
		for (let slice of slices) {
			slice.size = slice.sum / slices.total
			if (slice.size < e.other_threshold) {
				other_slice = other_slice || {sum: 0}
				other_slice.sum += slice.sum
			} else
				big_slices.push(slice)
		}
		if (other_slice) {
			other_slice.size = other_slice.sum / slices.total
			other_slice.label = sum_label('x-chart-label', e.other_text, other_slice.sum)
			big_slices.push(other_slice)
		}
		return big_slices
	}

	// view -------------------------------------------------------------------

	let render = {} // {shape->func}
	let tt
	let pointermove

	function slice_color(i, n) {
		return hsl_to_rgb(((i / n) * 360 - 120) % 180, .8, .7)
	}

	render.stack = function() {

		let slices = pie_slices()
		if (!slices)
			return

		let stack = div({class: 'x-chart-stack'})
		let labels = div({style: 'position: absolute;'})
		e.add(stack, labels)

		let i = 0
		for (let slice of slices) {
			let cdiv = div({class: 'x-chart-stack-slice'})
			let sdiv = div({class: 'x-chart-stack-slice-ct'}, cdiv, slice.label)
			sdiv.style.flex = slice.size
			cdiv.style['background-color'] = slice_color(i, slices.length)
			stack.add(sdiv)
			i++
		}

	}

	render.pie = function() {

		let slices = pie_slices()
		if (!slices)
			return

		let pie = div({class: 'x-chart-pie'})
		let labels = div({style: 'position: absolute;'})
		e.add(pie, labels)

		let w = e.clientWidth
		let h = e.clientHeight
		let pw = (w / h < 1 ? w : h) * .5

		pie.w = pw
		pie.h = pw
		pie.x = (w - pw) / 2
		pie.y = (h - pw) / 2

		let s = []
		let angle = 0
		let i = 0
		for (let slice of slices) {
			let arclen = slice.size * 360

			// generate a gradient step for this slice.
			let color = slice_color(i, slices.length)
			s.push(color + ' ' + angle.dec()+'deg '+(angle + arclen).dec()+'deg')

			// add the label and position it around the pie.
			labels.add(slice.label)
			let pad = 5
			let center_angle = angle + arclen / 2
			let [x, y] = point_around(w / 2, h / 2, pw / 2, center_angle - 90)
			slice.label.x = x + pad
			slice.label.y = y + pad
			let left = center_angle > 180
			let top  = center_angle < 90 || center_angle > 3 * 90
			if (left)
				slice.label.x = x - slice.label.clientWidth - pad
			if (top)
				slice.label.y = y - slice.label.clientHeight - pad

			angle += arclen
			i++
		}

		pie.style['background-image'] = 'conic-gradient(' + s.join(',') + ')'
	}

	function line_color(i, n, alpha) {
		return hsl_to_rgb(((i / n) * 180 - 210) % 360, .8, .6, alpha)
	}

	function render_line_or_columns(columns, rotate, dots, area) {
		if (!update_model()) return
		let groups = all_split_groups

		let css = e.css()
		let r = e.rect()

		let pad_x1 = num(css['padding-left'  ])
		let pad_x2 = num(css['padding-right' ])
		let pad_y1 = num(css['padding-top'   ])
		let pad_y2 = num(css['padding-bottom'])

		let canvas = tag('canvas', {
			class : 'x-chart-canvas',
			width : r.w - pad_x1 - pad_x2,
			height: r.h - pad_y1 - pad_y2,
		})
		e.set(canvas)

		let cx = canvas.getContext('2d')

		let w = canvas.width
		let h = canvas.height

		// compute vertical (sum) and horizontal (val) ranges.
		// also compute a map of
		let xgs = map() // {x_key -> xg}
		let min_val =  1/0
		let max_val = -1/0
		let min_sum =  1/0
		let max_sum = -1/0
		let user_min_val = or(e.min_val, -1/0)
		let user_max_val = or(e.max_val,  1/0)
		for (let cg of groups) {
			for (let xg of cg) {
				let sum = xg.sum
				let val = xg.key_vals[0] // TODO: only works for numbers!
				min_sum = min(min_sum, sum)
				max_sum = max(max_sum, sum)
				min_val = min(min_val, val)
				max_val = max(max_val, val)
				xg.visible = val >= user_min_val && val <= user_max_val
				xgs.set(val, xg)
			}
		}

		// clip/stretch ranges to given fixed values.
		if (e.min_val != null) min_val = e.min_val
		if (e.max_val != null) max_val = e.max_val
		if (e.min_sum != null) min_sum = e.min_sum
		if (e.max_sum != null) max_sum = e.max_sum

		if (columns) {
			let val_unit = (max_val - min_val) / xgs.size
			min_val -= val_unit / 2
			max_val += val_unit / 2
		}

		// compute min, max and step of y-axis markers so that 1) the step is
		// on a module and the spacing between lines is the closest to an ideal.
		let sum_step; {
			let y_spacing = rotate ? 80 : 40 // wanted space between y-axis markers
			let target_n = round(h / y_spacing) // wanted number of y-axis markers
			let fld = sum_defs[0].field
			;[sum_step, min_sum, max_sum] =
				compute_step_and_range(target_n, min_sum, max_sum, fld.scale_base, fld.scales)
		}

		// compute min, max and step of x-axis markers so that 1) the step is
		// on a module and the spacing between markers is the closest to an ideal.
		let val_step; {
			let min_w = 20    // min element width
			let max_n = max(1, floor(w / min_w)) // max number of elements
			;[val_step, min_val, max_val] = compute_step_and_range(max_n, min_val, max_val)
		}

		cx.font = css['font-size'] + ' ' + css.font

		let line_h; {
			let m = cx.measureText('M')
			line_h = (m.actualBoundingBoxAscent - m.actualBoundingBoxDescent) * 1.5
		}

		// paddings to make room for axis markers.
		let px1 = 40
		let px2 = 30
		let py1 = round(rotate ? line_h + 5 : 10)
		let py2 = line_h * 1.5

		w -= px1 + px2
		h -= py1 + py2
		cx.translate(px1, py1)

		if (rotate) {
			cx.translate(w, 0)
			cx.rotate(rad * 90)
			;[w, h] = [h, w]
		}

		// compute polygon's points.
		for (let cg of groups) {
			let xgi = 0
			for (let xg of cg) {
				let val = xg.key_vals[0]
				xg.x = round(lerp(val, min_val, max_val, 0, w))
				xg.y = round(lerp(xg.sum, min_sum, max_sum, h - py2, 0))
				if (xg.y != xg.y)
					xg.y = xg.sum
				xgi++
			}
		}

		// draw x-axis labels & reference lines.

		let ref_line_color = css.getPropertyValue('--x-border-light')
		let label_color    = css.getPropertyValue('--x-fg-label')
		cx.fillStyle   = label_color
		cx.strokeStyle = ref_line_color

		function draw_xaxis_label(xg_x, text) {
			let m = cx.measureText(text)
			cx.save()
			if (rotate) {
				let text_h = m.actualBoundingBoxAscent - m.actualBoundingBoxDescent
				let x = round(xg_x + text_h / 2)
				let y = h + m.width
				cx.translate(x, y)
				cx.rotate(rad * -90)
			} else {
				let x = xg_x - m.width / 2
				let y = round(h)
				cx.translate(x, y)
			}
			cx.fillText(text, 0, 0)
			cx.restore()
			// draw x-axis center line marker.
			cx.beginPath()
			cx.moveTo(xg_x + .5, h - py2 + 0.5)
			cx.lineTo(xg_x + .5, h - py2 + 4.5)
			cx.stroke()
		}

		// draw x-axis labels.

		let discrete = e.min_val == null || e.max_val == null
		if (discrete) {
			let i = 0
			for (let xg of xgs.values()) {
				if (i % val_step == 0 && xg.visible) {
					// TODO: draw the element as a html overlay
					let text = isnode(xg.text) ? xg.text.textContent : xg.text
					draw_xaxis_label(xg.x, text)
				}
				i++
			}
		} else {
			for (let val = min_val; val <= max_val; val += val_step) {
				let text = val_text(val)
				let x = round(lerp(val, min_val, max_val, 0, w))
				draw_xaxis_label(x, text)
			}
		}

		// draw y-axis labels & reference lines.

		for (let sum = min_sum; sum <= max_sum; sum += sum_step) {
			// draw y-axis label.
			let y = round(lerp(sum, min_sum, max_sum, h - py2, 0))
			let s = sum_label(null, null, sum)
			s = isnode(s) ? s.textContent : s
			let m = cx.measureText(s)
			let text_h = m.actualBoundingBoxAscent - m.actualBoundingBoxDescent
			cx.save()
			if (rotate) {
				let px = -5
				let py = round(y + m.width / 2)
				cx.translate(px, py)
				cx.rotate(rad * -90)
			} else {
				let px = -m.width - 10
				let py = round(y + text_h / 2)
				cx.translate(px, py)
			}
			cx.fillText(s, 0, 0)
			cx.restore()
			// draw y-axis strike-through line marker.
			cx.strokeStyle = ref_line_color
			cx.beginPath()
			cx.moveTo(0 + .5, y - .5)
			cx.lineTo(w + .5, y - .5)
			cx.stroke()
		}

		// draw the axis.
		cx.strokeStyle = ref_line_color
		cx.beginPath()
		// y-axis
		cx.moveTo(.5, round(lerp(min_sum, min_sum, max_sum, h - py2, 0)) + .5)
		cx.lineTo(.5, round(lerp(max_sum, min_sum, max_sum, h - py2, 0)) + .5)
		// x-axis
		cx.moveTo(round(lerp(min_val, min_val, max_val, 0, w)) + .5, round(h - py2) - .5)
		cx.lineTo(round(lerp(max_val, min_val, max_val, 0, w)) + .5, round(h - py2) - .5)
		cx.stroke()

		if (columns) {

			let cn = groups.length
			let bar_w = round(w / (xgs.size - 1) / cn / 3)
			let half_w = round((bar_w * cn + 2 * (cn - 1)) / 2)

			function bar_rect(cgi, xg) {
				let x = xg.x
				let y = xg.y
				return [
					x + cgi * (bar_w + 2) - half_w,
					y,
					bar_w,
					h - py2 - y
				]
			}
		}

		// draw the chart lines or columns.

		cx.rect(0, 0, w, h)
		cx.clip()

		let cgi = 0
		for (let cg of groups) {

			let color = line_color(cgi, groups.length)

			if (columns) {

				cx.fillStyle = color
				for (let xg of cg) {
					let [x, y, w, h] = bar_rect(cgi, xg)
					cx.beginPath()
					cx.rect(x, y, w, h)
					cx.fill()
				}

			} else {

				// draw the line.

				if (!cg.tied_back)
					cx.beginPath()

				let x0, x
				for (let xg of (cg.tied_back ? cg.reverse() : cg)) {
					x = xg.x
					if (x0 == null && !cg.tied_back) {
						x0 = x
						cx.moveTo(x + .5, xg.y + .5)
					} else {
						cx.lineTo(x + .5, xg.y + .5)
					}
				}

				if (area && !cg.tied && !cg.tied_back) {
					cx.lineTo(x  + .5, h - py2 + .5)
					cx.lineTo(x0 + .5, h - py2 + .5)
					cx.closePath()
				}

				if (area && !cg.tied) {
					cx.fillStyle = line_color(cgi, groups.length, .5)
					cx.fill()
				}

				cx.strokeStyle = color
				cx.stroke()

				// draw a dot on each line cusp.
				if (dots) {
					cx.fillStyle = cx.strokeStyle
					for (let xg of cg) {
						cx.beginPath()
						cx.arc(xg.x, xg.y, 3, 0, 2*PI)
						cx.fill()
					}
				}

			}

			cgi++
		}

		function hit_test_columns(mx, my) {
			let cgi = 0
			for (let cg of groups) {
				for (let xg of cg) {
					let [x, y, w, h] = bar_rect(cgi, xg)
					if (mx >= x && mx <= x + w && my >= y && my <= y + h)
						return [cg, xg, x, y, w, h]
				}
				cgi++
			}
		}

		function hit_test_dots(mx, my) {
			let max_d = 16**2
			let min_d = 1/0
			let hit_cg, hit_xg
			for (let cg of groups) {
				for (let xg of cg) {
					let dx = abs(mx - xg.x)
					let dy = abs(my - xg.y)
					let d = dx**2 + dy**2
					if (d <= min(min_d, max_d)) {
						min_d = d
						hit_cg = cg
						hit_xg = xg
					}
				}
			}
			if (hit_cg)
				return [hit_cg, hit_xg, hit_xg.x, hit_xg.y, 0, 0]
		}

		pointermove = function(ev, mx, my) {
			let r = canvas.rect()
			mx -= r.x
			my -= r.y
			let mp = new DOMPoint(mx, my).matrixTransform(cx.getTransform().invertSelf())
			mx = mp.x
			my = mp.y
			let hit = columns ? hit_test_columns(mx, my) : hit_test_dots(mx, my)
			if (hit) {
				let [cg, xg, x, y, w, h] = hit
				tt = tt || tooltip({
					target: e,
					align: 'center',
					kind: 'info',
					classes: 'x-chart-tooltip',
					style: 'pointer-events: none', // prevent hitting the tooltip itself.
					check: function() { return this.hit }
				})
				tt.side = rotate ? 'right' : 'top'
				tt.begin_update()
				tt.text = sum_label('x-chart-tooltip-label', TC(xg.text), xg.sum)
				let tm = cx.getTransform()
				let p1 = new DOMPoint(x    , y    ).matrixTransform(tm)
				let p2 = new DOMPoint(x + w, y + h).matrixTransform(tm)
				let p3 = new DOMPoint(x + w, y    ).matrixTransform(tm)
				let p4 = new DOMPoint(x    , y + h).matrixTransform(tm)
				let x1 = min(p1.x, p2.x, p3.x, p4.x)
				let y1 = min(p1.y, p2.y, p3.y, p4.y)
				let x2 = max(p1.x, p2.x, p3.x, p4.x)
				let y2 = max(p1.y, p2.y, p3.y, p4.y)
				tt.px = x1 + pad_x1
				tt.py = y1 + pad_y1
				tt.pw = x2 - x1
				tt.ph = y2 - y1
				tt.hit = true
				tt.end_update()
				return
			}
			if (tt) {
				tt.hit = false
				tt.update()
			}
		}

	}

	render.line      = function() { render_line_or_columns() }
	render.line_dots = function() { render_line_or_columns(false, false, true) }
	render.area      = function() { render_line_or_columns(false, false, false, true) }
	render.area_dots = function() { render_line_or_columns(false, false, true, true) }
	render.column    = function() { render_line_or_columns(true) }
	render.bar       = function() { render_line_or_columns(true, true) }

	e.do_update = function() {
		pointermove = noop
		e.clear()
		render[e.shape]()
	}

	e.on('pointermove' , function(...args) { pointermove(...args) })
	e.on('pointerleave', function(...args) { pointermove(...args) })

	// config -----------------------------------------------------------------

	function redraw() {
		e.update()
	}

	function bind_nav(nav, on) {
		if (!e.bound)
			return
		if (!nav)
			return
		nav.on('reset'               , redraw, on)
		nav.on('rows_changed'        , redraw, on)
		nav.on('cell_state_changed'  , redraw, on)
		nav.on('display_vals_changed', redraw, on)
	}

	e.on('bind', function(on) {
		bind_nav(e.nav, on)
		document.on('layout_changed', redraw, on)
		if (!on && tt) {
			tt.close()
			tt = null
		}
	})

	e.on('resize', redraw)

	e.set_nav = function(nav1, nav0) {
		assert(nav1 != e)
		bind_nav(nav0, false)
		bind_nav(nav1, true)
		redraw()
	}

	e.prop('nav', {store: 'var', private: true})
	e.prop('nav_id', {store: 'var', bind_id: 'nav', type: 'nav'})

	e.set_split_cols      = redraw
	e.set_group_cols      = redraw
	e.set_sum_cols        = redraw
	e.set_min_val         = redraw
	e.set_max_val         = redraw
	e.set_min_sum         = redraw
	e.set_max_sum         = redraw
	e.set_other_threshold = redraw
	e.set_other_text      = redraw

	e.prop('split_cols' , {store: 'var', type: 'col', col_nav: () => e.nav, attr: true})
	e.prop('group_cols' , {store: 'var', type: 'col', col_nav: () => e.nav, attr: true})
	e.prop('sum_cols'   , {store: 'var', type: 'col', col_nav: () => e.nav, attr: true})
	e.prop('min_sum'    , {store: 'var', type: 'number', attr: true})
	e.prop('max_sum'    , {store: 'var', type: 'number', attr: true})
	e.prop('min_val'    , {store: 'var', type: 'number', attr: true})
	e.prop('max_val'    , {store: 'var', type: 'number', attr: true})
	e.prop('other_threshold', {store: 'var', type: 'number', default: .05, decimals: null, attr: true})
	e.prop('other_text', {store: 'var', default: 'Other', attr: true})
	e.prop('shape', {
		store: 'var', type: 'enum',
		enum_values: ['pie', 'stack', 'line', 'line_dots', 'area', 'area_dots',
			'column', 'bar', 'stackbar', 'bubble', 'scatter'],
		default: 'pie', attr: true,
	})

})

// ---------------------------------------------------------------------------
// mustache widget mixin
// ---------------------------------------------------------------------------

// TODO: convert this into a row_widget

component('x-mu', function(e) {

	assert(e.at[0] && e.at[0].tag == 'script',
		'mustache widget is missing the <script> tag')

	e.template_string = e.at[0].html

	e.class('x-mu')

	e.on('bind', function(on) {
		if (on)
			e.reload()
	})

	// loading ----------------------------------------------------------------

	let load_req

	function load_event(name, ...args) {

		if (name == 'success')
			e.render(args[0], this)

		if (name == 'done')
			load_req = null

		let ev = 'load_'+name
		e.fire(ev, ...args)
		if (e[ev])
			e[ev](...args)

	}

	// function progress()


	let last_data_url, placeholder_set

	e.reload = function(req) {

		let data_url = req && req.url || e.computed_data_url()
		if (data_url == last_data_url)
			return
		last_data_url = data_url

		if (load_req)
			load_req.abort()

		if (!data_url) {
			e.clear()
			placeholder_set =  false
			return
		}

		load_req = ajax(assign({
			dont_send: true,
			event: load_event,
			url: data_url,
		}, req))

		load_req.send()

		return load_req
	}

	// nav & params binding ---------------------------------------------------

	e.computed_data_url = function() {
		if (e.nav && e.nav.focused_row && e.data_url)
			return e.data_url.subst(e.nav.serialize_row_vals(e.nav.focused_row))
		else
			return e.data_url
	}

	e.do_update = function() {
		e.reload()
	}

	e.on('bind', function(on) {
		bind_nav(e.param_nav, e.data_url, on)
		if (on && !placeholder_set) {
			e.render({loading: true})
			placeholder_set = true
		}
	})

	function update() {
		e.update()
	}
	function bind_nav(nav, url, on, reload) {
		if (on && !e.bound)
			return
		if (nav) {
			nav.on('focused_row_changed'     , update, on)
			nav.on('focused_row_val_changed' , update, on)
			nav.on('cell_state_changed'      , update, on)
			nav.on('reset'                   , update, on)
		}
		if (reload !== false)
			e.update()
	}

	e.set_param_nav = function(nav1, nav0) {
		bind_nav(nav0, e.data_url, false, false)
		bind_nav(nav1, e.data_url, true)
	}
	e.prop('param_nav', {store: 'var', private: true})
	e.prop('param_nav_id', {store: 'var', bind_id: 'param_nav', type: 'nav',
			text: 'Param Nav', attr: true})

	e.set_data_url = function(url1, url0) {
		bind_nav(e.param_nav, url0, false, false)
		bind_nav(e.param_nav, url1, true)
	}
	e.prop('data_url', {store: 'var', attr: true})

})

// ---------------------------------------------------------------------------
// widget switcher
// ---------------------------------------------------------------------------

// TODO: convert this into a row_widget

component('x-switcher', 'Containers', function(e) {

	serializable_widget(e)
	selectable_widget(e)
	contained_widget(e)
	let html_items = widget_items_widget(e)

	// nav dynamic binding ----------------------------------------------------

	function update() {
		e.update()
	}

	function bind_nav(nav, on) {
		if (!nav)
			return
		if (!e.bound)
			return
		nav.on('focused_row_changed'     , update, on)
		nav.on('focused_row_val_changed' , update, on)
		nav.on('reset'                   , update, on)
	}

	e.on('bind', function(on) {
		bind_nav(e.nav, on)
	})

	e.set_nav = function(nav1, nav0) {
		assert(nav1 != e)
		bind_nav(nav0, false)
		bind_nav(nav1, true)
	}
	e.prop('nav', {store: 'var', private: true})
	e.prop('nav_id', {store: 'var', bind_id: 'nav', type: 'nav'})

	// view -------------------------------------------------------------------

	// widget-items widget protocol.
	e.do_init_items = function() {
		e.clear()
	}

	e.prop('item_id_format', {store: 'var', attr: true, default: ''})

	e.format_item_id = function(vals) {
		return ('_').cat(e.module, e.item_id_format.subst(vals))
	}

	e.match_item = function(item, vals) { // stub
		// special case: listbox with html elements with "action" attr
		// and the switcher's items also have the "action" attr, so match those.
		if (item.hasattr('action') && vals.f0 && iselem(vals.f0) && vals.f0.hasattr('action'))
			return item.attr('action') == vals.f0.attr('action')
		return item.id == e.format_item_id(vals)
	}

	e.find_item = function(vals) {
		for (let item of e.items)
			if (e.match_item(item, vals))
				return item
	}

	e.item_create_options = noop // stub

	e.create_item = function(vals) {
		let id = e.format_item_id(vals)
		let item = id ? component.create(assign_opt({id: id}, e.item_create_options(vals))) : null
	}

	e.do_update = function() {
		let row = e.nav && e.nav.focused_row
		let vals = row && e.nav.serialize_row_vals(row)
		let item = vals && (e.find_item(vals) || e.create_item(vals))
		e.set(item)
	}

	return {items: html_items}

})

// ---------------------------------------------------------------------------
// x-input
// ---------------------------------------------------------------------------

component('x-input', 'Input', function(e) {

	val_widget(e, true, false)

	e.prop('widget_type', {store: 'var', type: 'enum', enum_values: []})

	e.create_editor = function(field, opt) {
		return e.nav.create_editor(field, opt)
	}

	function bind_field(on) {
		if (on) {
			let opt = {
				can_select_widget: false,
				embedded: false,
			}
			each_widget_prop(function(k, v) { opt[k] = v })
			e.widget = e.create_editor(e.field, opt)
			e.set(e.widget)
		} else {
			if (e.widget) {
				e.widget.remove()
				e.widget = null
			}
		}
	}

	e.on('bind_field', bind_field)

	e.set_widget_type = function(v) {
		if (!e.initialized)
			return
		if (!e.field)
			return
		if (widget_type(v) == widget_type(e.widget_type))
			return
		bind_field(false)
		bind_field(true)
	}

	// proxy out widget.* properties to the widget.

	function each_widget_prop(f) {
		for (let k in e) {
			if (k.starts('widget.')) {
				let v = e.get_prop(k)
				k = k.replace(/^widget\./, '')
				if (v === '')
					v = true
				f(k, v)
			}
		}
	}

	e.set_prop = function(k, v) {
		let v0 = e[k]
		e[k] = v
		if (v !== v0 && e.widget && k.starts('widget.')) {
			k = k.replace(/^widget\./, '')
			e.widget[k] = v
			document.fire('prop_changed', e, k, v, v0, null)
		}
	}

	e.override('init', function(inherited) {
		inherited.call(this)
		e.set_widget_type(e.widget_type)
	})

})

// ---------------------------------------------------------------------------
// form
// ---------------------------------------------------------------------------

component('x-form', 'Containers', function(e) {

	serializable_widget(e)
	selectable_widget(e)
	editable_widget(e)
	contained_widget(e)
	let html_items = widget_items_widget(e)

	let names = {}
	function area_name(item) {
		let s = item.attr('area') || item.col || item.attr('col') || item.id
		if (!s)
			return ''
		if (names[s]) {
			let x = num(names[s][2]) || 1
			do { s = s.slice(0, 2) + (x + 1) } while (names[s])
		}
		names[s] = true
		return s
	}

	// widget-items widget protocol.
	e.do_init_items = function() {
		for (let item of e.items) {
			if (!item.style['grid-area'])
				item.style['grid-area'] = area_name(item)
			e.add(item)
		}
	}

	e.on('resize', function(r) {
		if (!e.bound)
			return
		let n = clamp(floor(r.w / 150), 1, 12)
		for (let i = 1; i <= 12; i++)
			e.class('maxcols'+i, i <= n)
		e.class('compact', r.w < 200)
	})

	e.on('bind', function(on) {
		if (on)
			e.fire('resize', e.rect())
	})

	e.set_nav = function(nav) {
		for (let ce of e.$('.x-input-widget, .x-input'))
			ce.nav = nav
	}
	e.prop('nav', {store: 'var', private: true})
	e.prop('nav_id', {store: 'var', bind_id: 'nav', type: 'nav', attr: true})

	// clicking on blank areas of the form focuses the last focused input element.
	let last_focused_input
	e.on('focusin', function() {
		last_focused_input = e.focused_element
	})
	e.on('pointerdown', function(ev) {
		if (ev.target != e)
			return
		if (!e.hasfocus)
			if (last_focused_input)
				last_focused_input.focus()
			else
				e.focus_first()
		return false
	})

	return {items: html_items}

})