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