117 lines
2.8 KiB
JavaScript
117 lines
2.8 KiB
JavaScript
import "./ha-icon-button";
|
|
import "@polymer/paper-input/paper-input";
|
|
import "@polymer/paper-item/paper-item";
|
|
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
/* eslint-plugin-disable lit */
|
|
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
|
|
import { EventsMixin } from "../mixins/events-mixin";
|
|
|
|
class HaComboBox extends EventsMixin(PolymerElement) {
|
|
static get template() {
|
|
return html`
|
|
<style>
|
|
paper-input > ha-icon-button {
|
|
--mdc-icon-button-size: 24px;
|
|
padding: 2px;
|
|
color: var(--secondary-text-color);
|
|
}
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<vaadin-combo-box-light
|
|
items="[[_items]]"
|
|
item-value-path="[[itemValuePath]]"
|
|
item-label-path="[[itemLabelPath]]"
|
|
value="{{value}}"
|
|
opened="{{opened}}"
|
|
allow-custom-value="[[allowCustomValue]]"
|
|
on-change="_fireChanged"
|
|
>
|
|
<paper-input
|
|
autofocus="[[autofocus]]"
|
|
label="[[label]]"
|
|
class="input"
|
|
value="[[value]]"
|
|
>
|
|
<ha-icon-button
|
|
slot="suffix"
|
|
class="clear-button"
|
|
icon="hass:close"
|
|
hidden$="[[!value]]"
|
|
>Clear</ha-icon-button
|
|
>
|
|
<ha-icon-button
|
|
slot="suffix"
|
|
class="toggle-button"
|
|
icon="[[_computeToggleIcon(opened)]]"
|
|
hidden$="[[!items.length]]"
|
|
>Toggle</ha-icon-button
|
|
>
|
|
</paper-input>
|
|
<template>
|
|
<style>
|
|
paper-item {
|
|
margin: -5px -10px;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
<paper-item>[[_computeItemLabel(item, itemLabelPath)]]</paper-item>
|
|
</template>
|
|
</vaadin-combo-box-light>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
allowCustomValue: Boolean,
|
|
items: {
|
|
type: Object,
|
|
observer: "_itemsChanged",
|
|
},
|
|
_items: Object,
|
|
itemLabelPath: String,
|
|
itemValuePath: String,
|
|
autofocus: Boolean,
|
|
label: String,
|
|
opened: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: "_openedChanged",
|
|
},
|
|
value: {
|
|
type: String,
|
|
notify: true,
|
|
},
|
|
};
|
|
}
|
|
|
|
_openedChanged(newVal) {
|
|
if (!newVal) {
|
|
this._items = this.items;
|
|
}
|
|
}
|
|
|
|
_itemsChanged(newVal) {
|
|
if (!this.opened) {
|
|
this._items = newVal;
|
|
}
|
|
}
|
|
|
|
_computeToggleIcon(opened) {
|
|
return opened ? "hass:menu-up" : "hass:menu-down";
|
|
}
|
|
|
|
_computeItemLabel(item, itemLabelPath) {
|
|
return itemLabelPath ? item[itemLabelPath] : item;
|
|
}
|
|
|
|
_fireChanged(ev) {
|
|
ev.stopPropagation();
|
|
this.fire("change");
|
|
}
|
|
}
|
|
|
|
customElements.define("ha-combo-box", HaComboBox);
|