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

package/dist/esm/ic-time-input.entry.js

@@ -0,0 +1,939 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
+import { b as isEmptyString, q as getInputDescribedByText, t as isNumeric, u as IcInformationStatus, r as removeDisabledFalse, v as removeFormResetListener, w as addFormResetListener, o as onComponentRequiredPropUndefined, x as renderHiddenInput } from './helpers-89cb996d.js';
+import { C as Clear } from './clear-icon-1c79bda2.js';
+
+const Clock = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clock-outline</title><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /></svg>`;
+
+const icTimeInputCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--ic-input-label-helpertext-padding:var(--ic-space-xs);--input-bg-color:var(--ic-time-picker-field-background);--ic-input-label-text-color:var(--ic-time-picker-label);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle);--border-color:var(--ic-time-picker-time-field-border-default);--border-color-disabled:var(--ic-time-picker-border-disabled);--border-color-hover:var(--ic-time-picker-time-field-border-hover);--border-color-pressed:var(--ic-time-picker-time-field-border-pressed);--border-error-color:var(--ic-time-picker-border-error);--border-error-color-hover:var(--ic-time-picker-border-error-hover);--border-error-color-pressed:var(--ic-time-picker-border-error-pressed);--border-success-color:var(--ic-time-picker-border-success);--border-success-color-hover:var(--ic-time-picker-border-success-hover);--border-success-color-pressed:var(--ic-time-picker-border-success-pressed);--border-warning-color:var(--ic-time-picker-border-warning);--border-warning-color-hover:var(--ic-time-picker-border-warning-hover);--border-warning-color-pressed:var(--ic-time-picker-border-warning-pressed);--input-width:calc((4 * var(--ic-space-xxl)) + var(--ic-space-xxs))}:host(.ic-time-input-disabled){--ic-input-label-text-color:var(--ic-time-picker-label-disabled);--ic-input-label-helper-text-color:var(--ic-time-picker-subtitle-disabled)}:host(.ic-time-input-disabled) input{color:var(--ic-time-picker-time-text-disabled)}:host(.ic-time-input-large){--input-width:calc(\n    (4 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-lg)\n  )}:host(.ic-time-input-small){--input-width:calc(\n    (3 * var(--ic-space-xxl)) + var(--ic-space-xxs) + var(--ic-space-xl)\n  )}input{border:0;height:100%;padding:0;outline:none;background:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;color:var(--ic-time-picker-time-text-default);caret-color:var(--ic-time-picker-typing-cursor)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input:-webkit-autofill{box-shadow:0 0 0 var(--ic-space-sm) var(--ic-color-background-primary) inset;-webkit-text-fill-color:var(--ic-time-picker-time-text-default) !important}input::-moz-placeholder{color:var(--ic-time-picker-field-placeholder-text)}input::placeholder{color:var(--ic-time-picker-field-placeholder-text)}ic-input-component-container{cursor:text}ic-input-component-container .focus-indicator{padding:var(--ic-space-xxxs) var(--ic-space-xs);align-items:center}.time-inputs{color:var(--ic-time-picker-field-placeholder-text)}.hour-input{width:1.438rem}.minute-input{width:1.813rem}.second-input,.second-input.fit-to-value{width:2.313rem}.fit-to-value{width:1.25rem}.sr-only{position:absolute;left:-9999px}.input-container{width:100%;display:flex;justify-content:space-between;align-items:center;position:relative}.action-buttons{display:flex;align-items:center}.show-clock-button-wrapper{display:flex;justify-content:center;align-items:center}.clear-button,.clock-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);margin:0}.clear-button.hidden{display:none}.clear-button:focus,.clock-button:focus,.clear-button:active,.clock-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:0.25rem}.clock-button:focus,.clock-button:active{--ic-button-tertiary-text-active:var(--ic-atoms-input-clear-button-focus);--ic-button-tertiary-text-hover-active:var(\n    --ic-atoms-input-clear-button-focus\n  );--ic-button-tertiary-text-pressed-active:var(\n    --ic-atoms-input-clear-button-focus\n  )}.clear-button:focus,.clock-button:focus,.clear-button:active *,.clock-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button svg{color:var(--ic-time-picker-clear-icon)}.clear-button:focus svg{color:var(--ic-atoms-input-clear-button-focus)}.divider{margin:0 var(--ic-space-xxs);width:var(--ic-space-1px);background-color:var(--ic-atoms-input-divider);border-radius:var(--ic-space-1px)}.divider.small{height:var(--ic-space-md)}.divider.medium{height:calc(var(--ic-space-sm) + var(--ic-space-xs))}.divider.large{height:var(--ic-space-lg)}ic-input-validation{--ic-input-validation-status-text-color:var(--ic-time-picker-status-text);--ic-input-validation-error:var(--ic-time-picker-icon-error);--ic-input-validation-warning-icon-color:var(--ic-time-picker-icon-warning);--ic-input-validation-success-icon-color:var(--ic-time-picker-icon-success)}@media (forced-colors: active){.clear-button svg{color:currentColor}}";
+const IcTimeInputStyle0 = icTimeInputCss;
+
+let inputIds = 0;
+const TimeInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clockButtonClicked = createEvent(this, "clockButtonClicked", 7);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        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;
+            }
+            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 delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "hour": ["watchInputHandler"],
+        "minute": ["watchInputHandler"],
+        "second": ["watchInputHandler"],
+        "disabled": ["watchDisabledHandler"],
+        "max": ["watchMaxHandler"],
+        "min": ["watchMinHandler"],
+        "required": ["watchRequiredHandler"]
+    }; }
+};
+TimeInput.style = IcTimeInputStyle0;
+
+export { TimeInput as ic_time_input };
+
+//# sourceMappingURL=ic-time-input.entry.js.map