@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
886 lines (885 loc) • 30.2 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { h } from "@stencil/core";
import { isActivationKey, numberKeys } from "../../utils/key";
import { isValidNumber } from "../../utils/number";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
import { formatTimePart, getLocaleHourCycle, getMeridiem, getTimeParts, isValidTime, localizeTimePart, localizeTimeStringToParts, maxTenthForMinuteAndSecond, parseTimeString } from "../../utils/time";
import { CSS } from "./resources";
import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
export class TimePicker {
constructor() {
this.decrementHour = () => {
const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
this.setValuePart("hour", newHour);
};
this.decrementMeridiem = () => {
const newMeridiem = this.meridiem === "PM" ? "AM" : "PM";
this.setValuePart("meridiem", newMeridiem);
};
this.decrementMinuteOrSecond = (key) => {
let newValue;
if (isValidNumber(this[key])) {
const valueAsNumber = parseInt(this[key]);
newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
}
else {
newValue = 59;
}
this.setValuePart(key, newValue);
};
this.decrementMinute = () => {
this.decrementMinuteOrSecond("minute");
};
this.decrementSecond = () => {
this.decrementMinuteOrSecond("second");
};
this.focusHandler = (event) => {
this.activeEl = event.currentTarget;
};
this.hourDownButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.decrementHour();
}
};
this.hourKeyDownHandler = (event) => {
const { key } = event;
if (numberKeys.includes(key)) {
const keyAsNumber = parseInt(key);
let newHour;
if (isValidNumber(this.hour)) {
switch (this.hourCycle) {
case "12":
newHour =
this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
? `1${keyAsNumber}`
: keyAsNumber;
break;
case "24":
if (this.hour === "01") {
newHour = `1${keyAsNumber}`;
}
else if (this.hour === "02" && keyAsNumber >= 0 && keyAsNumber <= 3) {
newHour = `2${keyAsNumber}`;
}
else {
newHour = keyAsNumber;
}
break;
}
}
else {
newHour = keyAsNumber;
}
this.setValuePart("hour", newHour);
}
else {
switch (key) {
case "Backspace":
case "Delete":
this.setValuePart("hour", null);
break;
case "ArrowDown":
event.preventDefault();
this.decrementHour();
break;
case "ArrowUp":
event.preventDefault();
this.incrementHour();
break;
case " ":
event.preventDefault();
break;
}
}
};
this.hourUpButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.incrementHour();
}
};
this.incrementMeridiem = () => {
const newMeridiem = this.meridiem === "AM" ? "PM" : "AM";
this.setValuePart("meridiem", newMeridiem);
};
this.incrementHour = () => {
const newHour = isValidNumber(this.hour)
? this.hour === "23"
? 0
: parseInt(this.hour) + 1
: 1;
this.setValuePart("hour", newHour);
};
this.incrementMinuteOrSecond = (key) => {
const newValue = isValidNumber(this[key])
? this[key] === "59"
? 0
: parseInt(this[key]) + 1
: 0;
this.setValuePart(key, newValue);
};
this.incrementMinute = () => {
this.incrementMinuteOrSecond("minute");
};
this.incrementSecond = () => {
this.incrementMinuteOrSecond("second");
};
this.meridiemDownButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.decrementMeridiem();
}
};
this.meridiemKeyDownHandler = (event) => {
switch (event.key) {
case "a":
this.setValuePart("meridiem", "AM");
break;
case "p":
this.setValuePart("meridiem", "PM");
break;
case "Backspace":
case "Delete":
this.setValuePart("meridiem", null);
break;
case "ArrowUp":
event.preventDefault();
this.incrementMeridiem();
break;
case "ArrowDown":
event.preventDefault();
this.decrementMeridiem();
break;
case " ":
event.preventDefault();
break;
}
};
this.meridiemUpButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.incrementMeridiem();
}
};
this.minuteDownButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.decrementMinute();
}
};
this.minuteKeyDownHandler = (event) => {
const { key } = event;
if (numberKeys.includes(key)) {
const keyAsNumber = parseInt(key);
let newMinute;
if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
const minuteAsNumber = parseInt(this.minute);
newMinute =
minuteAsNumber > maxTenthForMinuteAndSecond
? keyAsNumber
: `${minuteAsNumber}${keyAsNumber}`;
}
else {
newMinute = keyAsNumber;
}
this.setValuePart("minute", newMinute);
}
else {
switch (key) {
case "Backspace":
case "Delete":
this.setValuePart("minute", null);
break;
case "ArrowDown":
event.preventDefault();
this.decrementMinute();
break;
case "ArrowUp":
event.preventDefault();
this.incrementMinute();
break;
case " ":
event.preventDefault();
break;
}
}
};
this.minuteUpButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.incrementMinute();
}
};
this.secondDownButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.decrementSecond();
}
};
this.secondKeyDownHandler = (event) => {
const { key } = event;
if (numberKeys.includes(key)) {
const keyAsNumber = parseInt(key);
let newSecond;
if (isValidNumber(this.second) && this.second.startsWith("0")) {
const secondAsNumber = parseInt(this.second);
newSecond =
secondAsNumber > maxTenthForMinuteAndSecond
? keyAsNumber
: `${secondAsNumber}${keyAsNumber}`;
}
else {
newSecond = keyAsNumber;
}
this.setValuePart("second", newSecond);
}
else {
switch (key) {
case "Backspace":
case "Delete":
this.setValuePart("second", null);
break;
case "ArrowDown":
event.preventDefault();
this.decrementSecond();
break;
case "ArrowUp":
event.preventDefault();
this.incrementSecond();
break;
case " ":
event.preventDefault();
break;
}
}
};
this.secondUpButtonKeyDownHandler = (event) => {
if (this.buttonActivated(event)) {
this.incrementSecond();
}
};
this.setHourEl = (el) => (this.hourEl = el);
this.setMeridiemEl = (el) => (this.meridiemEl = el);
this.setMinuteEl = (el) => (this.minuteEl = el);
this.setSecondEl = (el) => (this.secondEl = el);
this.setValue = (value, emit = true) => {
if (isValidTime(value)) {
const { hour, minute, second } = parseTimeString(value);
const { effectiveLocale: locale, numberingSystem } = this;
const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({ value, locale, numberingSystem });
this.localizedHour = localizedHour;
this.localizedHourSuffix = localizedHourSuffix;
this.localizedMinute = localizedMinute;
this.localizedMinuteSuffix = localizedMinuteSuffix;
this.localizedSecond = localizedSecond;
this.localizedSecondSuffix = localizedSecondSuffix;
this.hour = hour;
this.minute = minute;
this.second = second;
if (localizedMeridiem) {
this.localizedMeridiem = localizedMeridiem;
this.meridiem = getMeridiem(this.hour);
const formatParts = getTimeParts({ value, locale, numberingSystem });
this.meridiemOrder = this.getMeridiemOrder(formatParts);
}
}
else {
this.hour = null;
this.localizedHour = null;
this.localizedHourSuffix = null;
this.localizedMeridiem = null;
this.localizedMinute = null;
this.localizedMinuteSuffix = null;
this.localizedSecond = null;
this.localizedSecondSuffix = null;
this.meridiem = null;
this.minute = null;
this.second = null;
this.value = null;
}
if (emit) {
this.calciteInternalTimePickerChange.emit();
}
};
this.setValuePart = (key, value, emit = true) => {
const { effectiveLocale: locale, numberingSystem } = this;
if (key === "meridiem") {
this.meridiem = value;
if (isValidNumber(this.hour)) {
const hourAsNumber = parseInt(this.hour);
switch (value) {
case "AM":
if (hourAsNumber >= 12) {
this.hour = formatTimePart(hourAsNumber - 12);
}
break;
case "PM":
if (hourAsNumber < 12) {
this.hour = formatTimePart(hourAsNumber + 12);
}
break;
}
this.localizedHour = localizeTimePart({
value: this.hour,
part: "hour",
locale,
numberingSystem
});
}
}
else {
this[key] = typeof value === "number" ? formatTimePart(value) : value;
this[`localized${capitalize(key)}`] = localizeTimePart({
value: this[key],
part: key,
locale,
numberingSystem
});
}
if (this.hour && this.minute) {
let newValue = `${this.hour}:${this.minute}`;
if (this.showSecond) {
newValue = `${newValue}:${this.second ?? "00"}`;
}
this.value = newValue;
}
else {
this.value = null;
}
this.localizedMeridiem = this.value
? localizeTimeStringToParts({ value: this.value, locale, numberingSystem })
?.localizedMeridiem || null
: localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
if (emit) {
this.calciteInternalTimePickerChange.emit();
}
};
this.scale = "m";
this.step = 60;
this.numberingSystem = undefined;
this.value = null;
this.messages = undefined;
this.messageOverrides = undefined;
this.effectiveLocale = "";
this.hour = undefined;
this.hourCycle = undefined;
this.localizedHour = undefined;
this.localizedHourSuffix = undefined;
this.localizedMeridiem = undefined;
this.localizedMinute = undefined;
this.localizedMinuteSuffix = undefined;
this.localizedSecond = undefined;
this.localizedSecondSuffix = undefined;
this.meridiem = undefined;
this.minute = undefined;
this.second = undefined;
this.showSecond = undefined;
this.defaultMessages = undefined;
}
stepChange() {
this.updateShowSecond();
}
valueWatcher(newValue) {
this.setValue(newValue, false);
}
onMessagesChange() {
/* wired up by t9n util */
}
effectiveLocaleWatcher() {
this.updateLocale();
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
hostBlurHandler() {
this.calciteInternalTimePickerBlur.emit();
}
hostFocusHandler() {
this.calciteInternalTimePickerFocus.emit();
}
keyDownHandler(event) {
const { defaultPrevented, key } = event;
if (defaultPrevented) {
return;
}
switch (this.activeEl) {
case this.hourEl:
if (key === "ArrowRight") {
this.focusPart("minute");
event.preventDefault();
}
break;
case this.minuteEl:
switch (key) {
case "ArrowLeft":
this.focusPart("hour");
event.preventDefault();
break;
case "ArrowRight":
if (this.step !== 60) {
this.focusPart("second");
event.preventDefault();
}
else if (this.hourCycle === "12") {
this.focusPart("meridiem");
event.preventDefault();
}
break;
}
break;
case this.secondEl:
switch (key) {
case "ArrowLeft":
this.focusPart("minute");
event.preventDefault();
break;
case "ArrowRight":
if (this.hourCycle === "12") {
this.focusPart("meridiem");
event.preventDefault();
}
break;
}
break;
case this.meridiemEl:
switch (key) {
case "ArrowLeft":
if (this.step !== 60) {
this.focusPart("second");
event.preventDefault();
}
else {
this.focusPart("minute");
event.preventDefault();
}
break;
}
break;
}
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/**
* Sets focus on the component's first focusable element.
*/
async setFocus() {
await componentLoaded(this);
this.el?.focus();
}
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
updateShowSecond() {
this.showSecond = this.step < 60;
}
async focusPart(target) {
await componentLoaded(this);
this[`${target || "hour"}El`]?.focus();
}
buttonActivated(event) {
const { key } = event;
if (key === " ") {
event.preventDefault();
}
return isActivationKey(key);
}
getMeridiemOrder(formatParts) {
const locale = this.effectiveLocale;
const isRTLKind = locale === "ar" || locale === "he";
if (formatParts && !isRTLKind) {
const index = formatParts.findIndex((parts) => {
return parts.value === this.localizedMeridiem;
});
return index;
}
return 0;
}
updateLocale() {
updateMessages(this, this.effectiveLocale);
this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
this.setValue(this.value, false);
}
// --------------------------------------------------------------------------
//
// Lifecycle
//
// --------------------------------------------------------------------------
connectedCallback() {
connectLocalized(this);
this.updateLocale();
connectMessages(this);
this.updateShowSecond();
this.meridiemOrder = this.getMeridiemOrder(getTimeParts({
value: "0:00:00",
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem
}));
}
async componentWillLoad() {
setUpLoadableComponent(this);
await setUpMessages(this);
}
componentDidLoad() {
setComponentLoaded(this);
}
disconnectedCallback() {
disconnectLocalized(this);
disconnectMessages(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const hourIsNumber = isValidNumber(this.hour);
const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
const minuteIsNumber = isValidNumber(this.minute);
const secondIsNumber = isValidNumber(this.second);
const showMeridiem = this.hourCycle === "12";
return (h("div", { class: {
[CSS.timePicker]: true,
[CSS.showMeridiem]: showMeridiem,
[CSS.showSecond]: this.showSecond,
[CSS[`scale-${this.scale}`]]: true
}, dir: "ltr" }, h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.hourUp, class: {
[CSS.button]: true,
[CSS.buttonHourUp]: true,
[CSS.buttonTopLeft]: true
}, onClick: this.incrementHour, onKeyDown: this.hourUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
[CSS.input]: true,
[CSS.hour]: true
}, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
[CSS.button]: true,
[CSS.buttonHourDown]: true,
[CSS.buttonBottomLeft]: true
}, onClick: this.decrementHour, onKeyDown: this.hourDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), h("span", { class: CSS.delimiter }, this.localizedHourSuffix), h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.minuteUp, class: {
[CSS.button]: true,
[CSS.buttonMinuteUp]: true
}, onClick: this.incrementMinute, onKeyDown: this.minuteUpButtonKeyDownHandler, role: "button", tabIndex: -1 }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
[CSS.input]: true,
[CSS.minute]: true
}, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
[CSS.button]: true,
[CSS.buttonMinuteDown]: true
}, onClick: this.decrementMinute, onKeyDown: this.minuteDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.secondUp, class: {
[CSS.button]: true,
[CSS.buttonSecondUp]: true
}, onClick: this.incrementSecond, onKeyDown: this.secondUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
[CSS.input]: true,
[CSS.second]: true
}, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
[CSS.button]: true,
[CSS.buttonSecondDown]: true
}, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { class: {
[CSS.column]: true,
[CSS.meridiemStart]: this.meridiemOrder === 0
}, role: "group" }, h("span", { "aria-label": this.messages.meridiemUp, class: {
[CSS.button]: true,
[CSS.buttonMeridiemUp]: true,
[CSS.buttonTopRight]: true
}, onClick: this.incrementMeridiem, onKeyDown: this.meridiemUpButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
[CSS.input]: true,
[CSS.meridiem]: true
}, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
[CSS.button]: true,
[CSS.buttonMeridiemDown]: true,
[CSS.buttonBottomRight]: true
}, onClick: this.decrementMeridiem, onKeyDown: this.meridiemDownButtonKeyDownHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
}
static get is() { return "calcite-time-picker"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["time-picker.scss"]
};
}
static get styleUrls() {
return {
"$": ["time-picker.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"scale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component."
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
},
"step": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the granularity the `value` must adhere to (in seconds)."
},
"attribute": "step",
"reflect": true,
"defaultValue": "60"
},
"numberingSystem": {
"type": "string",
"mutable": false,
"complexType": {
"original": "NumberingSystem",
"resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
"references": {
"NumberingSystem": {
"location": "import",
"path": "../../utils/locale"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the Unicode numeral system used by the component for localization."
},
"attribute": "numbering-system",
"reflect": false
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component's value in UTC (always 24-hour format)."
},
"attribute": "value",
"reflect": false,
"defaultValue": "null"
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "TimePickerMessages",
"resolved": "{ hour: string; hourDown: string; hourUp: string; meridiem: string; meridiemDown: string; meridiemUp: string; minute: string; minuteDown: string; minuteUp: string; second: string; secondDown: string; secondUp: string; }",
"references": {
"TimePickerMessages": {
"location": "import",
"path": "./assets/time-picker/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<TimePickerMessages>",
"resolved": "{ hour?: string; hourDown?: string; hourUp?: string; meridiem?: string; meridiemDown?: string; meridiemUp?: string; minute?: string; minuteDown?: string; minuteUp?: string; second?: string; secondDown?: string; secondUp?: string; }",
"references": {
"Partial": {
"location": "global"
},
"TimePickerMessages": {
"location": "import",
"path": "./assets/time-picker/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
}
};
}
static get states() {
return {
"effectiveLocale": {},
"hour": {},
"hourCycle": {},
"localizedHour": {},
"localizedHourSuffix": {},
"localizedMeridiem": {},
"localizedMinute": {},
"localizedMinuteSuffix": {},
"localizedSecond": {},
"localizedSecondSuffix": {},
"meridiem": {},
"minute": {},
"second": {},
"showSecond": {},
"defaultMessages": {}
};
}
static get events() {
return [{
"method": "calciteInternalTimePickerBlur",
"name": "calciteInternalTimePickerBlur",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "calciteInternalTimePickerChange",
"name": "calciteInternalTimePickerChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "calciteInternalTimePickerFocus",
"name": "calciteInternalTimePickerFocus",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"setFocus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the component's first focusable element.",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "step",
"methodName": "stepChange"
}, {
"propName": "value",
"methodName": "valueWatcher"
}, {
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleWatcher"
}];
}
static get listeners() {
return [{
"name": "blur",
"method": "hostBlurHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "focus",
"method": "hostFocusHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "keyDownHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}