@esri/solutions-components 0.8.3 → 0.8.4

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

@@ -1,839 +0,0 @@
-/*!
- * 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 };