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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user