blob: e1a334289b6f778b8df69f0c52172599ff047f5f [file] [log] [blame]
<!-- The <query2-chooser-sk> custom element declaration.
Displays the current value for a selection along with an edit button
that pops up a query-sk dialog to change the selection.
current_query - The current query formatted as a URL formatted query string.
paramset - The paramset to make selections from.
query - The underlying query-sk element.
See query-sk.
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="stylesheet" href="/res/common/css/md.css">
<dom-module id="query2-chooser-sk">
<style include="iron-flex iron-flex-alignment iron-positioning">
query-summary-sk {
display: inline-block;
margin-left: 1em;
query-count-sk {
display: inline-block;
.matches {
margin: 0.6em;
font-weight: bold;
#dialog {
display: none;
padding: 2em;
border: solid lightgray 1px;
#dialog.display {
display: block;
#edit {
display: inline-block;
:host {
display: block;
padding: 1em;
<div class="horizontal layout center">
<button on-tap="_editTap" class=raised>Edit</button>
<query-summary-sk id=summary selection="[[current_query]]"></query-summary-sk>
<div id="dialog">
<query-sk current_query="[[current_query]]" on-query-change=_queryChange id=query></query-sk>
<div class=matches>Matches: <query-count-sk current_query="[[current_query]]"></query-count-sk></div>
<button on-tap="_closeTap" class=action>Close</button>
is: "query2-chooser-sk",
properties: {
// The serialized form of _query.
current_query: {
type: String,
value: "",
reflectToAttribute: true,
notify: true,
paramset: {
type: Object,
value: function() { return {}; },
reflectToAttribute: false,
observer: "_paramsetChange",
_editTap: function() {
_closeTap: function() {
_paramsetChange: function() {
this.$.query.paramset = this.paramset;
_queryChange: function(e) {
this.current_query = e.detail.q;
ready: function() {
this.query = this.$.query;