Convert gr-account-entry to typescript

The change converts the following files to typescript:

* elements/shared/gr-account-entry/gr-account-entry.ts

Change-Id: Iff07cdbbcbe10c68bd0cb530dc65ff0dd696bfe4
This commit is contained in:
Milutin Kristofic
2020-08-20 22:43:39 +02:00
parent f85b638300
commit 4e23f3c24f

View File

@@ -14,26 +14,33 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import '../../../styles/shared-styles.js';
import '../gr-autocomplete/gr-autocomplete.js';
import '../gr-rest-api-interface/gr-rest-api-interface.js';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin.js';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {htmlTemplate} from './gr-account-entry_html.js';
import '../../../styles/shared-styles';
import '../gr-autocomplete/gr-autocomplete';
import '../gr-rest-api-interface/gr-rest-api-interface';
import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners';
import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mixin';
import {PolymerElement} from '@polymer/polymer/polymer-element';
import {htmlTemplate} from './gr-account-entry_html';
import {customElement, property} from '@polymer/decorators';
import {GrAutocomplete} from '../gr-autocomplete/gr-autocomplete';
export interface GrAccountEntry {
$: {
input: GrAutocomplete;
};
}
/**
* gr-account-entry is an element for entering account
* and/or group with autocomplete support.
*
* @extends PolymerElement
*/
class GrAccountEntry extends GestureEventListeners(
LegacyElementMixin(
PolymerElement)) {
static get template() { return htmlTemplate; }
@customElement('gr-account-entry')
export class GrAccountEntry extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
) {
static get template() {
return htmlTemplate;
}
static get is() { return 'gr-account-entry'; }
/**
* Fired when an account is entered.
*
@@ -48,36 +55,23 @@ class GrAccountEntry extends GestureEventListeners(
* @event account-text-changed
*/
static get properties() {
return {
allowAnyInput: Boolean,
borderless: Boolean,
placeholder: String,
@property({type: Boolean})
allowAnyInput?: boolean;
// suggestFrom = 0 to enable default suggestions.
suggestFrom: {
type: Number,
value: 0,
},
@property({type: Boolean})
borderless?: boolean;
/** @type {!function(string): !Promise<Array<{name, value}>>} */
querySuggestions: {
type: Function,
notify: true,
value() {
return input => Promise.resolve([]);
},
},
@property({type: String})
placeholder?: string;
_config: Object,
/** The value of the autocomplete entry. */
_inputText: {
type: String,
observer: '_inputTextChanged',
},
@property({type: Number})
suggestFrom = 0;
};
}
@property({type: Object, notify: true})
querySuggestions = () => Promise.resolve([]);
@property({type: String, observer: '_inputTextChanged'})
_inputText?: string;
get focusStart() {
return this.$.input.focusStart;
@@ -91,7 +85,7 @@ class GrAccountEntry extends GestureEventListeners(
this.$.input.clear();
}
setText(text) {
setText(text: string) {
this.$.input.setText(text);
}
@@ -99,20 +93,28 @@ class GrAccountEntry extends GestureEventListeners(
return this.$.input.text;
}
_handleInputCommit(e) {
this.dispatchEvent(new CustomEvent('add', {
detail: {value: e.detail.value},
composed: true, bubbles: true,
}));
_handleInputCommit(e: CustomEvent) {
this.dispatchEvent(
new CustomEvent('add', {
detail: {value: e.detail.value},
composed: true,
bubbles: true,
})
);
this.$.input.focus();
}
_inputTextChanged(text) {
_inputTextChanged(text: string) {
if (text.length && this.allowAnyInput) {
this.dispatchEvent(new CustomEvent(
'account-text-changed', {bubbles: true, composed: true}));
this.dispatchEvent(
new CustomEvent('account-text-changed', {bubbles: true, composed: true})
);
}
}
}
customElements.define(GrAccountEntry.is, GrAccountEntry);
declare global {
interface HTMLElementTagNameMap {
'gr-account-entry': GrAccountEntry;
}
}