@ukic/canary-web-components 3.0.0-canary.32 → 3.0.0-canary.33

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

@@ -1,7 +1,7 @@
 /* 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 { isEmptyString, isNumeric, addFormResetListener, getInputDescribedByText, onComponentRequiredPropUndefined, removeDisabledFalse, removeFormResetListener, renderHiddenInput, parseTimeHelper, } from "../../utils/helpers";
 import Clear from "../../assets/clear-icon.svg";
 import Clock from "../../assets/clock.svg";
 let inputIds = 0;
@@ -11,6 +11,7 @@ let inputIds = 0;
 export class TimeInput {
     constructor() {
         this.DEFAULT_TIME_FORMAT = "HH:MM:SS";
+        this.TOGGLE_BUTTON_SELECTOR = "ic-toggle-button";
         this.ARIA_INVALID = "aria-invalid";
         this.ARIA_LABEL = "aria-label";
         this.ARIA_LABELLED_BY = "aria-labelledby";
@@ -21,6 +22,7 @@ export class TimeInput {
         this.isValidHour = true;
         this.isValidMinute = true;
         this.isValidSecond = true;
+        this.isValidMillisecond = true;
         this.isValidTime = true;
         this.isTimeSetFromKeyboardEvent = false;
         this.previousSelectedTime = null;
@@ -29,12 +31,20 @@ export class TimeInput {
         this.clearInput = false;
         this.maxTime = null;
         this.minTime = null;
+        this.previousHour = "";
+        this.previousMinute = "";
+        this.previousSecond = "";
+        this.previousMillisecond = "";
+        this.previousPeriod = "AM";
         this.clockFocused = false;
         this.clearButtonFocused = false;
         this.removeLabelledBy = false;
         this.hour = "";
         this.minute = "";
         this.second = "";
+        this.millisecond = "";
+        this.period = "AM";
+        this.isSSSFormat = () => this.timeFormat === "HH:MM:SS.SSS";
         /**
          * If `true`, the disabled state will be set.
          */
