Expose "headerFocused" for most column types

Will notify when user is engaging with the header filter component

Signed-off-by: Patrik Kullman <patrik.kullman@neovici.se>

Author: Patrik Kullman

cosmoz-omnitable-column-amount.html

@@ -20,7 +20,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 150px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
 					<paper-input type="number" label="[[ _('Min amount', t) ]]" title="[[ _('Minimum amount', t) ]]" on-change="_setMinValue"

cosmoz-omnitable-column-autocomplete.html

@@ -83,18 +83,20 @@
 			},
 
 			_applyMultiFilter(filter, item) {
-				var	filterArray = filter.map(element => {
-						var val = element;
-						if (this.valueProperty) {
-							val = element[this.valueProperty];
-						}
-						return val.toString().toLowerCase();
-					}),
-					value = this.get(this.valuePath, item);
+				const filterArray = filter.map(element => {
+					let val = element;
+					if (this.valueProperty) {
+						val = element[this.valueProperty];
+					}
+					return val.toString().toLowerCase();
+				});
+
+				let value = this.get(this.valuePath, item);
 				if (this.valueProperty) {
 					value = value[this.valueProperty];
 				}
 				value = value.toString().toLowerCase();
+		
 				return filterArray.indexOf(value) !== -1;
 			},
 

cosmoz-omnitable-column-behavior.html

@@ -47,6 +47,16 @@
 				notify: true
 			},
 
+			/**
+			 * Indicates whether the user has engaged with the
+			 * header/filter component of the column
+			 */
+			headerFocused: {
+				type: Boolean,
+				value: false,
+				notify: true
+			},
+
 			/**
 			 * Indicate that the column is loading/performing work
 			 */

cosmoz-omnitable-column-boolean.html

@@ -21,7 +21,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<paper-listbox class="dropdown-content" slot="dropdown-content" attr-for-selected="value" selected="{{ _textFilter }}">
 					<paper-item value=""></paper-item>
 					<paper-item value="true">[[ trueLabel ]]</paper-item>

cosmoz-omnitable-column-date.html

@@ -21,7 +21,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
 					<paper-input type="date" min="[[ _formatISODate(_fromMin) ]]" max="[[ _formatISODate(_fromMax) ]]"

cosmoz-omnitable-column-datetime.html

@@ -23,7 +23,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
 					<datetime-local min="[[ _formatISODate(_fromMin) ]]" max="[[ _formatISODate(_fromMax) ]]"

cosmoz-omnitable-column-number.html

@@ -16,7 +16,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
 					<paper-input type="number" label="[[ _('From', t) ]]" value="{{ _filterInput.min }}"

cosmoz-omnitable-column-time.html

@@ -19,7 +19,8 @@
 		</template>
 
 		<template class="header">
-			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]" horizontal-align="[[ preferredDropdownHorizontalAlign ]]">
+			<paper-dropdown-menu label="[[ title ]]" placeholder="[[ _filterText ]]" title="[[ _tooltip ]]"
+					horizontal-align="[[ preferredDropdownHorizontalAlign ]]" opened="{{ headerFocused }}">
 				<div class="dropdown-content" slot="dropdown-content" style="padding: 15px; min-width: 100px;">
 					<h3 style="margin: 0;">[[ title ]]</h3>
 					<paper-input

cosmoz-omnitable-column.html

@@ -8,11 +8,12 @@
 		</template>
 
 		<template class="edit-cell">
-			<paper-input no-label-float type="text" on-change="_valueChanged" value="[[ getString(item, valuePath) ]]"></paper-input>
+			<paper-input no-label-float type="text" on-change="_valueChanged" value="[[ getString(item, valuePath) ]]">
+			</paper-input>
 		</template>
 
 		<template class="header">
-			<paper-input label="[[ title ]]" value="{{ filter }}"></paper-input>
+			<paper-input label="[[ title ]]" value="{{ filter }}" focused="{{ headerFocused }}"></paper-input>
 		</template>
 
 	</template>