@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
956 lines (955 loc) • 32.1 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, Host } from "@stencil/core";
import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
import { guid } from "../../utils/guid";
import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
import { numberKeys } from "../../utils/key";
import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
import { formatTimeString, isValidTime, localizeTimeString, toISOTimeString } from "../../utils/time";
import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
import { CSS } from "./resources";
import dayjs from "dayjs/esm";
import customParseFormat from "dayjs/esm/plugin/customParseFormat";
import localeData from "dayjs/esm/plugin/localeData";
import localizedFormat from "dayjs/esm/plugin/localizedFormat";
import preParsePostFormat from "dayjs/esm/plugin/preParsePostFormat";
import updateLocale from "dayjs/esm/plugin/updateLocale";
import { getSupportedLocale } from "../../utils/locale";
// some bundlers (e.g., Webpack) need dynamic import paths to be static
const supportedDayJsLocaleToLocaleConfigImport = new Map([
["ar", () => import("dayjs/esm/locale/ar.js")],
["bg", () => import("dayjs/esm/locale/bg.js")],
["bs", () => import("dayjs/esm/locale/bs.js")],
["ca", () => import("dayjs/esm/locale/ca.js")],
["cs", () => import("dayjs/esm/locale/cs.js")],
["da", () => import("dayjs/esm/locale/da.js")],
["de", () => import("dayjs/esm/locale/de.js")],
["de-at", () => import("dayjs/esm/locale/de-at.js")],
["de-ch", () => import("dayjs/esm/locale/de-ch.js")],
["el", () => import("dayjs/esm/locale/el.js")],
["en", () => import("dayjs/esm/locale/en.js")],
["en-au", () => import("dayjs/esm/locale/en-au.js")],
["en-ca", () => import("dayjs/esm/locale/en-ca.js")],
["en-gb", () => import("dayjs/esm/locale/en-gb.js")],
["es", () => import("dayjs/esm/locale/es.js")],
["es-mx", () => import("dayjs/esm/locale/es-mx.js")],
["et", () => import("dayjs/esm/locale/et.js")],
["fi", () => import("dayjs/esm/locale/fi.js")],
["fr", () => import("dayjs/esm/locale/fr.js")],
["fr-ch", () => import("dayjs/esm/locale/fr-ch.js")],
["he", () => import("dayjs/esm/locale/he.js")],
["hi", () => import("dayjs/esm/locale/hi.js")],
["hr", () => import("dayjs/esm/locale/hr.js")],
["hu", () => import("dayjs/esm/locale/hu.js")],
["id", () => import("dayjs/esm/locale/id.js")],
["it", () => import("dayjs/esm/locale/it.js")],
["it-ch", () => import("dayjs/esm/locale/it-ch.js")],
["ja", () => import("dayjs/esm/locale/ja.js")],
["ko", () => import("dayjs/esm/locale/ko.js")],
["lt", () => import("dayjs/esm/locale/lt.js")],
["lv", () => import("dayjs/esm/locale/lv.js")],
["mk", () => import("dayjs/esm/locale/mk.js")],
["nl", () => import("dayjs/esm/locale/nl.js")],
["nb", () => import("dayjs/esm/locale/nb.js")],
["pl", () => import("dayjs/esm/locale/pl.js")],
["pt", () => import("dayjs/esm/locale/pt.js")],
["pt-br", () => import("dayjs/esm/locale/pt-br.js")],
["ro", () => import("dayjs/esm/locale/ro.js")],
["ru", () => import("dayjs/esm/locale/ru.js")],
["sk", () => import("dayjs/esm/locale/sk.js")],
["sl", () => import("dayjs/esm/locale/sl.js")],
["sr", () => import("dayjs/esm/locale/sr.js")],
["sv", () => import("dayjs/esm/locale/sv.js")],
["th", () => import("dayjs/esm/locale/th.js")],
["tr", () => import("dayjs/esm/locale/tr.js")],
["uk", () => import("dayjs/esm/locale/uk.js")],
["vi", () => import("dayjs/esm/locale/vi.js")],
["zh-cn", () => import("dayjs/esm/locale/zh-cn.js")],
["zh-hk", () => import("dayjs/esm/locale/zh-hk.js")],
["zh-tw", () => import("dayjs/esm/locale/zh-tw.js")]
]);
dayjs.extend(customParseFormat);
dayjs.extend(localeData);
dayjs.extend(localizedFormat);
dayjs.extend(preParsePostFormat);
dayjs.extend(updateLocale);
export class InputTimePicker {
constructor() {
this.focusOnOpen = false;
this.dialogId = `time-picker-dialog--${guid()}`;
/** whether the value of the input was changed as a result of user typing or not */
this.userChangedValue = false;
this.referenceElementId = `input-time-picker-${guid()}`;
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
this.hostBlurHandler = () => {
const inputValue = this.calciteInputEl.value;
const delocalizedInputValue = this.delocalizeTimeString(inputValue);
if (!delocalizedInputValue) {
this.setValue("");
return;
}
if (delocalizedInputValue !== this.value) {
this.setValue(delocalizedInputValue);
}
const localizedTimeString = localizeTimeString({
value: this.value,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
});
if (localizedTimeString !== inputValue) {
this.setInputValue(localizedTimeString);
}
this.deactivate();
};
this.calciteInternalInputFocusHandler = (event) => {
if (!this.readOnly) {
event.stopPropagation();
}
};
this.calciteInternalInputInputHandler = (event) => {
const { effectiveLocale: locale, numberingSystem } = this;
if (numberingSystem && numberingSystem !== "latn") {
const target = event.target;
numberStringFormatter.numberFormatOptions = {
locale,
numberingSystem,
useGrouping: false
};
const valueInNumberingSystem = numberStringFormatter
.delocalize(target.value)
.split("")
.map((char) => numberKeys.includes(char)
? numberStringFormatter.numberFormatter.format(Number(char))
: char)
.join("");
this.setInputValue(valueInNumberingSystem);
}
};
this.timePickerChangeHandler = (event) => {
event.stopPropagation();
const target = event.target;
const value = target.value;
const includeSeconds = this.shouldIncludeSeconds();
this.setValue(toISOTimeString(value, includeSeconds));
this.setInputValue(localizeTimeString({
value,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
includeSeconds
}));
};
this.popoverCloseHandler = () => {
deactivateFocusTrap(this, {
onDeactivate: () => {
this.calciteInputEl.setFocus();
this.focusOnOpen = false;
}
});
};
this.popoverOpenHandler = () => {
activateFocusTrap(this, {
onActivate: () => {
if (this.focusOnOpen) {
this.calciteTimePickerEl.setFocus();
this.focusOnOpen = false;
}
}
});
};
this.keyDownHandler = (event) => {
const { defaultPrevented, key } = event;
if (defaultPrevented) {
return;
}
if (key === "Enter") {
if (submitForm(this)) {
event.preventDefault();
this.calciteInputEl.setFocus();
}
if (event.composedPath().includes(this.calciteTimePickerEl)) {
return;
}
const newValue = this.delocalizeTimeString(this.calciteInputEl.value);
this.setValue(newValue);
const localizedTimeString = localizeTimeString({
value: this.value,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
});
if (newValue && this.calciteInputEl.value !== localizedTimeString) {
this.setInputValue(localizedTimeString);
}
}
else if (key === "ArrowDown") {
this.open = true;
this.focusOnOpen = true;
event.preventDefault();
}
else if (key === "Escape" && this.open) {
this.open = false;
event.preventDefault();
this.calciteInputEl.setFocus();
}
};
this.setCalcitePopoverEl = (el) => {
this.popoverEl = el;
};
this.setCalciteInputEl = (el) => {
this.calciteInputEl = el;
};
this.setCalciteTimePickerEl = (el) => {
this.calciteTimePickerEl = el;
connectFocusTrap(this, {
focusTrapEl: el,
focusTrapOptions: {
initialFocus: false,
setReturnFocus: false
}
});
};
this.setInputValue = (newInputValue) => {
if (!this.calciteInputEl) {
return;
}
this.calciteInputEl.value = newInputValue;
};
/**
* Sets the value and emits a change event.
* This is used to update the value as a result of user interaction.
*
* @param value
*/
this.setValue = (value) => {
const oldValue = this.value;
const newValue = formatTimeString(value) || "";
if (newValue === oldValue) {
return;
}
this.userChangedValue = true;
this.value = newValue || "";
const changeEvent = this.calciteInputTimePickerChange.emit();
if (changeEvent.defaultPrevented) {
this.userChangedValue = false;
this.value = oldValue;
this.setInputValue(localizeTimeString({
value: oldValue,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
}));
}
};
/**
* Sets the value directly without emitting a change event.
* This is used to update the value on initial load and when props change that are not the result of user interaction.
*
* @param value
*/
this.setValueDirectly = (value) => {
const includeSeconds = this.shouldIncludeSeconds();
this.value = toISOTimeString(value, includeSeconds);
this.setInputValue(this.value
? localizeTimeString({
value: this.value,
includeSeconds,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem
})
: "");
};
this.onInputWrapperClick = () => {
this.open = !this.open;
};
this.deactivate = () => {
this.open = false;
};
this.open = false;
this.disabled = false;
this.focusTrapDisabled = false;
this.form = undefined;
this.readOnly = false;
this.messageOverrides = undefined;
this.messages = undefined;
this.name = undefined;
this.numberingSystem = undefined;
this.required = false;
this.scale = "m";
this.overlayPositioning = "absolute";
this.placement = "auto";
this.step = 60;
this.value = null;
this.defaultMessages = undefined;
this.effectiveLocale = "";
}
openHandler(value) {
if (this.disabled || this.readOnly) {
this.open = false;
return;
}
if (value) {
this.reposition(true);
}
}
handleFocusTrapDisabled(focusTrapDisabled) {
if (!this.open) {
return;
}
focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
}
handleDisabledAndReadOnlyChange(value) {
if (!value) {
this.open = false;
}
}
onMessagesChange() {
/* wired up by t9n util */
}
numberingSystemWatcher(numberingSystem) {
this.setInputValue(localizeTimeString({
value: this.value,
locale: this.effectiveLocale,
numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
}));
}
stepWatcher(newStep, oldStep) {
if ((oldStep >= 60 && newStep > 0 && newStep < 60) ||
(newStep >= 60 && oldStep > 0 && oldStep < 60)) {
this.setValueDirectly(this.value);
}
}
valueWatcher(newValue) {
if (!this.userChangedValue) {
this.setValueDirectly(newValue);
}
this.userChangedValue = false;
}
async effectiveLocaleWatcher(locale) {
await this.loadDateTimeLocaleData();
this.setInputValue(localizeTimeString({
value: this.value,
locale,
numberingSystem: this.numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
}));
}
// --------------------------------------------------------------------------
//
// Public Methods
//
// --------------------------------------------------------------------------
/** Sets focus on the component. */
async setFocus() {
await componentLoaded(this);
this.el.focus();
}
/**
* Updates the position of the component.
*
* @param delayed
*/
async reposition(delayed = false) {
this.popoverEl?.reposition(delayed);
}
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
delocalizeTimeString(value) {
// we need to set the corresponding locale before parsing, otherwise it defaults to English (possible dayjs bug)
dayjs.locale(this.effectiveLocale.toLowerCase());
const dayjsParseResult = dayjs(value, ["LTS", "LT"]);
if (dayjsParseResult.isValid()) {
let unformattedTimeString = `${dayjsParseResult.get("hour")}:${dayjsParseResult.get("minute")}`;
if (this.shouldIncludeSeconds()) {
unformattedTimeString += `:${dayjsParseResult.get("seconds") || 0}`;
}
return formatTimeString(unformattedTimeString) || "";
}
return "";
}
async loadDateTimeLocaleData() {
let supportedLocale = getSupportedLocale(this.effectiveLocale).toLowerCase();
if (supportedLocale === "no") {
supportedLocale = "nb";
}
if (supportedLocale === "pt-pt") {
supportedLocale = "pt";
}
const { default: localeConfig } = await supportedDayJsLocaleToLocaleConfigImport.get(supportedLocale)();
dayjs.locale(localeConfig, null, true);
dayjs.updateLocale(supportedLocale, this.getExtendedLocaleConfig(supportedLocale));
}
getExtendedLocaleConfig(locale) {
if (locale === "ar") {
return {
meridiem: (hour) => (hour > 12 ? "م" : "ص"),
formats: {
LT: "HH:mm A",
LTS: "HH:mm:ss A",
L: "DD/MM/YYYY",
LL: "D MMMM YYYY",
LLL: "D MMMM YYYY HH:mm A",
LLLL: "dddd D MMMM YYYY HH:mm A"
}
};
}
if (locale === "en-au") {
return {
meridiem: (hour) => (hour > 12 ? "pm" : "am")
};
}
if (locale === "en-ca") {
return {
meridiem: (hour) => (hour > 12 ? "p.m." : "a.m.")
};
}
if (locale === "el") {
return {
meridiem: (hour) => (hour > 12 ? "μ.μ." : "π.μ.")
};
}
if (locale === "hi") {
return {
formats: {
LT: "h:mm A",
LTS: "h:mm:ss A",
L: "DD/MM/YYYY",
LL: "D MMMM YYYY",
LLL: "D MMMM YYYY, h:mm A",
LLLL: "dddd, D MMMM YYYY, h:mm A"
},
meridiem: (hour) => (hour > 12 ? "pm" : "am")
};
}
if (locale === "ko") {
return {
meridiem: (hour) => (hour > 12 ? "오후" : "오전")
};
}
if (locale === "zh-tw") {
return {
formats: {
LT: "AHH:mm",
LTS: "AHH:mm:ss"
}
};
}
if (locale === "zh-hk") {
return {
formats: {
LT: "AHH:mm",
LTS: "AHH:mm:ss"
},
meridiem: (hour) => (hour > 12 ? "下午" : "上午")
};
}
}
onLabelClick() {
this.setFocus();
}
shouldIncludeSeconds() {
return this.step < 60;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
connectInteractive(this);
connectLocalized(this);
if (isValidTime(this.value)) {
this.setValueDirectly(this.value);
}
else {
this.value = undefined;
}
connectLabel(this);
connectForm(this);
connectMessages(this);
}
async componentWillLoad() {
setUpLoadableComponent(this);
await Promise.all([setUpMessages(this), this.loadDateTimeLocaleData()]);
}
componentDidLoad() {
setComponentLoaded(this);
if (isValidTime(this.value)) {
this.setInputValue(localizeTimeString({
value: this.value,
locale: this.effectiveLocale,
numberingSystem: this.numberingSystem,
includeSeconds: this.shouldIncludeSeconds()
}));
}
}
disconnectedCallback() {
disconnectInteractive(this);
disconnectLabel(this);
disconnectForm(this);
disconnectLocalized(this);
deactivateFocusTrap(this);
disconnectMessages(this);
}
componentDidRender() {
updateHostInteraction(this);
}
// --------------------------------------------------------------------------
//
// Render Methods
//
// --------------------------------------------------------------------------
render() {
const { disabled, messages, readOnly, dialogId } = this;
return (h(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, h("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setCalciteInputEl }), this.renderToggleIcon(this.open)), h("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
// eslint-disable-next-line react/jsx-sort-props
ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this })));
}
renderToggleIcon(open) {
return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
}
static get is() { return "calcite-input-time-picker"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["input-time-picker.scss"]
};
}
static get styleUrls() {
return {
"$": ["input-time-picker.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"open": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, displays the `calcite-time-picker` component."
},
"attribute": "open",
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, interaction is prevented and the component is displayed with lower opacity."
},
"attribute": "disabled",
"reflect": true,
"defaultValue": "false"
},
"focusTrapDisabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, prevents focus trapping."
},
"attribute": "focus-trap-disabled",
"reflect": true,
"defaultValue": "false"
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The ID of the form that will be associated with the component.\n\nWhen not set, the component will be associated with its ancestor form element, if any."
},
"attribute": "form",
"reflect": true
},
"readOnly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "mdn",
"text": "[readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)"
}],
"text": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified."
},
"attribute": "read-only",
"reflect": true,
"defaultValue": "false"
},
"messageOverrides": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "Partial<InputTimePickerMessages & TimePickerMessages>",
"resolved": "{ chooseTime?: string; 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"
},
"InputTimePickerMessages": {
"location": "import",
"path": "./assets/input-time-picker/t9n"
},
"TimePickerMessages": {
"location": "import",
"path": "../time-picker/assets/time-picker/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Use this property to override individual strings used by the component."
}
},
"messages": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "InputTimePickerMessages",
"resolved": "{ chooseTime: string; }",
"references": {
"InputTimePickerMessages": {
"location": "import",
"path": "./assets/input-time-picker/t9n"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Made into a prop for testing purposes only"
}
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the name of the component on form submission."
},
"attribute": "name",
"reflect": false
},
"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
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "When `true`, the component must have a value in order for the form to submit."
},
"attribute": "required",
"reflect": true,
"defaultValue": "false"
},
"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\""
},
"overlayPositioning": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OverlayPositioning",
"resolved": "\"absolute\" | \"fixed\"",
"references": {
"OverlayPositioning": {
"location": "import",
"path": "../../utils/floating-ui"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines the type of positioning to use for the overlaid content.\n\nUsing `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n\n`\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`."
},
"attribute": "overlay-positioning",
"reflect": false,
"defaultValue": "\"absolute\""
},
"placement": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LogicalPlacement",
"resolved": "\"auto\" | \"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"auto-start\" | \"auto-end\" | \"leading-start\" | \"leading\" | \"leading-end\" | \"trailing-end\" | \"trailing\" | \"trailing-start\"",
"references": {
"LogicalPlacement": {
"location": "import",
"path": "../../utils/floating-ui"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines where the popover will be positioned relative to the input."
},
"attribute": "placement",
"reflect": true,
"defaultValue": "\"auto\""
},
"step": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the granularity the component's `value` must adhere to (in seconds)."
},
"attribute": "step",
"reflect": false,
"defaultValue": "60"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The time value in ISO (24-hour) format."
},
"attribute": "value",
"reflect": false,
"defaultValue": "null"
}
};
}
static get states() {
return {
"defaultMessages": {},
"effectiveLocale": {}
};
}
static get events() {
return [{
"method": "calciteInputTimePickerChange",
"name": "calciteInputTimePickerChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fires when the time value is changed as a result of user input."
},
"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.",
"tags": []
}
},
"reposition": {
"complexType": {
"signature": "(delayed?: boolean) => Promise<void>",
"parameters": [{
"tags": [{
"name": "param",
"text": "delayed"
}],
"text": ""
}],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Updates the position of the component.",
"tags": [{
"name": "param",
"text": "delayed"
}]
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "open",
"methodName": "openHandler"
}, {
"propName": "focusTrapDisabled",
"methodName": "handleFocusTrapDisabled"
}, {
"propName": "disabled",
"methodName": "handleDisabledAndReadOnlyChange"
}, {
"propName": "readOnly",
"methodName": "handleDisabledAndReadOnlyChange"
}, {
"propName": "messageOverrides",
"methodName": "onMessagesChange"
}, {
"propName": "numberingSystem",
"methodName": "numberingSystemWatcher"
}, {
"propName": "step",
"methodName": "stepWatcher"
}, {
"propName": "value",
"methodName": "valueWatcher"
}, {
"propName": "effectiveLocale",
"methodName": "effectiveLocaleWatcher"
}];
}
}