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