@ui5/webcomponents 0.0.0-4180fe799 → 0.0.0-4738ea0dc

package/src/TextAreaPopover.hbs

@@ -2,13 +2,12 @@
 	<ui5-popover
 		skip-registry-update
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		_disable-initial-focus
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
 			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
@@ -23,6 +22,6 @@
 			{{this}}
 		{{/each}}
 	{{else}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{/if}}
 {{/inline}}

package/src/TimePicker.hbs

@@ -20,16 +20,16 @@
 	{{/if}}
 
 	{{#unless readonly}}
-		<ui5-icon
-			slot="icon"
-			name="{{openIconName}}"
-			tabindex="-1"
-			show-tooltip
-			@click="{{togglePicker}}"
-			input-icon
-			?pressed="{{_isPickerOpen}}"
-			class="ui5-time-picker-input-icon-button"
-		></ui5-icon>
+		<div slot="icon" @click="{{togglePicker}}">
+			<ui5-icon
+				name="{{openIconName}}"
+				tabindex="-1"
+				show-tooltip
+				input-icon
+				?pressed="{{_isPickerOpen}}"
+				class="ui5-time-picker-input-icon-button"
+			></ui5-icon>
+		</div>
 	{{/unless}}
 	</ui5-input>
 </div>

package/src/TimePicker.ts

@@ -0,0 +1,155 @@
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import TimePickerBase from "./TimePickerBase.js";
+
+import {
+	TIMEPICKER_INPUT_DESCRIPTION,
+} from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-time-picker</code> component provides an input field with assigned sliders which are opened on user action.
+ * The <code>ui5-time-picker</code> allows users to select a localized time using touch,
+ * mouse, or keyboard input. It consists of two parts: the time input field and the
+ * sliders.
+ *
+ * <h3>Usage</h3>
+ * The user can enter a time by:
+ * <ul>
+ * <li>Using the sliders that are displayed in a popup</li>
+ * <li>Typing it in directly in the input field</li>
+ * </ul>
+ * <br><br>
+ * When the user makes an entry and chooses the enter key, the sliders shows the corresponding time.
+ * When the user directly triggers the sliders display, the actual time is displayed.
+ * For the <code>ui5-time-picker</code>
+ *
+ * <h3>Formatting</h3>
+ *
+ * If a time is entered by typing it into
+ * the input field, it must fit to the used time format.
+ * <br><br>
+ * Supported format options are pattern-based on Unicode LDML Date Format notation.
+ * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
+ * <br><br>
+ * For example, if the <code>format-pattern</code> is "HH:mm:ss",
+ * a valid value string is "11:42:35" and the same is displayed in the input.
+ *
+ * <h3>Keyboard handling</h3>
+ * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
+ * <br>
+ * When closed:
+ * <ul>
+ * <li>[PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.</li>
+ * <li>[PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.</li>
+ * <li>[SHIFT]+[PAGEUP] Increments minutes by 1.</li>
+ * <li>[SHIFT]+ [PAGEDOWN] Decrements minutes by 1.</li>
+ * <li>[SHIFT]+[CTRL]+[PAGEUP] Increments seconds by 1.</li>
+ * <li>[SHIFT]+[CTRL]+ [PAGEDOWN] Decrements seconds by 1.</li>
+ * </ul>
+ * When opened:
+ * <ul>
+ * <li>[UP] If focus is on one of the selection lists: Select the value which is above the current value. If the first value is selected, select the last value in the list. Exception: AM/ PM List: stay on the first item.</li>
+ * <li>[DOWN] If focus is on one of the selection lists: Select the value which is below the current value. If the last value is selected, select the first value in the list. Exception: AM/ PM List: stay on the last item.</li>
+ * <li>[LEFT] If focus is on one of the selection lists: Move focus to the selection list which is left of the current selection list. If focus is at the first selection list, move focus to the last selection list.</li>
+ * <li>[RIGHT] If focus is on one of the selection lists: Move focus to the selection list which is right of the current selection list. When focus is at the last selection list, move focus to the first selection list.</li>
+ * <li>[PAGEUP] If focus is on one of the selection lists: Move focus to the first entry of this list.</li>
+ * <li>[PAGEDOWN] If focus is on one of the selection lists: Move focus to the last entry of this list.</li>
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/TimePicker.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TimePicker
+ * @extends sap.ui.webc.main.TimePickerBase
+ * @tagname ui5-time-picker
+ * @public
+ * @since 1.0.0-rc.6
+ */
+@customElement("ui5-time-picker")
+class TimePicker extends TimePickerBase {
+	/**
+	 * Defines a short hint, intended to aid the user with data entry when the
+	 * component has no value.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
+	 * Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.TimePicker.prototype.placeholder
+	 * @defaultvalue undefined
+	 * @public
+	 */
+	@property({ defaultValue: undefined })
+	placeholder?: string;
+
+	/**
+	 * Determines the format, displayed in the input field.
+	 *
+	 * Example:
+	 * HH:mm:ss -> 11:42:35
+	 * hh:mm:ss a -> 2:23:15 PM
+	 * mm:ss -> 12:04 (only minutes and seconds)
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.TimePicker.prototype.formatPattern
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	formatPattern!: string;
+
+	get _formatPattern() {
+		const hasHours = !!this.formatPattern.match(/H/i);
+		const fallback = !this.formatPattern || !hasHours;
+
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		return fallback ? localeData.getTimePattern("medium") : this.formatPattern;
+	}
+
+	get _displayFormat() {
+		// @ts-ignore oFormatOptions is a private API of DateFormat
+		return this.getFormat().oFormatOptions.pattern as string;
+	}
+
+	get _placeholder() {
+		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+	}
+
+	/**
+	 * Currently selected time represented as JavaScript Date instance
+	 *
+	 * @readonly
+	 * @type {Date}
+	 * @public
+	 * @name sap.ui.webc.main.TimePicker.prototype.dateValue
+	 */
+	get dateValue() {
+		return this.getFormat().parse(this._effectiveValue as string, undefined as unknown as boolean, undefined as unknown as boolean);
+	}
+
+	get accInfo() {
+		return {
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": "dialog",
+			"ariaAutoComplete": "none",
+			"ariaControls": `${this._id}-responsive-popover`,
+		};
+	}
+
+	get dateAriaDescription() {
+		return TimePicker.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+	}
+}
+
+TimePicker.define();
+
+export default TimePicker;

package/src/TimePickerBase.ts

@@ -0,0 +1,472 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
+import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
+import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
+import {
+	isShow,
+	isPageUp,
+	isPageDown,
+	isPageUpShift,
+	isPageDownShift,
+	isPageUpShiftCtrl,
+	isPageDownShiftCtrl,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import "@ui5/webcomponents-icons/dist/time-entry-request.js";
+import Icon from "./Icon.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js";
+import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js";
+import Input from "./Input.js";
+import Button from "./Button.js";
+import TimeSelection from "./TimeSelection.js";
+import type { TimeSelectionChangeEventDetail } from "./TimeSelection.js";
+
+import {
+	TIMEPICKER_SUBMIT_BUTTON,
+	TIMEPICKER_CANCEL_BUTTON,
+} from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import TimePickerCss from "./generated/themes/TimePicker.css.js";
+import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+
+/**
+ * @class
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.TimePickerBase
+ * @extends sap.ui.webc.base.UI5Element
+ * @public
+ * @since 1.0.0-rc.6
+ */
+@customElement({
+	languageAware: true,
+	renderer: litRender,
+	template: TimePickerTemplate,
+	styles: TimePickerCss,
+	staticAreaTemplate: TimePickerPopoverTemplate,
+	staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss],
+	dependencies: [
+		Icon,
+		ResponsivePopover,
+		TimeSelection,
+		Input,
+		Button,
+	],
+})
+/**
+ * Fired when the input operation has finished by clicking the "OK" button or
+ * when the text in the input field has changed and the focus leaves the input field.
+*
+* @event sap.ui.webc.main.TimePickerBase#change
+ * @public
+ */
+@event("change")
+
+/**
+ * Fired when the value of the <code>ui5-time-picker</code> is changed at each key stroke.
+ *
+ * @event sap.ui.webc.main.TimePickerBase#input
+ * @public
+ */
+@event("input")
+class TimePickerBase extends UI5Element {
+	/**
+	 * Defines a formatted time value.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.TimePickerBase.prototype.value
+	 * @defaultvalue undefined
+	 * @formEvents change input
+	 * @formProperty
+	 * @public
+	 */
+	@property({ defaultValue: undefined })
+	value?: string;
+
+	/**
+	 * Defines the value state of the <code>ui5-time-picker</code>.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>None</code></li>
+	 * <li><code>Error</code></li>
+	 * <li><code>Warning</code></li>
+	 * <li><code>Success</code></li>
+	 * <li><code>Information</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.base.types.ValueState}
+	 * @name sap.ui.webc.main.TimePickerBase.prototype.valueState
+	 * @defaultvalue "None"
+	 * @public
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	valueState!: ValueState;
+
+	/**
+	 * Determines whether the <code>ui5-time-picker</code> is displayed as disabled.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.TimePickerBase.prototype.disabled
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Determines whether the <code>ui5-time-picker</code> is displayed as readonly.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.TimePickerBase.prototype.readonly
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	readonly!: boolean;
+
+	@property({ type: Boolean, noAttribute: true })
+	_isPickerOpen!: boolean;
+
+	/**
+	 * Defines the value state message that will be displayed as pop up under the <code>ui5-time-picker</code>.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
+	 * <br>
+	 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
+	 * when the <code>ui5-time-picker</code> is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+	 * @type {HTMLElement}
+	 * @name sap.ui.webc.main.TimePickerBase.prototype.valueStateMessage
+	 * @since 1.0.0-rc.8
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	valueStateMessage!: Array<HTMLElement>;
+
+	tempValue?: string;
+
+	static i18nBundle: I18nBundle;
+
+	static async onDefine() {
+		[TimePickerBase.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+		]);
+	}
+
+	constructor() {
+		super();
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 */
+	get _placeholder(): string | undefined {
+		return undefined;
+	}
+
+	/**
+	 * @abstract
+	 * @protected
+	 */
+	get _formatPattern(): string | undefined {
+		return undefined;
+	}
+
+	get _effectiveValue() {
+		return this.value;
+	}
+
+	get _timeSelectionValue() {
+		return this.tempValue;
+	}
+
+	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
+		this.tempValue = e.detail.value; // every time the user changes the sliders -> update tempValue
+	}
+
+	submitPickers() {
+		this._updateValueAndFireEvents(this.tempValue, true, ["change", "value-changed"]);
+		this.closePicker();
+	}
+
+	onResponsivePopoverAfterClose() {
+		this._isPickerOpen = false;
+	}
+
+	async _handleInputClick() {
+		if (this._isPickerOpen) {
+			return;
+		}
+
+		const inputField = await this._getInputField();
+
+		if (inputField) {
+			(inputField as HTMLInputElement).select();
+		}
+	}
+
+	_updateValueAndFireEvents(value: string | undefined, normalizeValue: boolean, eventsNames: Array<string>) {
+		if (value === this.value) {
+			return;
+		}
+
+		const valid = this.isValid(value);
+		if (value !== undefined && valid && normalizeValue) { // if value === undefined, valid is guaranteed to be falsy
+			value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+		}
+
+		if (!eventsNames.includes("input")) {
+			this.value = ""; // Do not remove! DurationPicker use case -> value is 05:10, user tries 05:12, after normalization value is changed back to 05:10 so no invalidation happens, but the input still shows 05:12. Thus we enforce invalidation with the ""
+			this.value = value;
+		}
+		this.tempValue = value; // if the picker is open, sync it
+		this._updateValueState(); // Change the value state to Error/None, but only if needed
+		eventsNames.forEach(eventName => {
+			this.fireEvent(eventName, { value, valid });
+		});
+	}
+
+	_updateValueState() {
+		const isValid = this.isValid(this.value);
+		if (!isValid) { // If not valid - always set Error regardless of the current value state
+			this.valueState = ValueState.Error;
+		} else if (isValid && this.valueState === ValueState.Error) { // However if valid, change only Error (but not the others) to None
+			this.valueState = ValueState.None;
+		}
+	}
+
+	_handleInputChange(e: CustomEvent) {
+		const target = e.target as Input;
+		this._updateValueAndFireEvents(target.value, true, ["change", "value-changed"]);
+	}
+
+	_handleInputLiveChange(e: CustomEvent) {
+		const target = e.target as Input;
+		this._updateValueAndFireEvents(target.value, false, ["input"]);
+	}
+
+	/**
+	 * Closes the picker
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TimePickerBase#closePicker
+	 */
+	async closePicker() {
+		const responsivePopover = await this._getPopover();
+		responsivePopover.close();
+		this._isPickerOpen = false;
+	}
+
+	/**
+	 * Opens the picker.
+	 * @async
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TimePickerBase#openPicker
+	 * @returns {Promise} Resolves when the picker is open
+	 */
+	async openPicker() {
+		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
+		const responsivePopover = await this._getPopover();
+		responsivePopover.showAt(this);
+		this._isPickerOpen = true;
+	}
+
+	togglePicker() {
+		if (this.isOpen()) {
+			this.closePicker();
+		} else if (this._canOpenPicker()) {
+			this.openPicker();
+		}
+	}
+
+	/**
+	 * Checks if the picker is open
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TimePickerBase#isOpen
+	 * @returns {boolean}
+	 */
+	isOpen() {
+		return !!this._isPickerOpen;
+	}
+
+	_canOpenPicker() {
+		return !this.disabled && !this.readonly;
+	}
+
+	async _getPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+	}
+
+	_getInput(): Input {
+		return this.shadowRoot!.querySelector<Input>("[ui5-input]")!;
+	}
+
+	_getInputField() {
+		const input = this._getInput();
+		return input && input.getInputDOMRef();
+	}
+
+	_onkeydown(e: KeyboardEvent) {
+		if (isShow(e)) {
+			e.preventDefault();
+			this.togglePicker();
+		}
+
+		const target = e.target as Node;
+		if ((this._getInput().isEqualNode(target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+			this.closePicker();
+		}
+
+		if (this.isOpen()) {
+			return;
+		}
+
+		if (isPageUpShiftCtrl(e)) {
+			e.preventDefault();
+			this._modifyValueBy(1, "second");
+		} else if (isPageUpShift(e)) {
+			e.preventDefault();
+			this._modifyValueBy(1, "minute");
+		} else if (isPageUp(e)) {
+			e.preventDefault();
+			this._modifyValueBy(1, "hour");
+		} else if (isPageDownShiftCtrl(e)) {
+			e.preventDefault();
+			this._modifyValueBy(-1, "second");
+		} else if (isPageDownShift(e)) {
+			e.preventDefault();
+			this._modifyValueBy(-1, "minute");
+		} else if (isPageDown(e)) {
+			e.preventDefault();
+			this._modifyValueBy(-1, "hour");
+		}
+	}
+
+	get _isPattern() {
+		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
+	}
+
+	getFormat() {
+		let dateFormat;
+		if (this._isPattern) {
+			dateFormat = DateFormat.getDateInstance({
+				pattern: this._formatPattern,
+			});
+		} else {
+			dateFormat = DateFormat.getDateInstance({
+				style: this._formatPattern,
+			});
+		}
+
+		return dateFormat;
+	}
+
+	/**
+	 * Formats a Java Script date object into a string representing a locale date and time
+	 * according to the <code>formatPattern</code> property of the TimePicker instance
+	 * @param {object} date A Java Script date object to be formatted as string
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TimePickerBase#formatValue
+	 * @returns {string}
+	 */
+	formatValue(date: Date) {
+		return this.getFormat().format(date);
+	}
+
+	/**
+	 * Checks if a value is valid against the current <code>formatPattern</code> value.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> an empty string is considered as valid value.
+	 * @param {string} value The value to be tested against the current date format
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.TimePickerBase#isValid
+	 * @returns {boolean}
+	 */
+	isValid(value: string | undefined) {
+		if (value === "") {
+			return true;
+		}
+
+		return !!this.getFormat().parse(value as string, undefined as unknown as boolean, undefined as unknown as boolean);
+	}
+
+	normalizeValue(value: string) {
+		if (value === "") {
+			return value;
+		}
+
+		return this.getFormat().format(this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean));
+	}
+
+	_modifyValueBy(amount: number, unit: string) {
+		const date = this.getFormat().parse(this._effectiveValue as string, undefined as unknown as boolean, undefined as unknown as boolean) as Date;
+		if (!date) {
+			return;
+		}
+
+		if (unit === "hour") {
+			date.setHours(date.getHours() + amount);
+		} else if (unit === "minute") {
+			date.setMinutes(date.getMinutes() + amount);
+		} else if (unit === "second") {
+			date.setSeconds(date.getSeconds() + amount);
+		}
+
+		const newValue = this.formatValue(date);
+		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+	}
+
+	/**
+	 *
+	 * @param {event} e Wheel Event
+	 * @private
+	 *
+	 * The listener for this event can't be passive as it calls preventDefault()
+	 */
+	_handleWheel(e: WheelEvent) {
+		e.preventDefault();
+	}
+
+	get submitButtonLabel() {
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+	}
+
+	get cancelButtonLabel() {
+		return TimePickerBase.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+	}
+
+	/**
+	 * @protected
+	 */
+	get openIconName() {
+		return "time-entry-request";
+	}
+}
+
+export default TimePickerBase;

package/src/TimePickerPopover.hbs

@@ -6,7 +6,6 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	stay-open-on-scroll
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"