@ukic/canary-web-components 3.0.0-canary.21 → 3.0.0-canary.23

package/dist/collection/components/ic-time-input/ic-time-input.js

@@ -0,0 +1,1600 @@
+/* eslint-disable react/jsx-no-bind */
+import { h, Host, } from "@stencil/core";
+import { IcInformationStatus, } from "../../utils/types";
+import { isEmptyString, isNumeric, addFormResetListener, getInputDescribedByText, onComponentRequiredPropUndefined, removeDisabledFalse, removeFormResetListener, renderHiddenInput, } from "../../utils/helpers";
+import Clear from "../../assets/clear-icon.svg";
+import Clock from "../../assets/clock.svg";
+let inputIds = 0;
+/**
+ * @slot helper-text - Content is set as the helper text for the time input.
+ */
+export class TimeInput {
+    constructor() {
+        this.DEFAULT_TIME_FORMAT = "HH:MM:SS";
+        this.ARIA_INVALID = "aria-invalid";
+        this.ARIA_LABEL = "aria-label";
+        this.ARIA_LABELLED_BY = "aria-labelledby";
+        this.EVENT_OBJECT_STRING = "[object Event]";
+        this.FIT_TO_VALUE = "fit-to-value";
+        this.initialValue = this.value;
+        this.inputsInOrder = [];
+        this.isValidHour = true;
+        this.isValidMinute = true;
+        this.isValidSecond = true;
+        this.isValidTime = true;
+        this.isTimeSetFromKeyboardEvent = false;
+        this.previousSelectedTime = null;
+        this.selectedTime = null;
+        this.externalSetTime = false;
+        this.clearInput = false;
+        this.maxTime = null;
+        this.minTime = null;
+        this.clockFocused = false;
+        this.clearButtonFocused = false;
+        this.removeLabelledBy = false;
+        this.hour = "";
+        this.minute = "";
+        this.second = "";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * An array of times that will be disabled in the time input. The times can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.disableTimes = [];
+        /**
+         * If `true`, every individual input field completed will emit an icChange event.
+         */
+        this.emitTimePartChange = false;
+        /**
+         * If `true`, the helper text will be visually hidden, but still read out by screenreaders.
+         */
+        this.hideHelperText = false;
+        /**
+         * If `true`, the label will be visually hidden, but will still be read out by screen readers.
+         */
+        this.hideLabel = false;
+        /**
+         * The ID for the input.
+         */
+        this.inputId = `ic-time-input-${inputIds++}`;
+        /**
+         * The text to display as the validation message when an invalid time is entered.
+         */
+        this.invalidTimeMessage = "Please enter a valid time.";
+        /**
+         * The latest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.max = "";
+        /**
+         * The earliest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.min = "";
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the input will require a value.
+         */
+        this.required = false;
+        /**
+         * If `true`, a button which clears the time input when clicked will be displayed.
+         */
+        this.showClearButton = true;
+        /**
+         * @internal If `true`, a button which displays the clock view when clicked will be displayed.
+         */
+        this.showClockButton = false;
+        /**
+         * The size of the time input to be displayed.
+         */
+        this.size = "medium";
+        /**
+         * Sets the time picker to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The format in which the time will be displayed.
+         */
+        this.timeFormat = this.DEFAULT_TIME_FORMAT;
+        /**
+         * The time period format: "12" for 12-hour, "24" for 24-hour. Defaults to "24".
+         */
+        this.timePeriod = "24";
+        /**
+         * The value of the time input. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object.
+         */
+        this.value = "";
+        /**
+         * The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message. This will override the built-in time validation.
+         */
+        this.validationText = "";
+        this.setInputPasteValue = (input, pastedValue) => {
+            if (input) {
+                const inputEl = input;
+                inputEl.value = pastedValue;
+                inputEl.classList.add(this.FIT_TO_VALUE);
+            }
+        };
+        this.parseTime = (value) => {
+            if (!value)
+                return null;
+            if (value instanceof Date)
+                return value;
+            const parts = value.split(":");
+            if (parts.length >= 2) {
+                const d = new Date();
+                d.setHours(+parts[0], +parts[1], parts[2] ? +parts[2] : 0, 0);
+                return d;
+            }
+            return null;
+        };
+        this.isHHMMFormat = () => this.timeFormat === "HH:MM";
+        this.isKeyboardOrEvent = (event) => {
+            return (Object.prototype.toString.call(event) === this.EVENT_OBJECT_STRING ||
+                Object.prototype.toString.call(event) === "[object KeyboardEvent]");
+        };
+        this.setTimeValidity = () => {
+            const minHour = 0;
+            const maxHour = this.timePeriod === "12" ? 11 : 23;
+            if (!isEmptyString(this.hour)) {
+                this.isValidHour = +this.hour >= minHour && +this.hour <= maxHour;
+            }
+            else {
+                this.isValidHour = true;
+            }
+            if (!isEmptyString(this.minute)) {
+                this.isValidMinute = +this.minute >= 0 && +this.minute <= 59;
+            }
+            else {
+                this.isValidMinute = true;
+            }
+            if (!this.isHHMMFormat()) {
+                if (!isEmptyString(this.second)) {
+                    this.isValidSecond = +this.second >= 0 && +this.second <= 59;
+                }
+                else {
+                    this.isValidSecond = true;
+                }
+            }
+            else {
+                this.isValidSecond = true;
+            }
+        };
+        this.setInputValue = (input, clear = false) => {
+            const newValue = clear ? "" : input.value;
+            if (input === this.hourInputEl) {
+                this.hour = newValue;
+            }
+            else if (input === this.minuteInputEl) {
+                this.minute = newValue;
+            }
+            else if (input === this.secondInputEl && !this.isHHMMFormat()) {
+                this.second = newValue;
+            }
+            this.setValidationMessage();
+        };
+        this.setPreventInput = (input, isPrevented) => {
+            if (input === this.hourInputEl) {
+                this.preventHourInput = isPrevented;
+            }
+            else if (input === this.minuteInputEl) {
+                this.preventMinuteInput = isPrevented;
+            }
+            else if (input === this.secondInputEl) {
+                this.preventSecondInput = isPrevented;
+            }
+        };
+        this.setValidationMessage = () => {
+            this.maxTime = this.parseTime(this.max);
+            this.minTime = this.parseTime(this.min);
+            this.setTimeValidity();
+            let outOfBoundsMsg = "";
+            let isDisabledTime = false;
+            if (!isEmptyString(this.hour) &&
+                !isEmptyString(this.minute) &&
+                (this.isHHMMFormat() || !isEmptyString(this.second))) {
+                this.selectedTime = this.convertToTime(this.hour, this.minute, this.isHHMMFormat() ? "00" : this.second);
+                this.isValidTime =
+                    !!this.selectedTime &&
+                        this.selectedTime.getHours() == +this.hour &&
+                        this.selectedTime.getMinutes() == +this.minute &&
+                        (this.isHHMMFormat() || this.selectedTime.getSeconds() == +this.second);
+                if (this.selectedTime &&
+                    Array.isArray(this.disableTimes) &&
+                    this.disableTimes.length > 0) {
+                    isDisabledTime = this.disableTimes.some((t) => {
+                        if (typeof t === "object" &&
+                            t !== null &&
+                            "start" in t &&
+                            "end" in t) {
+                            const start = this.parseTime(t.start);
+                            const end = this.parseTime(t.end);
+                            if (start && end) {
+                                return this.selectedTime >= start && this.selectedTime <= end;
+                            }
+                            return false;
+                        }
+                        const parsed = this.parseTime(t);
+                        return (parsed &&
+                            parsed.getHours() === this.selectedTime.getHours() &&
+                            parsed.getMinutes() === this.selectedTime.getMinutes() &&
+                            parsed.getSeconds() === this.selectedTime.getSeconds());
+                    });
+                    if (isDisabledTime) {
+                        this.isValidTime = false;
+                        outOfBoundsMsg = this.invalidTimeMessage;
+                    }
+                }
+                if (this.selectedTime && !isDisabledTime) {
+                    if (this.minTime && this.selectedTime < this.minTime) {
+                        this.isValidTime = false;
+                        outOfBoundsMsg = `Please enter a time after ${this.formatTime(this.minTime)}.`;
+                    }
+                    else if (this.maxTime && this.selectedTime > this.maxTime) {
+                        this.isValidTime = false;
+                        outOfBoundsMsg = `Please enter a time before ${this.formatTime(this.maxTime)}.`;
+                    }
+                }
+                if (!this.isValidTime) {
+                    this.inputsInOrder.forEach((input) => input.setAttribute(this.ARIA_INVALID, "true"));
+                }
+                else {
+                    this.inputsInOrder.forEach((input) => input.removeAttribute(this.ARIA_INVALID));
+                }
+            }
+            else {
+                this.selectedTime = null;
+            }
+            if (!(this.isValidHour &&
+                this.isValidMinute &&
+                this.isValidSecond &&
+                this.isValidTime)) {
+                this.invalidTimeText = outOfBoundsMsg || this.invalidTimeMessage;
+            }
+            else {
+                this.invalidTimeText = "";
+            }
+        };
+        this.formatTime = (time) => {
+            const hh = time.getHours().toString().padStart(2, "0");
+            const mm = time.getMinutes().toString().padStart(2, "0");
+            const ss = time.getSeconds().toString().padStart(2, "0");
+            return this.isHHMMFormat() ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`;
+        };
+        this.handleInput = (event) => {
+            const inputEvent = event;
+            const input = event.target;
+            if (input !== this.hourInputEl) {
+                if (inputEvent.inputType !== "deleteContentBackward" &&
+                    !this.preventAutoFormatting) {
+                    if (input.value.length === 1 &&
+                        +input.value >= 6 &&
+                        +input.value <= 9) {
+                        this.setInputValue(input);
+                        this.notifyScreenReader(input);
+                        this.moveToNextInput(input);
+                    }
+                    if (input.value.length === 2) {
+                        this.setInputValue(input);
+                        this.setPreventInput(input, true);
+                        this.notifyScreenReader(input);
+                        this.moveToNextInput(input);
+                    }
+                    else {
+                        this.setPreventInput(input, false);
+                    }
+                }
+                else if (this.preventAutoFormatting) {
+                    if (input.value.length === 2 && !this.isKeyboardOrEvent(event)) {
+                        this.setInputValue(input);
+                        this.setPreventInput(input, true);
+                        this.moveToNextInput(input);
+                    }
+                    else {
+                        this.setInputValue(input);
+                    }
+                }
+                if (input.value.length !== 2) {
+                    this.setPreventInput(input, false);
+                }
+            }
+            else {
+                if (input.value.length === 2) {
+                    this.setInputValue(input);
+                    if (Object.prototype.toString.call(event) !== this.EVENT_OBJECT_STRING) {
+                        this.moveToNextInput(input);
+                    }
+                    this.setPreventInput(input, true);
+                }
+                else {
+                    this.setInputValue(input, true);
+                    this.setPreventInput(input, false);
+                }
+            }
+            this.setFitToValueStyling(input);
+            if (input.value.length === 0) {
+                this.setInputValue(input, true);
+                this.setValidationMessage();
+            }
+            this.notifyScreenReader(input);
+        };
+        this.handleKeyDown = (event, isInputPrevented) => {
+            var _a;
+            const input = event.target;
+            const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[:]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
+            if (!regex.test(eventKey) &&
+                !((event.ctrlKey || event.metaKey) &&
+                    (eventKey === "v" || eventKey === "c"))) {
+                event.preventDefault();
+            }
+            switch (eventKey) {
+                case ":":
+                case "arrowright":
+                    event.preventDefault();
+                    this.moveToNextInput(input);
+                    break;
+                case "arrowleft":
+                    event.preventDefault();
+                    this.moveToPreviousInput(input);
+                    break;
+                case "arrowup":
+                case "arrowdown":
+                    this.preventAutoFormatting = true;
+                    this.handleUpDownArrowKeyPress(input, event);
+                    break;
+                case "backspace":
+                    if (input.value.length === 0) {
+                        event.preventDefault();
+                        this.moveToPreviousInput(input);
+                    }
+                    break;
+                default:
+                    break;
+            }
+            this.preventInput(event, isInputPrevented);
+            this.isTimeSetFromKeyboardEvent = true;
+        };
+        this.handleFocus = (event) => {
+            const input = event.target;
+            input.select();
+        };
+        this.handleBlur = (event) => {
+            const input = event.target;
+            if (input) {
+                this.autocompleteInput(input);
+            }
+        };
+        this.handleUpDownArrowKeyPress = (input, event) => {
+            let minValue = 0;
+            let maxValue = 59;
+            if (input === this.hourInputEl) {
+                minValue = 0;
+                maxValue = this.timePeriod === "12" ? 11 : 23;
+            }
+            let val = +input.value;
+            if (event.key === "ArrowUp") {
+                val = val + 1;
+                if (val > maxValue)
+                    val = minValue;
+                input.value = val.toString().padStart(2, "0");
+                this.notifyScreenReader(input);
+            }
+            if (event.key === "ArrowDown") {
+                val = val - 1;
+                if (val < minValue)
+                    val = maxValue;
+                input.value = val.toString().padStart(2, "0");
+                this.notifyScreenReader(input);
+            }
+            this.setInputValue(input);
+            this.setFitToValueStyling(input);
+        };
+        this.handleTimeChange = (force) => {
+            if (force || this.selectedTime !== this.previousSelectedTime) {
+                if (this.value) {
+                    this.inputsInOrder.forEach((input) => {
+                        input.classList.add(this.FIT_TO_VALUE);
+                    });
+                }
+                if (this.hour &&
+                    this.minute &&
+                    (this.isHHMMFormat() || this.second) &&
+                    this.invalidTimeText === "") {
+                    this.setValueAndEmitChange(this.selectedTime);
+                    this.notifyScreenReaderSelectedTime();
+                }
+                else if (!(this.selectedTime === null && this.previousSelectedTime === null) &&
+                    this.selectedTimeInfoEl) {
+                    this.setValueAndEmitChange(null);
+                    this.selectedTimeInfoEl.textContent = "";
+                }
+                this.previousSelectedTime = this.selectedTime;
+                if (!this.isTimeSetFromKeyboardEvent) {
+                    this.updateInputValues(this.hour, this.minute, this.second);
+                }
+            }
+        };
+        this.setValueAndEmitChange = (value) => {
+            if (this.value !== value) {
+                this.emitIcChange(value);
+                this.value = value;
+            }
+        };
+        this.emitIcChange = (t) => {
+            this.selectedTime = t;
+            this.icChange.emit({
+                value: t,
+                timeObject: {
+                    hour: this.hour === "" ? null : this.hour,
+                    minute: this.minute === "" ? null : this.minute,
+                    second: this.second === "" ? null : this.second,
+                },
+            });
+        };
+        this.setTime = (time) => {
+            if (time === null || time === "" || time === undefined) {
+                if (this.hour)
+                    this.hour = "";
+                if (this.minute)
+                    this.minute = "";
+                if (this.second)
+                    this.second = "";
+                this.inputsInOrder.forEach((input) => {
+                    input.classList.remove(this.FIT_TO_VALUE);
+                    this.setPreventInput(input, false);
+                });
+                this.handleTimeChange(true);
+            }
+            else {
+                if (typeof time === "string") {
+                    const zuluMatch = time.match(/^(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?Z?$/);
+                    if (zuluMatch) {
+                        this.hour = zuluMatch[1];
+                        this.minute = zuluMatch[2];
+                        this.second = zuluMatch[3];
+                    }
+                    else {
+                        const parts = time.split(":");
+                        this.hour = parts[0] || "";
+                        this.minute = parts[1] || "";
+                        this.second = parts[2] || "";
+                    }
+                }
+                else if (time instanceof Date) {
+                    this.hour = time.getHours().toString().padStart(2, "0");
+                    this.minute = time.getMinutes().toString().padStart(2, "0");
+                    this.second = time.getSeconds().toString().padStart(2, "0");
+                }
+            }
+            this.setValidationMessage();
+        };
+        this.setAriaInvalid = (validHour, validMinute, validSecond) => {
+            var _a, _b, _c;
+            if (this.inputsInOrder.length) {
+                this.inputsInOrder.forEach((input) => {
+                    input.removeAttribute(this.ARIA_INVALID);
+                });
+                if (!validHour) {
+                    (_a = this.hourInputEl) === null || _a === void 0 ? void 0 : _a.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validMinute) {
+                    (_b = this.minuteInputEl) === null || _b === void 0 ? void 0 : _b.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!validSecond) {
+                    (_c = this.secondInputEl) === null || _c === void 0 ? void 0 : _c.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!(validHour && validMinute && validSecond)) {
+                    this.inputsInOrder.forEach((input) => {
+                        input.setAttribute(this.ARIA_INVALID, "true");
+                    });
+                }
+            }
+        };
+        this.handleClear = () => {
+            this.clearInput = true;
+            if (this.hourInputEl) {
+                this.hourInputEl.value = "";
+            }
+            if (this.minuteInputEl) {
+                this.minuteInputEl.value = "";
+            }
+            if (!this.isHHMMFormat() && this.secondInputEl) {
+                this.secondInputEl.value = "";
+            }
+            this.hour = "";
+            this.minute = "";
+            this.second = "";
+            this.handleTimeChange(true);
+            this.inputsInOrder.forEach((input) => {
+                input.classList.remove(this.FIT_TO_VALUE);
+                this.setPreventInput(input, false);
+            });
+            this.clearInput = false;
+            this.isTimeSetFromKeyboardEvent = false;
+            this.setValidationMessage();
+            this.invalidTimeText = "";
+            if (this.hourInputEl) {
+                this.hourInputEl.focus();
+            }
+        };
+        this.notifyScreenReaderSelectedTime = () => {
+            if (this.selectedTime && this.selectedTimeInfoEl) {
+                if (this.isHHMMFormat()) {
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${this.selectedTime
+                        .getHours()
+                        .toString()
+                        .padStart(2, "0")}:${this.selectedTime
+                        .getMinutes()
+                        .toString()
+                        .padStart(2, "0")}`;
+                }
+                else {
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${this.selectedTime
+                        .getHours()
+                        .toString()
+                        .padStart(2, "0")}:${this.selectedTime
+                        .getMinutes()
+                        .toString()
+                        .padStart(2, "0")}:${this.selectedTime
+                        .getSeconds()
+                        .toString()
+                        .padStart(2, "0")}`;
+                }
+            }
+        };
+        this.setFitToValueStyling = (input) => {
+            if (input.value) {
+                input.classList.add(this.FIT_TO_VALUE);
+            }
+            else {
+                input.classList.remove(this.FIT_TO_VALUE);
+            }
+        };
+        this.handleHostBlur = () => {
+            this.removeLabelledBy = false;
+            this.icBlur.emit({ value: this.selectedTime });
+        };
+        this.handleHostFocus = () => {
+            var _a, _b;
+            if ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === null || _b === void 0 ? void 0 : _b.id.match(/(hour|minute|second)-input$/)) {
+                this.removeLabelledBy = false;
+            }
+            else {
+                this.removeLabelledBy = true;
+            }
+            this.icFocus.emit({ value: this.selectedTime });
+        };
+        this.handleFormReset = () => {
+            this.setTime(this.initialValue);
+            this.setValidationMessage();
+            this.handleTimeChange(false);
+        };
+        this.preventInput = (event, isInputPrevented) => {
+            const key = event.key;
+            const input = event.target;
+            let selectedString;
+            if (input) {
+                selectedString = input.value.substring(input.selectionStart || 0, input.selectionEnd || undefined);
+            }
+            if (key === "e" ||
+                key === "." ||
+                key === "-" ||
+                (event.key >= "0" &&
+                    event.key <= "9" &&
+                    isInputPrevented &&
+                    !selectedString)) {
+                event.preventDefault();
+            }
+        };
+        this.moveToNextInput = (currentInput) => {
+            var _a;
+            this.preventAutoFormatting = false;
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.moveToPreviousInput = (currentInput) => {
+            var _a;
+            this.preventAutoFormatting = false;
+            (_a = this.inputsInOrder[this.inputsInOrder.findIndex((input) => input === currentInput) - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.autocompleteInput = (input) => {
+            const inputValue = input.value;
+            if (inputValue.length === 1) {
+                input.value = `0${inputValue}`;
+            }
+            if (input.value) {
+                this.setInputValue(input);
+            }
+        };
+        this.convertToTime = (hour, minute, second) => {
+            if (!isEmptyString(hour) &&
+                !isEmptyString(minute) &&
+                (this.isHHMMFormat() || !isEmptyString(second))) {
+                const d = new Date();
+                d.setHours(+hour, +minute, this.isHHMMFormat() ? 0 : +second, 0);
+                return d;
+            }
+            else {
+                return null;
+            }
+        };
+        this.setInputsInOrder = () => {
+            var _a;
+            this.inputsInOrder = [];
+            const shadowInputs = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input");
+            if (shadowInputs) {
+                shadowInputs.forEach((input) => this.inputsInOrder.push(input));
+            }
+        };
+        this.updateInputValues = (hour, minute, second) => {
+            if (this.hourInputEl && this.minuteInputEl && this.secondInputEl) {
+                this.hourInputEl.value = hour;
+                this.minuteInputEl.value = minute;
+                this.secondInputEl.value = second;
+            }
+        };
+        this.removeAriaLabelledBy = () => {
+            var _a;
+            (_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.removeAttribute(this.ARIA_LABELLED_BY);
+        };
+        this.setAriaLabelledBy = () => {
+            var _a, _b, _c, _d;
+            if (this.disabled &&
+                ((_a = this.inputCompContainerEl) === null || _a === void 0 ? void 0 : _a.getAttribute(this.ARIA_LABELLED_BY))) {
+                this.removeAriaLabelledBy();
+                return;
+            }
+            if (this.disabled) {
+                return;
+            }
+            const labelEl = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("label");
+            const labelId = `${this.inputId}-label`;
+            if (labelEl !== null && labelEl !== undefined) {
+                labelEl.id = labelId;
+            }
+            const hasValidation = !isEmptyString(this.validationStatus) ||
+                !isEmptyString(this.invalidTimeText);
+            const labelledBy = `${(_c = labelEl === null || labelEl === void 0 ? void 0 : labelEl.id) !== null && _c !== void 0 ? _c : ""} ${this.screenReaderInfoId} ${getInputDescribedByText(this.el, this.inputId, this.helperText !== "" && this.helperText !== this.defaultHelperText, hasValidation)} ${this.selectedTime ? this.selectedTimeInfoId : ""} ${this.assistiveHintId}`;
+            (_d = this.inputCompContainerEl) === null || _d === void 0 ? void 0 : _d.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
+        };
+        this.getInputsInOrder = () => {
+            const timeParts = this.timeFormat.split(":");
+            return timeParts.map((part) => {
+                switch (part.substring(0, 1)) {
+                    case "H":
+                        return (h("input", { class: "hour-input", id: "hour-input", ref: (el) => (this.hourInputEl = el), "aria-label": "hour", placeholder: "HH", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventHourInput) }));
+                    case "M":
+                        return (h("input", { id: "minute-input", class: "minute-input", ref: (el) => (this.minuteInputEl = el), "aria-label": "minute", placeholder: "MM", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMinuteInput) }));
+                    case "S":
+                        if (!this.isHHMMFormat()) {
+                            return (h("input", { id: "second-input", class: "second-input", ref: (el) => (this.secondInputEl = el), "aria-label": "second", placeholder: "SS", disabled: this.disabled, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventSecondInput) }));
+                        }
+                        return null;
+                    default:
+                        return null;
+                }
+            });
+        };
+        this.getDescOfInputsOrder = () => {
+            return "hour, minute, and second";
+        };
+        this.getScreenReaderInfo = (validationStatus) => {
+            let inputDescriptors = "";
+            if (this.required) {
+                inputDescriptors += "required";
+            }
+            if (validationStatus === IcInformationStatus.Error) {
+                inputDescriptors += " invalid data";
+            }
+            return inputDescriptors === "" ? "" : inputDescriptors + ", ";
+        };
+        this.notifyScreenReader = (input) => {
+            var _a;
+            const liveRegion = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#live-region");
+            if (liveRegion) {
+                liveRegion.textContent = `${input.value}, ${input.getAttribute(this.ARIA_LABEL)}`;
+            }
+        };
+        this.handlePaste = (event) => {
+            var _a;
+            event.preventDefault();
+            const pastedValue = ((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("Text")) || "";
+            const isValidTime = this.isPastedStringTimeValid(pastedValue);
+            this.setPastedValueAndValidation(isValidTime, pastedValue, event);
+        };
+        this.handleClearFocus = () => {
+            this.removeLabelledBy = true;
+            this.clearButtonFocused = true;
+            this.isTimeSetFromKeyboardEvent = true;
+        };
+        this.handleClearBlur = (ev) => {
+            this.clearButtonFocused = false;
+            this.isTimeSetFromKeyboardEvent = true;
+            const relatedTarget = ev.relatedTarget;
+            if ((relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id) === "clock-button") {
+                this.removeLabelledBy = false;
+                return;
+            }
+            if (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id.match(/(minute|second)-input$/)) {
+                this.removeLabelledBy = false;
+                return;
+            }
+            this.removeLabelledBy = true;
+        };
+        this.handleClockFocus = () => {
+            this.clockFocused = true;
+        };
+        this.handleClockBlur = () => {
+            this.clockFocused = false;
+        };
+        this.isPastedStringTimeValid = (value) => {
+            if (this.isHHMMFormat()) {
+                if (/^\d{2}:\d{2}$/.test(value)) {
+                    return value;
+                }
+            }
+            else {
+                if (/^\d{2}:\d{2}:\d{2}$/.test(value)) {
+                    return value;
+                }
+                if (/^\d{2}:\d{2}:\d{2}Z$/.test(value)) {
+                    return value.replace("Z", "");
+                }
+                const isoMatch = value.match(/T(\d{2}:\d{2}:\d{2})/);
+                if (isoMatch) {
+                    return isoMatch[1];
+                }
+            }
+            return false;
+        };
+        this.setPastedValueAndValidation = (isValidTime, pastedValue, event) => {
+            if (isValidTime) {
+                const timeParts = isValidTime.split(":");
+                this.inputsInOrder.forEach((input, index) => {
+                    input.classList.add(this.FIT_TO_VALUE);
+                    const timeValue = timeParts[index] || "";
+                    input.value = timeValue.slice(0, 2);
+                    this.setInputValue(input);
+                    this.autocompleteInput(input);
+                });
+                if (this.isHHMMFormat() && this.second !== "") {
+                    this.second = "";
+                }
+            }
+            else {
+                const pasted = pastedValue.trim();
+                if ((pasted.length === 1 || pasted.length === 2) && isNumeric(pasted)) {
+                    this.setInputPasteValue(event.target, pasted);
+                    this.setInputValue(event.target);
+                }
+                else {
+                    this.invalidTimeText = `Please paste a valid ${event.target.getAttribute(this.ARIA_LABEL)}`;
+                    this.validationStatus = IcInformationStatus.Error;
+                }
+            }
+        };
+    }
+    watchInputHandler() {
+        if (this.emitTimePartChange &&
+            !this.externalSetTime &&
+            !this.clearInput &&
+            !(this.hour && this.minute && this.second) &&
+            this.selectedTime === null) {
+            this.emitIcChange(this.selectedTime);
+        }
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    watchMaxHandler() {
+        this.maxTime = this.parseTime(this.max);
+    }
+    watchMinHandler() {
+        this.minTime = this.parseTime(this.min);
+    }
+    watchRequiredHandler() {
+        var _a, _b;
+        const labelEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("label");
+        if (this.required) {
+            const asteriskSpan = document.createElement("span");
+            asteriskSpan.setAttribute("id", "asterisk-span");
+            asteriskSpan.setAttribute("aria-hidden", "true");
+            asteriskSpan.textContent = " *";
+            labelEl === null || labelEl === void 0 ? void 0 : labelEl.appendChild(asteriskSpan);
+        }
+        else {
+            const asteriskSpan = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("#asterisk-span");
+            if (asteriskSpan) {
+                asteriskSpan.remove();
+            }
+        }
+    }
+    disconnectedCallback() {
+        removeFormResetListener(this.el, this.handleFormReset);
+    }
+    componentWillLoad() {
+        this.defaultHelperText = `Use format ${this.timeFormat}`;
+        if (isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        if (this.value) {
+            this.externalSetTime = true;
+            this.setTime(this.value);
+        }
+        this.screenReaderInfoId = `${this.inputId}-screen-reader-info`;
+        this.assistiveHintId = `${this.inputId}-assistive-hint`;
+        this.selectedTimeInfoId = `${this.inputId}-selected-time-info`;
+        addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        this.setInputsInOrder();
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Time Input");
+        if (this.value) {
+            this.updateInputValues(this.hour, this.minute, this.second);
+            this.inputsInOrder.forEach((input) => {
+                input.classList.add(this.FIT_TO_VALUE);
+            });
+        }
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        if (this.value) {
+            this.notifyScreenReaderSelectedTime();
+        }
+        this.inputsInOrder.forEach((input) => {
+            input.addEventListener("input", this.handleInput);
+            input.addEventListener("focus", this.handleFocus);
+            input.addEventListener("blur", this.handleBlur);
+        });
+        this.watchRequiredHandler();
+    }
+    componentWillUpdate() {
+        if (isEmptyString(this.helperText))
+            this.helperText = this.defaultHelperText;
+        if (!this.isTimeSetFromKeyboardEvent)
+            this.setTime(this.value);
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        this.handleTimeChange(false);
+        this.isTimeSetFromKeyboardEvent = false;
+    }
+    componentDidRender() {
+        if (this.removeLabelledBy) {
+            this.removeAriaLabelledBy();
+            return;
+        }
+        this.setAriaLabelledBy();
+    }
+    /**
+     * Returns the value as a Date object
+     * @returns Date
+     */
+    async getTime() {
+        return this.selectedTime;
+    }
+    /**
+     * @internal Used to enable other components to invoke an IcChange event from the input.
+     */
+    async triggerIcChange(t) {
+        this.externalSetTime = true;
+        this.setTime(t);
+        this.emitIcChange(t);
+        this.externalSetTime = false;
+    }
+    render() {
+        const { inputId, label, disabled, helperText, hideHelperText, hideLabel, showClearButton, showClockButton, size, theme, } = this;
+        const hasCustomValidation = !isEmptyString(this.validationStatus);
+        const validationStatus = hasCustomValidation
+            ? this.validationStatus
+            : !isEmptyString(this.invalidTimeText)
+                ? IcInformationStatus.Error
+                : "";
+        const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
+        renderHiddenInput(true, this.el, this.name, this.convertToTime(this.hour, this.minute, this.second), this.disabled);
+        const showDivider = !!(showClearButton &&
+            !(isEmptyString(this.hour) &&
+                isEmptyString(this.minute) &&
+                isEmptyString(this.second)));
+        return (h(Host, { key: 'cf8b05ab0ccc0a0a779296e4dd3ba52375547b13', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-time-input-disabled`]: disabled,
+                [`ic-time-input-${size}`]: true,
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'b104968d5b191f040358a7e800f11cb6dd036407', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: 'fa0eaeef4aab6aef24b830e466ba87d68eb84b84', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'e4548928534459ff788ff576483b560cf90fed53', name: "helper-text", slot: "helper-text" }))), h("span", { key: '6f119c460880a9adb8661309c3a59cfee061ae7c', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'bd5ce20dab45d2514cd4219eee0d1645596e5e6e', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'e3d4a1e518f7bcb1b35ee065b5f038f9f6f3ffe7', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '396b05aa89aa0e24a1853cc5de20abb5341c49e5', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '2ac49a3454ce8dbabb546e54af197f0a66840499', class: "input-container" }, h("div", { key: '6917d370b61c997d888c133bb27d5fa8f94a79c0', class: "time-inputs" }, [
+            this.getInputsInOrder()[0],
+            ":",
+            this.getInputsInOrder()[1],
+            !this.isHHMMFormat()
+                ? [":", this.getInputsInOrder()[2]]
+                : null,
+        ]), h("div", { key: 'f09f3442355e75170fb1916727fdcac001df885d', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '27173fcbdcd13798c4adc66eda9469bc471693ea', id: "clear-button", "aria-label": "Clear input", class: {
+                ["clear-button"]: true,
+                ["hidden"]: isEmptyString(this.hour) &&
+                    isEmptyString(this.minute) &&
+                    isEmptyString(this.second),
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showClockButton && (h("div", { key: '606a05c923fc4b95c21d0418be14168982117938', class: "show-clock-button-wrapper" }, h("div", { key: '4b9b2d37ed3a9661615685f3b077ac244295fbd1', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: 'ab6ec2ca4b1442a23834e1a514800cd0f77c92d5', id: "clock-button", "aria-label": "Display clock", "aria-haspopup": "dialog", class: "clock-button", disabled: this.disabled, innerHTML: Clock, variant: "icon-tertiary", size: size, onFocus: this.handleClockFocus, onBlur: this.handleClockBlur, theme: this.clockFocused ? "light" : "dark" })))))), h("span", { key: '1695846e5d626056f5a0e372c8513fcf0001f0b9', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '34f41adff4bc3642d21014b85e525b6f80814bb6', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidTimeText)) && (h("ic-input-validation", { key: '4b9326e9e9df98698c2c6643262122658a1434de', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId })))));
+    }
+    static get is() { return "ic-time-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-time-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-time-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the disabled state will be set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableTimes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDisableTimeSelection[]",
+                    "resolved": "IcDisableTimeSelection[]",
+                    "references": {
+                        "IcDisableTimeSelection": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcDisableTimeSelection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of times that will be disabled in the time input. The times can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "emitTimePartChange": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, every individual input field completed will emit an icChange event."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emit-time-part-change",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper text that will be displayed for additional field guidance. This will default to the text \"Use format\" along with the `timeFormat` value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper-text",
+                "reflect": false
+            },
+            "hideHelperText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the helper text will be visually hidden, but still read out by screenreaders."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-helper-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the label will be visually hidden, but will still be read out by screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-id",
+                "reflect": false,
+                "defaultValue": "`ic-time-input-${inputIds++}`"
+            },
+            "invalidTimeMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message when an invalid time is entered."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid-time-message",
+                "reflect": false,
+                "defaultValue": "\"Please enter a valid time.\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the time input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The latest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The earliest time that will be allowed. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the control, which is submitted with the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.inputId"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the input will require a value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showClearButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, a button which clears the time input when clicked will be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-clear-button",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showClockButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "If `true`, a button which displays the clock view when clicked will be displayed."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-clock-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the time input to be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the time picker to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "timeFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcTimeFormat",
+                    "resolved": "\"HH:MM\" | \"HH:MM:SS\"",
+                    "references": {
+                        "IcTimeFormat": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcTimeFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The format in which the time will be displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time-format",
+                "reflect": false,
+                "defaultValue": "this.DEFAULT_TIME_FORMAT"
+            },
+            "timePeriod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"12\" | \"24\"",
+                    "resolved": "\"12\" | \"24\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The time period format: \"12\" for 12-hour, \"24\" for 24-hour. Defaults to \"24\"."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time-period",
+                "reflect": false,
+                "defaultValue": "\"24\""
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | Date | null | undefined",
+                    "resolved": "Date | null | string | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the time input. The value can be in any format supported as `timeFormat`, in ISO 8601 time string format (`HH:MM:SS`) or as a JavaScript `Date` object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "validationStatus": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcInformationStatusOrEmpty",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IcInformationStatusOrEmpty": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcInformationStatusOrEmpty"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation status - e.g. 'error' | 'warning' | 'success'. This will override the built-in time validation."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "validation-status",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "validationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text to display as the validation message. This will override the built-in time validation."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "validation-text",
+                "reflect": false,
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "invalidTimeText": {},
+            "clockFocused": {},
+            "clearButtonFocused": {},
+            "removeLabelledBy": {},
+            "hour": {},
+            "minute": {},
+            "second": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clockButtonClicked",
+                "name": "clockButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Emitted when the clock is opened."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icBlur",
+                "name": "icBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icChange",
+                "name": "icChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value has changed."
+                },
+                "complexType": {
+                    "original": "{\n    value: Date | null;\n    timeObject: {\n      hour: string | null;\n      minute: string | null;\n      second: string | null;\n    };\n  }",
+                    "resolved": "{ value: Date | null; timeObject: { hour: string | null; minute: string | null; second: string | null; }; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }, {
+                "method": "icFocus",
+                "name": "icFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input gains focus."
+                },
+                "complexType": {
+                    "original": "{ value: Date | null }",
+                    "resolved": "{ value: Date | null; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getTime": {
+                "complexType": {
+                    "signature": "() => Promise<Date | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<Date | null>"
+                },
+                "docs": {
+                    "text": "Returns the value as a Date object",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Date"
+                        }]
+                }
+            },
+            "triggerIcChange": {
+                "complexType": {
+                    "signature": "(t: Date | null) => Promise<void>",
+                    "parameters": [{
+                            "name": "t",
+                            "type": "Date | null",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to enable other components to invoke an IcChange event from the input."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hour",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "minute",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "second",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }, {
+                "propName": "max",
+                "methodName": "watchMaxHandler"
+            }, {
+                "propName": "min",
+                "methodName": "watchMinHandler"
+            }, {
+                "propName": "required",
+                "methodName": "watchRequiredHandler"
+            }];
+    }
+}
+//# sourceMappingURL=ic-time-input.js.map