@@ -44,7 +54,7 @@ export class TimeInput {
          */
         this.disableTimes = [];
         /**
-         * If `true`, every individual input field completed will emit an icChange event.
+         * If `true`, every individual input field completed will emit an icTimeChange event.
          */
         this.emitTimePartChange = false;
         /**
@@ -79,6 +89,10 @@ export class TimeInput {
          * If `true`, the input will require a value.
          */
         this.required = false;
+        /**
+         * If `true`, the time input will show an AM/PM toggle when in 12-hour time period.
+         */
+        this.showAmPmToggle = false;
         /**
          * If `true`, a button which clears the time input when clicked will be displayed.
          */
@@ -126,19 +140,6 @@ export class TimeInput {
                 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 ||
@@ -166,9 +167,22 @@ export class TimeInput {
                 else {
                     this.isValidSecond = true;
                 }
+                if (this.isSSSFormat()) {
+                    if (!isEmptyString(this.millisecond)) {
+                        this.isValidMillisecond =
+                            +this.millisecond >= 0 && +this.millisecond <= 999;
+                    }
+                    else {
+                        this.isValidMillisecond = true;
+                    }
+                }
+                else {
+                    this.isValidMillisecond = true;
+                }
             }
             else {
                 this.isValidSecond = true;
+                this.isValidMillisecond = true;
             }
         };
         this.setInputValue = (input, clear = false) => {
@@ -182,6 +196,9 @@ export class TimeInput {
             else if (input === this.secondInputEl && !this.isHHMMFormat()) {
                 this.second = newValue;
             }
+            else if (this.isSSSFormat() && input === this.millisecondInputEl) {
+                this.millisecond = newValue;
+            }
             this.setValidationMessage();
         };
         this.setPreventInput = (input, isPrevented) => {
@@ -194,22 +211,50 @@ export class TimeInput {
             else if (input === this.secondInputEl) {
                 this.preventSecondInput = isPrevented;
             }
+            else if (this.isSSSFormat() && input === this.millisecondInputEl) {
+                this.preventMillisecondInput = isPrevented;
+            }
         };
         this.setValidationMessage = () => {
-            this.maxTime = this.parseTime(this.max);
-            this.minTime = this.parseTime(this.min);
+            this.maxTime = parseTimeHelper(this.max).date;
+            this.minTime = parseTimeHelper(this.min).date;
             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);
+                (this.isHHMMFormat() || !isEmptyString(this.second)) &&
+                (!this.isSSSFormat() || !isEmptyString(this.millisecond))) {
+                this.selectedTime = this.convertToTime(this.hour, this.minute, this.isHHMMFormat() ? "00" : this.second, this.isSSSFormat() ? this.millisecond : "000");
+                const inputHour = +this.hour;
+                const selectedHour = this.selectedTime
+                    ? this.selectedTime.getHours()
+                    : null;
+                if (this.timePeriod === "12" &&
+                    this.showAmPmToggle &&
+                    selectedHour !== null) {
+                    let selectedHour12 = selectedHour % 12;
+                    if (selectedHour12 === 0)
+                        selectedHour12 = 12;
+                    this.isValidTime =
+                        !!this.selectedTime &&
+                            selectedHour12 == inputHour &&
+                            this.selectedTime.getMinutes() == +this.minute &&
+                            (this.isHHMMFormat() ||
+                                this.selectedTime.getSeconds() == +this.second) &&
+                            (!this.isSSSFormat() ||
+                                this.selectedTime.getMilliseconds() == +this.millisecond);
+                }
+                else {
+                    this.isValidTime =
+                        !!this.selectedTime &&
+                            this.selectedTime.getHours() == inputHour &&
+                            this.selectedTime.getMinutes() == +this.minute &&
+                            (this.isHHMMFormat() ||
+                                this.selectedTime.getSeconds() == +this.second) &&
+                            (!this.isSSSFormat() ||
+                                this.selectedTime.getMilliseconds() == +this.millisecond);
+                }
                 if (this.selectedTime &&
                     Array.isArray(this.disableTimes) &&
                     this.disableTimes.length > 0) {
@@ -218,18 +263,25 @@ export class TimeInput {
                             t !== null &&
                             "start" in t &&
                             "end" in t) {
-                            const start = this.parseTime(t.start);
-                            const end = this.parseTime(t.end);
+                            const start = parseTimeHelper(t.start).date;
+                            const end = parseTimeHelper(t.end).date;
                             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());
+                        const parsed = parseTimeHelper(t).parts;
+                        if (!parsed)
+                            return false;
+                        let selectedHour = this.selectedTime.getHours();
+                        let parsedHour = parsed.hour;
+                        if (this.timePeriod === "12" && this.showAmPmToggle) {
+                            selectedHour = this.convertTo24Hour(selectedHour);
+                            parsedHour = this.convertTo24Hour(parsedHour);
+                        }
+                        return (parsedHour === selectedHour &&
+                            parsed.minute === this.selectedTime.getMinutes() &&
+                            parsed.second === this.selectedTime.getSeconds());
                     });
                     if (isDisabledTime) {
                         this.isValidTime = false;
@@ -259,6 +311,7 @@ export class TimeInput {
             if (!(this.isValidHour &&
                 this.isValidMinute &&
                 this.isValidSecond &&
+                this.isValidMillisecond &&
                 this.isValidTime)) {
                 this.invalidTimeText = outOfBoundsMsg || this.invalidTimeMessage;
             }
@@ -270,12 +323,33 @@ export class TimeInput {
             const hh = time.getHours().toString().padStart(2, "0");
             const mm = time.getMinutes().toString().padStart(2, "0");
             const ss = time.getSeconds().toString().padStart(2, "0");
+            const sss = time.getMilliseconds().toString().padStart(3, "0");
+            if (this.isSSSFormat()) {
+                return `${hh}:${mm}:${ss}.${sss}`;
+            }
             return this.isHHMMFormat() ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`;
         };
         this.handleInput = (event) => {
             const inputEvent = event;
             const input = event.target;
-            if (input !== this.hourInputEl) {
+            if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                this.setInputValue(input);
+                this.setPreventInput(input, false);
+                this.setFitToValueStyling(input);
+                if (input.value.length === 3) {
+                    this.moveToNextInput(input);
+                    this.setPreventInput(input, true);
+                }
+                else {
+                    this.setPreventInput(input, false);
+                }
+                if (input.value.length === 0) {
+                    this.setInputValue(input, true);
+                    this.setValidationMessage();
+                }
+                this.notifyScreenReader(input);
+            }
+            else if (input !== this.hourInputEl) {
                 if (inputEvent.inputType !== "deleteContentBackward" &&
                     !this.preventAutoFormatting) {
                     if (input.value.length === 1 &&
@@ -308,6 +382,12 @@ export class TimeInput {
                 if (input.value.length !== 2) {
                     this.setPreventInput(input, false);
                 }
+                this.setFitToValueStyling(input);
+                if (input.value.length === 0) {
+                    this.setInputValue(input, true);
+                    this.setValidationMessage();
+                }
+                this.notifyScreenReader(input);
             }
             else {
                 if (input.value.length === 2) {
@@ -321,18 +401,25 @@ export class TimeInput {
                     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.setFitToValueStyling(input);
-            if (input.value.length === 0) {
-                this.setInputValue(input, true);
-                this.setValidationMessage();
-            }
-            this.notifyScreenReader(input);
         };
         this.handleKeyDown = (event, isInputPrevented) => {
             var _a;
+            const navKeys = /arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/i;
             const input = event.target;
             const eventKey = (_a = event.key) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+            if (!/-?\d*\.?\d+(e[-+]?\d+)?|[:]|[.]/i.test(eventKey) &&
+                !navKeys.test(eventKey) &&
+                !((event.ctrlKey || event.metaKey) &&
+                    (eventKey === "v" || eventKey === "c"))) {
+                event.preventDefault();
+            }
             const regex = /-?\d*\.?\d+(e[-+]?\d+)?|[:]|arrowup|arrowdown|arrowleft|arrowright|shift|tab|backspace|delete/;
             if (!regex.test(eventKey) &&
                 !((event.ctrlKey || event.metaKey) &&
@@ -372,7 +459,18 @@ export class TimeInput {
         };
         this.handleBlur = (event) => {
             const input = event.target;
-            if (input) {
+            if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                if (input.value.length === 1) {
+                    input.value = `00${input.value}`;
+                    this.setInputValue(input);
+                }
+                else if (input.value.length === 2) {
+                    input.value = `0${input.value}`;
+                    this.setInputValue(input);
+                }
+                this.setFitToValueStyling(input);
+            }
+            else if (input) {
                 this.autocompleteInput(input);
             }
         };
@@ -428,20 +526,80 @@ export class TimeInput {
         };
         this.setValueAndEmitChange = (value, force = false) => {
             if (this.value !== value || force) {
-                this.emitIcChange(value);
+                this.emitIcTimeChange(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.convertTo24Hour = (hour) => {
+            let date24hours = hour;
+            if (this.period === "PM" && hour < 12)
+                date24hours = hour + 12;
+            if (this.period === "AM" && hour === 12)
+                date24hours = 0;
+            return date24hours;
+        };
+        this.emitIcTimeChange = (t) => {
+            const hour = parseInt(this.hour);
+            const minute = parseInt(this.minute);
+            const second = parseInt(this.second);
+            const millisecond = parseInt(this.millisecond);
+            const period = this.period;
+            let allSelected = false;
+            if (this.isSSSFormat()) {
+                allSelected =
+                    this.hour !== "" &&
+                        this.minute !== "" &&
+                        this.second !== "" &&
+                        this.millisecond !== "";
+            }
+            else if (this.timeFormat === this.DEFAULT_TIME_FORMAT) {
+                allSelected =
+                    this.hour !== "" && this.minute !== "" && this.second !== "";
+            }
+            else if (this.timeFormat === "HH:MM") {
+                allSelected = this.hour !== "" && this.minute !== "";
+            }
+            let time = t;
+            let date24hours = hour;
+            if (hour != null &&
+                period &&
+                this.timePeriod === "12" &&
+                this.showAmPmToggle) {
+                date24hours = this.convertTo24Hour(hour);
+                time = new Date();
+                time.setHours(date24hours !== null && date24hours !== void 0 ? date24hours : 0);
+                time.setMinutes(minute !== null && minute !== void 0 ? minute : 0);
+                time.setSeconds(second !== null && second !== void 0 ? second : 0);
+                this.isSSSFormat() && time.setMilliseconds(millisecond !== null && millisecond !== void 0 ? millisecond : 0);
+            }
+            this.selectedTime = time;
+            const allTimePartsEmpty = this.hour === "" &&
+                this.minute === "" &&
+                this.second === "" &&
+                this.millisecond === "";
+            const onlyPeriodChanged = allTimePartsEmpty &&
+                this.period !== this.previousPeriod &&
+                this.previousHour === "" &&
+                this.previousMinute === "" &&
+                this.previousSecond === "" &&
+                this.previousMillisecond === "";
+            if (!onlyPeriodChanged) {
+                this.icTimeChange.emit({
+                    value: allSelected ? time : null,
+                    timeObject: {
+                        hour: this.hour === "" ? null : this.hour,
+                        minute: this.minute === "" ? null : this.minute,
+                        second: this.second === "" ? null : this.second,
+                        millisecond: this.millisecond === "" ? null : this.millisecond,
+                        period: this.period === "" ? null : this.period,
+                    },
+                });
+            }
+            this.previousHour = this.hour;
+            this.previousMinute = this.minute;
+            this.previousSecond = this.second;
+            this.previousMillisecond = this.millisecond;
+            this.previousPeriod = this.period;
         };
         this.setTime = (time) => {
             if (time === null || time === "" || time === undefined) {
@@ -451,6 +609,8 @@ export class TimeInput {
                     this.minute = "";
                 if (this.second)
                     this.second = "";
+                if (this.millisecond)
+                    this.millisecond = "";
                 this.inputsInOrder.forEach((input) => {
                     input.classList.remove(this.FIT_TO_VALUE);
                     this.setPreventInput(input, false);
@@ -466,22 +626,26 @@ export class TimeInput {
                         this.second = zuluMatch[3];
                     }
                     else {
-                        const parts = time.split(":");
+                        const parts = time.split(/[:.]/);
                         this.hour = parts[0] || "";
                         this.minute = parts[1] || "";
                         this.second = parts[2] || "";
+                        this.millisecond = parts[3] || "";
                     }
                 }
                 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");
+                    if (this.isSSSFormat()) {
+                        this.millisecond = time.getMilliseconds().toString().padStart(3, "0");
+                    }
                 }
             }
             this.setValidationMessage();
         };
-        this.setAriaInvalid = (validHour, validMinute, validSecond) => {
-            var _a, _b, _c;
+        this.setAriaInvalid = (validHour, validMinute, validSecond, validMillisecond) => {
+            var _a, _b, _c, _d;
             if (this.inputsInOrder.length) {
                 this.inputsInOrder.forEach((input) => {
                     input.removeAttribute(this.ARIA_INVALID);
@@ -495,7 +659,10 @@ export class TimeInput {
                 if (!validSecond) {
                     (_c = this.secondInputEl) === null || _c === void 0 ? void 0 : _c.setAttribute(this.ARIA_INVALID, "true");
                 }
-                if (!(validHour && validMinute && validSecond)) {
+                if (!validMillisecond) {
+                    (_d = this.millisecondInputEl) === null || _d === void 0 ? void 0 : _d.setAttribute(this.ARIA_INVALID, "true");
+                }
+                if (!(validHour && validMinute && validSecond && validMillisecond)) {
                     this.inputsInOrder.forEach((input) => {
                         input.setAttribute(this.ARIA_INVALID, "true");
                     });
@@ -503,6 +670,7 @@ export class TimeInput {
             }
         };
         this.handleClear = () => {
+            var _a;
             this.clearInput = true;
             if (this.hourInputEl) {
                 this.hourInputEl.value = "";
@@ -513,9 +681,25 @@ export class TimeInput {
             if (!this.isHHMMFormat() && this.secondInputEl) {
                 this.secondInputEl.value = "";
             }
+            if (this.isSSSFormat() && this.millisecondInputEl) {
+                this.millisecondInputEl.value = "";
+            }
             this.hour = "";
             this.minute = "";
             this.second = "";
+            this.millisecond = "";
+            this.period = "AM";
+            if (this.showAmPmToggle) {
+                (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                    const toggleBtn = btn;
+                    if (toggleBtn.label === "AM") {
+                        toggleBtn.checked = true;
+                    }
+                    else {
+                        toggleBtn.checked = false;
+                    }
+                });
+            }
             this.handleTimeChange(true);
             this.inputsInOrder.forEach((input) => {
                 input.classList.remove(this.FIT_TO_VALUE);
@@ -531,26 +715,31 @@ export class TimeInput {
         };
         this.notifyScreenReaderSelectedTime = () => {
             if (this.selectedTime && this.selectedTimeInfoEl) {
+                let hours = this.selectedTime.getHours();
+                if (this.timePeriod === "12" && this.showAmPmToggle) {
+                    hours = this.convertTo24Hour(hours);
+                }
+                const hoursStr = hours.toString().padStart(2, "0");
+                const minutesStr = this.selectedTime
+                    .getMinutes()
+                    .toString()
+                    .padStart(2, "0");
+                const secondsStr = this.selectedTime
+                    .getSeconds()
+                    .toString()
+                    .padStart(2, "0");
+                const msStr = this.selectedTime
+                    .getMilliseconds()
+                    .toString()
+                    .padStart(3, "0");
                 if (this.isHHMMFormat()) {
-                    this.selectedTimeInfoEl.textContent = `Selected time: ${this.selectedTime
-                        .getHours()
-                        .toString()
-                        .padStart(2, "0")}:${this.selectedTime
-                        .getMinutes()
-                        .toString()
-                        .padStart(2, "0")}`;
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}`;
+                }
+                else if (!this.isSSSFormat()) {
+                    this.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}:${secondsStr}`;
                 }
                 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.selectedTimeInfoEl.textContent = `Selected time: ${hoursStr}:${minutesStr}:${secondsStr}.${msStr}`;
                 }
             }
         };
@@ -568,7 +757,7 @@ export class TimeInput {
         };
         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$/)) {
+            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|millisecond)-input$/)) {
                 this.removeLabelledBy = false;
             }
             else {
@@ -617,12 +806,17 @@ export class TimeInput {
                 this.setInputValue(input);
             }
         };
-        this.convertToTime = (hour, minute, second) => {
+        this.convertToTime = (hour, minute, second, millisecond = null) => {
             if (!isEmptyString(hour) &&
                 !isEmptyString(minute) &&
-                (this.isHHMMFormat() || !isEmptyString(second))) {
+                (this.isHHMMFormat() || !isEmptyString(second)) &&
+                (!this.isSSSFormat() ||
+                    (millisecond !== null && !isEmptyString(millisecond)))) {
                 const d = new Date();
                 d.setHours(+hour, +minute, this.isHHMMFormat() ? 0 : +second, 0);
+                if (this.isSSSFormat() && millisecond !== null) {
+                    d.setMilliseconds(+millisecond);
+                }
                 return d;
             }
             else {
@@ -667,17 +861,22 @@ export class TimeInput {
             (_d = this.inputCompContainerEl) === null || _d === void 0 ? void 0 : _d.setAttribute(this.ARIA_LABELLED_BY, labelledBy);
         };
         this.getInputsInOrder = () => {
-            const timeParts = this.timeFormat.split(":");
+            const timeParts = this.timeFormat.split(/[:.]/);
             return timeParts.map((part) => {
-                switch (part.substring(0, 1)) {
-                    case "H":
+                switch (part) {
+                    case "HH":
                         return (h("input", { class: "hour-input", id: "hour-input", ref: (el) => (this.hourInputEl = el), "aria-label": "hour", placeholder: "HH", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventHourInput) }));
-                    case "M":
+                    case "MM":
                         return (h("input", { id: "minute-input", class: "minute-input", ref: (el) => (this.minuteInputEl = el), "aria-label": "minute", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMinuteInput) }));
-                    case "S":
+                    case "SS":
                         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, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventSecondInput) }));
                         }
+                        break;
+                    case "SSS":
+                        if (this.isSSSFormat()) {
+                            return (h("input", { id: "millisecond-input", class: "millisecond-input", ref: (el) => (this.millisecondInputEl = el), "aria-label": "millisecond", placeholder: "SSS", disabled: this.disabled, "aria-required": `${this.required}`, inputmode: "number", pattern: "[0-9]*", onPaste: this.handlePaste, onKeyDown: (event) => this.handleKeyDown(event, this.preventMillisecondInput) }));
+                        }
                         return null;
                     default:
                         return null;
@@ -685,6 +884,9 @@ export class TimeInput {
             });
         };
         this.getDescOfInputsOrder = () => {
+            if (this.isSSSFormat()) {
+                return "hour, minute, second, and millisecond";
+            }
             return "hour, minute, and second";
         };
         this.getScreenReaderInfo = (validationStatus) => {
@@ -724,7 +926,7 @@ export class TimeInput {
                 this.removeLabelledBy = false;
                 return;
             }
-            if (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id.match(/(minute|second)-input$/)) {
+            if (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.id.match(/(minute|second|millisecond)-input$/)) {
                 this.removeLabelledBy = false;
                 return;
             }
@@ -742,6 +944,18 @@ export class TimeInput {
                     return value;
                 }
             }
+            else if (this.isSSSFormat()) {
+                if (/^\d{2}:\d{2}:\d{2}\.\d{1,3}$/.test(value)) {
+                    return value;
+                }
+                if (/^\d{2}:\d{2}:\d{2}\.\d{1,3}Z$/.test(value)) {
+                    return value.replace("Z", "");
+                }
+                const isoMatch = value.match(/T(\d{2}:\d{2}:\d{2}\.\d{1,3})/);
+                if (isoMatch) {
+                    return isoMatch[1];
+                }
+            }
             else {
                 if (/^\d{2}:\d{2}:\d{2}$/.test(value)) {
                     return value;
@@ -758,16 +972,78 @@ export class TimeInput {
         };
         this.setPastedValueAndValidation = (isValidTime, pastedValue, event) => {
             if (isValidTime) {
-                const timeParts = isValidTime.split(":");
+                const timeParts = isValidTime.split(/[:.]/);
                 this.inputsInOrder.forEach((input, index) => {
+                    var _a, _b, _c, _d;
                     input.classList.add(this.FIT_TO_VALUE);
-                    const timeValue = timeParts[index] || "";
-                    input.value = timeValue.slice(0, 2);
+                    let timeValue = timeParts[index] || "";
+                    if (input === this.millisecondInputEl && this.isSSSFormat()) {
+                        timeValue = timeValue.slice(0, 3);
+                    }
+                    else {
+                        timeValue = timeValue.slice(0, 2);
+                    }
+                    if (input === this.hourInputEl) {
+                        let activeToggle;
+                        if (this.timePeriod === "12" && this.showAmPmToggle) {
+                            if (parseInt(timeValue) > 12) {
+                                timeValue = (parseInt(timeValue) - 12)
+                                    .toString()
+                                    .padStart(2, "0");
+                                if (parseInt(timeValue) > 12) {
+                                    return;
+                                }
+                                else {
+                                    this.period = "PM";
+                                    (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                                        const toggleBtn = btn;
+                                        if (toggleBtn.label === "PM") {
+                                            activeToggle = toggleBtn;
+                                        }
+                                        else {
+                                            toggleBtn.checked = false;
+                                        }
+                                    });
+                                    if (activeToggle) {
+                                        (_b = this.periodToggleEl) === null || _b === void 0 ? void 0 : _b.setActiveToggle(activeToggle);
+                                        activeToggle.checked = true;
+                                    }
+                                    this.invalidTimeText = "";
+                                    this.validationStatus = "";
+                                }
+                            }
+                            else {
+                                if (parseInt(timeValue) === 0) {
+                                    timeValue = "12";
+                                }
+                                this.period = "AM";
+                                (_c = this.periodToggleEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll(this.TOGGLE_BUTTON_SELECTOR).forEach((btn) => {
+                                    const toggleBtn = btn;
+                                    if (toggleBtn.label === "AM") {
+                                        activeToggle = toggleBtn;
+                                    }
+                                    else {
+                                        toggleBtn.checked = false;
+                                    }
+                                });
+                                if (activeToggle) {
+                                    (_d = this.periodToggleEl) === null || _d === void 0 ? void 0 : _d.setActiveToggle(activeToggle);
+                                    activeToggle.checked = true;
+                                }
+                                this.invalidTimeText = "";
+                                this.validationStatus = "";
+                            }
+                        }
+                    }
+                    input.value = timeValue;
                     this.setInputValue(input);
                     this.autocompleteInput(input);
                 });
-                if (this.isHHMMFormat() && this.second !== "") {
+                if (this.isHHMMFormat() &&
+                    this.second !== "" &&
+                    this.millisecond !== "") {
                     this.second = "";
+                    this.millisecond = "";
                 }
             }
             else {
@@ -782,14 +1058,22 @@ export class TimeInput {
                 }
             }
         };
+        this.handleAMPM = (selectedOption) => {
+            var _a;
+            this.period = selectedOption.label;
+            (_a = this.periodToggleEl) === null || _a === void 0 ? void 0 : _a.setActiveToggle(selectedOption);
+        };
     }
     watchInputHandler() {
         if (this.emitTimePartChange &&
             !this.externalSetTime &&
             !this.clearInput &&
-            !(this.hour && this.minute && this.second) &&
+            !(this.hour &&
+                this.minute &&
+                this.second &&
+                (this.isSSSFormat() ? this.millisecond : true)) &&
             this.selectedTime === null) {
-            this.emitIcChange(this.selectedTime);
+            this.emitIcTimeChange(this.selectedTime);
         }
     }
     watchDisabledHandler() {
@@ -800,10 +1084,10 @@ export class TimeInput {
             this.helperText = this.defaultHelperText;
     }
     watchMaxHandler() {
-        this.maxTime = this.parseTime(this.max);
+        this.maxTime = parseTimeHelper(this.max).date;
     }
     watchMinHandler() {
-        this.minTime = this.parseTime(this.min);
+        this.minTime = parseTimeHelper(this.min).date;
     }
     watchRequiredHandler() {
         var _a, _b;
@@ -852,7 +1136,7 @@ export class TimeInput {
                 input.classList.add(this.FIT_TO_VALUE);
             });
         }
-        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond, this.isValidMillisecond);
         if (this.value) {
             this.notifyScreenReaderSelectedTime();
         }
@@ -866,7 +1150,7 @@ export class TimeInput {
     componentWillUpdate() {
         if (!this.isTimeSetFromKeyboardEvent)
             this.setTime(this.value);
-        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond);
+        this.setAriaInvalid(this.isValidHour, this.isValidMinute, this.isValidSecond, this.isValidMillisecond);
         this.handleTimeChange(false);
         this.isTimeSetFromKeyboardEvent = false;
     }
@@ -885,12 +1169,12 @@ export class TimeInput {
         return this.selectedTime;
     }
     /**
-     * @internal Used to enable other components to invoke an IcChange event from the input.
+     * @internal Used to enable other components to invoke an icTimeChange event from the input.
      */
-    async triggerIcChange(t) {
+    async triggerIcTimeChange(t) {
         this.externalSetTime = true;
         this.setTime(t);
-        this.emitIcChange(t);
+        this.emitIcTimeChange(t);
         this.externalSetTime = false;
     }
     render() {
@@ -907,23 +1191,39 @@ export class TimeInput {
             !(isEmptyString(this.hour) &&
                 isEmptyString(this.minute) &&
                 isEmptyString(this.second)));
-        return (h(Host, { key: 'b4330a85fcd6bf99ace98ba735759e0e98ebea69', class: {
+        if (this.showAmPmToggle && this.timePeriod !== "12") {
+            this.showAmPmToggle = false;
+        }
+        return (h(Host, { key: 'd005982324084fad9fdfe6392cf879e15709d2ef', 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: 'e61ccf4dc81c26e14bf37e388aeb60fd25b4abd7', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '7bda8a8034ae7b80594341f6924d561abcbbab90', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: 'da6a06701686398f4a44b71e76db5d02da897631', name: "helper-text", slot: "helper-text" }))), h("span", { key: '62e88d54d2f445778e96be67949b1a82fc272955', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '0a80156ecc1ddf0dea39033cc78de875ab7fa532', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '09d36876b7dc4d8050bcb0e7d39a0b008bab4a12', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '6bb2743ce8c211b4500d707bf0a2ce10245dc31c', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '02a184415c1f445340b3d4a3097b28a79cd258fe', class: "input-container" }, h("div", { key: 'a68248f5ad7a134ebe73456268b6f9cf07a35afa', class: "time-inputs" }, [
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: '6fcc48d72a92ef2a0acf3f6b109e29b24c6608db', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '84364f527bbfeffed22d95df1ce879bb9cb55fde', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: '4a993ddc9a3923e4fbe58f4abfd1d6f51ef63494', name: "helper-text", slot: "helper-text" }))), h("span", { key: 'de2889971bef74376661a3fb0963c9bc88673e12', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: 'b68b686d6794d6ad1247f18c867b1652066b48da', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '56557e76da321f937be614926cd3f41b4c9a09a8', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("div", { key: '89cbb13ffe21d66fd82a28ad6b5b295cf68c5787', class: {
+                "with-am-pm-toggle": this.showAmPmToggle === true,
+            } }, h("ic-input-component-container", { key: '03a61c8d72f43d68f81069327aa31b632bfee74d', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '0fdf9d4191272a8b53e73d6230e10750032d5279', class: "input-container" }, h("div", { key: 'c7b13f330ec67b48e817f4b87fff96ad6ad6102e', class: "time-inputs" }, [
             this.getInputsInOrder()[0],
             ":",
             this.getInputsInOrder()[1],
             !this.isHHMMFormat()
                 ? [":", this.getInputsInOrder()[2]]
                 : null,
-        ]), h("div", { key: '095391d922701f29a7debfd2482723fe05d1fdeb', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '8690a529f57705b60ecbc3122925557803197ed8', id: "clear-button", "aria-label": "Clear input", class: {
+            this.isSSSFormat()
+                ? [".", this.getInputsInOrder()[3]]
+                : null,
+        ]), h("div", { key: 'caf4926b8008875a111f6bb3aa0815cfb2e10768', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '9883c16dc3d60c6ea4d9d3cc3e4a770479339879', 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: '83fe94cb9dc7b16f70049b36644d62f714e03c6f', class: "show-clock-button-wrapper" }, h("div", { key: '34171a16f8058ad79af9ac3bfeb9c2aea06c0c91', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: '3290691bc0e95d300e526052934efbc93e806e62', 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: 'b44af8625ff62cf77e8be3e88d62bcb411bd5dc0', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: 'a68f8dac81536f4f14302d7be6151a20c7e92024', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: 'c152fd0a46420a430bb61f619dbbb395f1dd41cb', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
+            }, 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: '9ace5895419381c300bbdc5c8ef2eeacad05b63b', class: "show-clock-button-wrapper" }, h("div", { key: 'dfa2a5bbf9e7bd74353d7caf3514861d545d6026', class: { divider: showDivider, [size]: true } }), h("ic-button", { key: '1c36dcf4f02a323aafeb265126e2d1334df077b2', 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" })))))), this.showAmPmToggle && (h("ic-toggle-button-group", { key: 'c63749fddcc1b7ed3c394a17a5d1a65aa322f024', "select-type": "single", "accessible-label": "AM PM Toggle", ref: (el) => (this.periodToggleEl = el), disabled: disabled, class: "am-pm-toggle", "select-method": "auto", onIcChange: (e) => this.handleAMPM(e.detail.selectedOption), onKeyDown: (e) => {
+                if (e.key === "Tab" && e.shiftKey) {
+                    e.preventDefault();
+                    if (this.inputsInOrder && this.inputsInOrder.length > 0) {
+                        const lastInput = this.inputsInOrder[this.inputsInOrder.length - 1];
+                        lastInput === null || lastInput === void 0 ? void 0 : lastInput.focus();
+                    }
+                }
+            } }, h("ic-toggle-button", { key: 'fc731674e7c26846a969768ddc77b94b14c6cca6', label: "AM", disabled: disabled, checked: true }), h("ic-toggle-button", { key: '89e0bd48a39a8e786fcac5e034358edd560f4136', label: "PM", disabled: disabled })))), h("span", { key: '52854ea1dc4a1c4e7783914ff90bf204848a2e6e', id: this.selectedTimeInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '065c89020778df53ae78d037ef62feb189b7fdba', ref: (el) => (this.selectedTimeInfoEl = el), role: "status" })), h("ic-input-validation", { key: 'fc2500bef0e8e077272424a46663a85509a160c3', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidTimeText, for: inputId, ariaLiveMode: validationAriaLive }))));
     }
     static get is() { return "ic-time-input"; }
     static get encapsulation() { return "shadow"; }
@@ -996,7 +1296,7 @@ export class TimeInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, every individual input field completed will emit an icChange event."
+                    "text": "If `true`, every individual input field completed will emit an icTimeChange event."
                 },
                 "getter": false,
                 "setter": false,
@@ -1212,6 +1512,26 @@ export class TimeInput {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "showAmPmToggle": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the time input will show an AM/PM toggle when in 12-hour time period."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-am-pm-toggle",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "showClearButton": {
                 "type": "boolean",
                 "mutable": false,
@@ -1312,7 +1632,7 @@ export class TimeInput {
                 "mutable": false,
                 "complexType": {
                     "original": "IcTimeFormat",
-                    "resolved": "\"HH:MM\" | \"HH:MM:SS\"",
+                    "resolved": "\"HH:MM\" | \"HH:MM:SS\" | \"HH:MM:SS.SSS\"",
                     "references": {
                         "IcTimeFormat": {
                             "location": "import",
@@ -1461,7 +1781,9 @@ export class TimeInput {
             "removeLabelledBy": {},
             "hour": {},
             "minute": {},
-            "second": {}
+            "second": {},
+            "millisecond": {},
+            "period": {}
         };
     }
     static get events() {
@@ -1509,8 +1831,8 @@ export class TimeInput {
                     }
                 }
             }, {
-                "method": "icChange",
-                "name": "icChange",
+                "method": "icTimeChange",
+                "name": "icTimeChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1519,8 +1841,8 @@ export class TimeInput {
                     "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; }; }",
+                    "original": "{\n    value: Date | null;\n    timeObject: {\n      hour: string | null;\n      minute: string | null;\n      second: string | null;\n      millisecond: string | null;\n      period: string | null;\n    };\n  }",
+                    "resolved": "{ value: Date | null; timeObject: { hour: string | null; minute: string | null; second: string | null; millisecond: string | null; period: string | null; }; }",
                     "references": {
                         "Date": {
                             "location": "global",
@@ -1576,7 +1898,7 @@ export class TimeInput {
                         }]
                 }
             },
-            "triggerIcChange": {
+            "triggerIcTimeChange": {
                 "complexType": {
                     "signature": "(t: Date | null) => Promise<void>",
                     "parameters": [{
@@ -1600,7 +1922,7 @@ export class TimeInput {
                     "text": "",
                     "tags": [{
                             "name": "internal",
-                            "text": "Used to enable other components to invoke an IcChange event from the input."
+                            "text": "Used to enable other components to invoke an icTimeChange event from the input."
                         }]
                 }
             }
@@ -1617,6 +1939,12 @@ export class TimeInput {
             }, {
                 "propName": "second",
                 "methodName": "watchInputHandler"
+            }, {
+                "propName": "millisecond",
+                "methodName": "watchInputHandler"
+            }, {
+                "propName": "period",
+                "methodName": "watchInputHandler"
             }, {
                 "propName": "disabled",
                 "methodName": "watchDisabledHandler"