@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-time-picker.entry.js

@@ -0,0 +1,839 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { n as numberKeys } from './key-9a10d862.js';
+import { i as isValidNumber, c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { m as maxTenthForMinuteAndSecond, a as formatTimePart, p as parseTimeString, i as isValidTime, b as localizeTimeStringToParts, g as getMeridiem, c as getTimeParts, d as getLocalizedTimePartSuffix, e as getLocalizedDecimalSeparator, h as localizeTimePart, j as getLocaleHourCycle } from './time-4a90614b.js';
+import { g as getIconScale } from './component-edd2c3cd.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import { d as decimalPlaces, g as getDecimals } from './math-efada7a9.js';
+import './dom-b91aa537.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './observers-5ba39eee.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    button: "button",
+    buttonBottomLeft: "button--bottom-left",
+    buttonBottomRight: "button--bottom-right",
+    buttonFractionalSecondDown: "button--fractionalSecond-down",
+    buttonFractionalSecondUp: "button--fractionalSecond-up",
+    buttonHourDown: "button--hour-down",
+    buttonHourUp: "button--hour-up",
+    buttonMeridiemDown: "button--meridiem-down",
+    buttonMeridiemUp: "button--meridiem-up",
+    buttonMinuteDown: "button--minute-down",
+    buttonMinuteUp: "button--minute-up",
+    buttonSecondDown: "button--second-down",
+    buttonSecondUp: "button--second-up",
+    buttonTopLeft: "button--top-left",
+    buttonTopRight: "button--top-right",
+    column: "column",
+    delimiter: "delimiter",
+    fractionalSecond: "fractionalSecond",
+    hour: "hour",
+    input: "input",
+    inputFocus: "inputFocus",
+    meridiem: "meridiem",
+    minute: "minute",
+    second: "second",
+    showMeridiem: "show-meridiem",
+    showSecond: "show-second",
+    "scale-s": "scale-s",
+    "scale-m": "scale-m",
+    "scale-l": "scale-l",
+    timePicker: "time-picker",
+    meridiemStart: "meridiem--start",
+};
+
+const timePickerCss = ":host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-color-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-color-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-color-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-2);z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-color-brand);z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:0.75rem;padding-block:0.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:0.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:0.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:0.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}";
+
+function capitalize(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+const TimePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteInternalTimePickerBlur = createEvent(this, "calciteInternalTimePickerBlur", 6);
+        this.calciteInternalTimePickerChange = createEvent(this, "calciteInternalTimePickerChange", 6);
+        this.calciteInternalTimePickerFocus = createEvent(this, "calciteInternalTimePickerFocus", 6);
+        this.pointerActivated = false;
+        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) => {
+            if (this.pointerActivated) {
+                return;
+            }
+            this.activeEl = event.currentTarget;
+        };
+        this.fractionalSecondKeyDownHandler = (event) => {
+            const { key } = event;
+            if (numberKeys.includes(key)) {
+                const stepPrecision = decimalPlaces(this.step);
+                const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+                const fractionalSecondAsIntegerLength = fractionalSecondAsInteger.toString().length;
+                let newFractionalSecondAsIntegerString;
+                if (fractionalSecondAsIntegerLength >= stepPrecision) {
+                    newFractionalSecondAsIntegerString = key.padStart(stepPrecision, "0");
+                }
+                else if (fractionalSecondAsIntegerLength < stepPrecision) {
+                    newFractionalSecondAsIntegerString = `${fractionalSecondAsInteger}${key}`.padStart(stepPrecision, "0");
+                }
+                this.setValuePart("fractionalSecond", parseFloat(`0.${newFractionalSecondAsIntegerString}`));
+            }
+            else {
+                switch (key) {
+                    case "Backspace":
+                    case "Delete":
+                        this.setValuePart("fractionalSecond", null);
+                        break;
+                    case "ArrowDown":
+                        event.preventDefault();
+                        this.nudgeFractionalSecond("down");
+                        break;
+                    case "ArrowUp":
+                        event.preventDefault();
+                        this.nudgeFractionalSecond("up");
+                        break;
+                    case " ":
+                        event.preventDefault();
+                        break;
+                }
+            }
+        };
+        this.fractionalSecondDownClickHandler = () => {
+            this.activeEl = this.fractionalSecondEl;
+            this.fractionalSecondEl.focus();
+            this.nudgeFractionalSecond("down");
+        };
+        this.fractionalSecondUpClickHandler = () => {
+            this.activeEl = this.fractionalSecondEl;
+            this.fractionalSecondEl.focus();
+            this.nudgeFractionalSecond("up");
+        };
+        this.hourDownClickHandler = () => {
+            this.activeEl = this.hourEl;
+            this.hourEl.focus();
+            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.hourUpClickHandler = () => {
+            this.activeEl = this.hourEl;
+            this.hourEl.focus();
+            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.inputClickHandler = (event) => {
+            this.activeEl = event.target;
+        };
+        this.meridiemUpClickHandler = () => {
+            this.activeEl = this.meridiemEl;
+            this.meridiemEl.focus();
+            this.incrementMeridiem();
+        };
+        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.meridiemDownClickHandler = () => {
+            this.activeEl = this.meridiemEl;
+            this.meridiemEl.focus();
+            this.decrementMeridiem();
+        };
+        this.minuteDownClickHandler = () => {
+            this.activeEl = this.minuteEl;
+            this.minuteEl.focus();
+            this.decrementMinute();
+        };
+        this.minuteUpClickHandler = () => {
+            this.activeEl = this.minuteEl;
+            this.minuteEl.focus();
+            this.incrementMinute();
+        };
+        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.nudgeFractionalSecond = (direction) => {
+            const stepDecimal = getDecimals(this.step);
+            const stepPrecision = decimalPlaces(this.step);
+            const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+            const fractionalSecondAsFloat = parseFloat(`0.${this.fractionalSecond}`);
+            let nudgedValue;
+            let nudgedValueRounded;
+            let nudgedValueRoundedDecimals;
+            let newFractionalSecond;
+            if (direction === "up") {
+                nudgedValue = isNaN(fractionalSecondAsInteger) ? 0 : fractionalSecondAsFloat + stepDecimal;
+                nudgedValueRounded = parseFloat(nudgedValue.toFixed(stepPrecision));
+                nudgedValueRoundedDecimals = getDecimals(nudgedValueRounded);
+                newFractionalSecond =
+                    nudgedValueRounded < 1 && decimalPlaces(nudgedValueRoundedDecimals) > 0
+                        ? formatTimePart(nudgedValueRoundedDecimals, stepPrecision)
+                        : "".padStart(stepPrecision, "0");
+            }
+            if (direction === "down") {
+                nudgedValue =
+                    isNaN(fractionalSecondAsInteger) || fractionalSecondAsInteger === 0
+                        ? 1 - stepDecimal
+                        : fractionalSecondAsFloat - stepDecimal;
+                nudgedValueRounded = parseFloat(nudgedValue.toFixed(stepPrecision));
+                nudgedValueRoundedDecimals = getDecimals(nudgedValueRounded);
+                newFractionalSecond =
+                    nudgedValueRounded < 1 &&
+                        decimalPlaces(nudgedValueRoundedDecimals) > 0 &&
+                        Math.sign(nudgedValueRoundedDecimals) === 1
+                        ? formatTimePart(nudgedValueRoundedDecimals, stepPrecision)
+                        : "".padStart(stepPrecision, "0");
+            }
+            this.setValuePart("fractionalSecond", newFractionalSecond);
+        };
+        this.sanitizeValue = (value) => {
+            const { hour, minute, second, fractionalSecond } = parseTimeString(value);
+            if (fractionalSecond) {
+                const sanitizedFractionalSecond = this.sanitizeFractionalSecond(fractionalSecond);
+                return `${hour}:${minute}:${second}.${sanitizedFractionalSecond}`;
+            }
+            return isValidTime(value) && value;
+        };
+        this.sanitizeFractionalSecond = (fractionalSecond) => fractionalSecond && decimalPlaces(this.step) !== fractionalSecond.length
+            ? parseFloat(`0.${fractionalSecond}`).toFixed(decimalPlaces(this.step)).replace("0.", "")
+            : fractionalSecond;
+        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.secondDownClickHandler = () => {
+            this.activeEl = this.secondEl;
+            this.secondEl.focus();
+            this.decrementSecond();
+        };
+        this.secondUpClickHandler = () => {
+            this.activeEl = this.secondEl;
+            this.secondEl.focus();
+            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.setFractionalSecondEl = (el) => (this.fractionalSecondEl = el);
+        this.setValue = (value) => {
+            if (isValidTime(value)) {
+                const { hour, minute, second, fractionalSecond } = parseTimeString(value);
+                const { effectiveLocale: locale, numberingSystem } = this;
+                const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedDecimalSeparator, localizedFractionalSecond, localizedSecondSuffix, localizedMeridiem, } = localizeTimeStringToParts({ value, locale, numberingSystem });
+                this.hour = hour;
+                this.minute = minute;
+                this.second = second;
+                this.fractionalSecond = this.sanitizeFractionalSecond(fractionalSecond);
+                this.localizedHour = localizedHour;
+                this.localizedHourSuffix = localizedHourSuffix;
+                this.localizedMinute = localizedMinute;
+                this.localizedMinuteSuffix = localizedMinuteSuffix;
+                this.localizedSecond = localizedSecond;
+                this.localizedDecimalSeparator = localizedDecimalSeparator;
+                this.localizedFractionalSecond = localizedFractionalSecond;
+                this.localizedSecondSuffix = localizedSecondSuffix;
+                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.fractionalSecond = null;
+                this.localizedHour = null;
+                this.localizedHourSuffix = getLocalizedTimePartSuffix("hour", this.effectiveLocale, this.numberingSystem);
+                this.localizedMeridiem = null;
+                this.localizedMinute = null;
+                this.localizedMinuteSuffix = getLocalizedTimePartSuffix("minute", this.effectiveLocale, this.numberingSystem);
+                this.localizedSecond = null;
+                this.localizedDecimalSeparator = getLocalizedDecimalSeparator(this.effectiveLocale, this.numberingSystem);
+                this.localizedFractionalSecond = null;
+                this.localizedSecondSuffix = getLocalizedTimePartSuffix("second", this.effectiveLocale, this.numberingSystem);
+                this.meridiem = null;
+                this.minute = null;
+                this.second = null;
+                this.value = null;
+            }
+        };
+        this.setValuePart = (key, value) => {
+            var _a, _b;
+            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 if (key === "fractionalSecond") {
+                const stepPrecision = decimalPlaces(this.step);
+                if (typeof value === "number") {
+                    this.fractionalSecond =
+                        value === 0 ? "".padStart(stepPrecision, "0") : formatTimePart(value, stepPrecision);
+                }
+                else {
+                    this.fractionalSecond = value;
+                }
+                this.localizedFractionalSecond = localizeTimePart({
+                    value: this.fractionalSecond,
+                    part: "fractionalSecond",
+                    locale,
+                    numberingSystem,
+                });
+            }
+            else {
+                this[key] = typeof value === "number" ? formatTimePart(value) : value;
+                this[`localized${capitalize(key)}`] = localizeTimePart({
+                    value: this[key],
+                    part: key,
+                    locale,
+                    numberingSystem,
+                });
+            }
+            let emit = false;
+            let newValue;
+            if (this.hour && this.minute) {
+                newValue = `${this.hour}:${this.minute}`;
+                if (this.showSecond) {
+                    newValue = `${newValue}:${(_a = this.second) !== null && _a !== void 0 ? _a : "00"}`;
+                    if (this.showFractionalSecond && this.fractionalSecond) {
+                        newValue = `${newValue}.${this.fractionalSecond}`;
+                    }
+                }
+            }
+            else {
+                newValue = null;
+            }
+            if (this.value !== newValue) {
+                emit = true;
+            }
+            this.value = newValue;
+            this.localizedMeridiem = this.value
+                ? ((_b = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _b === void 0 ? void 0 : _b.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.activeEl = undefined;
+        this.effectiveLocale = "";
+        this.fractionalSecond = undefined;
+        this.hour = undefined;
+        this.hourCycle = undefined;
+        this.localizedDecimalSeparator = ".";
+        this.localizedHour = undefined;
+        this.localizedHourSuffix = undefined;
+        this.localizedMeridiem = undefined;
+        this.localizedFractionalSecond = undefined;
+        this.localizedMinute = undefined;
+        this.localizedMinuteSuffix = undefined;
+        this.localizedSecond = undefined;
+        this.localizedSecondSuffix = undefined;
+        this.meridiem = undefined;
+        this.minute = undefined;
+        this.second = undefined;
+        this.showFractionalSecond = undefined;
+        this.showSecond = undefined;
+        this.defaultMessages = undefined;
+    }
+    stepChange() {
+        this.toggleSecond();
+    }
+    valueWatcher(newValue) {
+        this.setValue(newValue);
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleWatcher() {
+        this.updateLocale();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    blurHandler() {
+        this.activeEl = undefined;
+        this.pointerActivated = false;
+        this.calciteInternalTimePickerBlur.emit();
+    }
+    hostFocusHandler() {
+        this.calciteInternalTimePickerFocus.emit();
+    }
+    keyDownHandler(event) {
+        this.pointerActivated = false;
+        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.showFractionalSecond) {
+                            this.focusPart("fractionalSecond");
+                        }
+                        else if (this.hourCycle === "12") {
+                            this.focusPart("meridiem");
+                            event.preventDefault();
+                        }
+                        break;
+                }
+                break;
+            case this.fractionalSecondEl:
+                switch (key) {
+                    case "ArrowLeft":
+                        this.focusPart("second");
+                        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.showFractionalSecond) {
+                            this.focusPart("fractionalSecond");
+                        }
+                        else if (this.step !== 60) {
+                            this.focusPart("second");
+                            event.preventDefault();
+                        }
+                        else {
+                            this.focusPart("minute");
+                            event.preventDefault();
+                        }
+                        break;
+                }
+                break;
+        }
+    }
+    pointerDownHandler() {
+        this.pointerActivated = true;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's first focusable element.
+     */
+    async setFocus() {
+        var _a;
+        await componentFocusable(this);
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    async focusPart(target) {
+        var _a;
+        await componentFocusable(this);
+        (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    toggleSecond() {
+        this.showSecond = this.step < 60;
+        this.showFractionalSecond = decimalPlaces(this.step) > 0;
+    }
+    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.localizedDecimalSeparator = getLocalizedDecimalSeparator(this.effectiveLocale, this.numberingSystem);
+        this.setValue(this.sanitizeValue(this.value));
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        connectLocalized(this);
+        this.updateLocale();
+        connectMessages(this);
+        this.toggleSecond();
+        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 = getIconScale(this.scale);
+        const minuteIsNumber = isValidNumber(this.minute);
+        const secondIsNumber = isValidNumber(this.second);
+        const fractionalSecondIsNumber = isValidNumber(this.fractionalSecond);
+        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.hourUpClickHandler, 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,
+                [CSS.inputFocus]: this.activeEl && this.activeEl === this.hourEl,
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setHourEl }, this.localizedHour || "--"), h("span", { "aria-label": this.messages.hourDown, class: {
+                [CSS.button]: true,
+                [CSS.buttonHourDown]: true,
+                [CSS.buttonBottomLeft]: true,
+            }, onClick: this.hourDownClickHandler, 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.minuteUpClickHandler, role: "button" }, 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,
+                [CSS.inputFocus]: this.activeEl && this.activeEl === this.minuteEl,
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setMinuteEl }, this.localizedMinute || "--"), h("span", { "aria-label": this.messages.minuteDown, class: {
+                [CSS.button]: true,
+                [CSS.buttonMinuteDown]: true,
+            }, onClick: this.minuteDownClickHandler, 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.secondUpClickHandler, 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,
+                [CSS.inputFocus]: this.activeEl && this.activeEl === this.secondEl,
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setSecondEl }, this.localizedSecond || "--"), h("span", { "aria-label": this.messages.secondDown, class: {
+                [CSS.button]: true,
+                [CSS.buttonSecondDown]: true,
+            }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { class: CSS.column, role: "group" }, h("span", { "aria-label": this.messages.fractionalSecondUp, class: {
+                [CSS.button]: true,
+                [CSS.buttonFractionalSecondUp]: true,
+            }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-up", scale: iconScale })), h("span", { "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
+                [CSS.input]: true,
+                [CSS.fractionalSecond]: true,
+                [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl,
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, role: "spinbutton", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setFractionalSecondEl }, this.localizedFractionalSecond || "--"), h("span", { "aria-label": this.messages.fractionalSecondDown, class: {
+                [CSS.button]: true,
+                [CSS.buttonFractionalSecondDown]: true,
+            }, onClick: this.fractionalSecondDownClickHandler, 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.meridiemUpClickHandler, 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,
+                [CSS.inputFocus]: this.activeEl && this.activeEl === this.meridiemEl,
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), h("span", { "aria-label": this.messages.meridiemDown, class: {
+                [CSS.button]: true,
+                [CSS.buttonMeridiemDown]: true,
+                [CSS.buttonBottomRight]: true,
+            }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { icon: "chevron-down", scale: iconScale }))))));
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "step": ["stepChange"],
+        "value": ["valueWatcher"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleWatcher"]
+    }; }
+};
+TimePicker.style = timePickerCss;
+
+export { TimePicker as calcite_time_picker };